在vue项目中，完成饼图，并且饼图内外都展示文字

最新推荐文章于 2025-06-16 15:44:50 发布

原创

最新推荐文章于 2025-06-16 15:44:50 发布 · 1.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #echarts

本文介绍了在Vue项目中使用Echarts实现饼图，包括如何让饼图内外同时显示文字。通过创建两份饼图并重叠，成功达到文字展示的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示：

分析：

（1）如果不展示内部的百分比数字，那么这个饼图没什么难度。但是要是实现内外部同时展示文字，就需要思考下。

（2）实现内外部同时展示：需要两份饼图，叠在一起（看下下面代码就很清楚了）。

代码展示：

<template>
  <div id="echartPie" style="width: 100%;height: 300px;"></div>
</template>
<script>
let echarts = require("echarts/lib/echarts"); // 引入基本模板
require("echarts/lib/chart/line"); // 引入折线图组件
require("echarts/lib/chart/bar"); // 引入柱状图组件
require("echarts/lib/component/tooltip"); // 引入提示框
require("echarts/lib/component/title"); // title组件

export default {
  name: "eCharts",
  data() {
    return {
      msg: "",
      pieData:[
              { value: 335, name: "非常满意", itemStyle: { color: "#8cb1f9" } },
              { value: 310, name: "满意", itemStyle: { color: "#f8d27a" } },