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

淩亂°似流年 2022-12-20 08:52 152阅读 0赞

**效果展示：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

**分析：**

（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" } },
                  { value: 234, name: "不满意", itemStyle: { color: "#78cdca" } },
                  { value: 135,name: "非常不满意",itemStyle: { color: "#a79ff8" }}
                ]
        };
      },
      mounted() {
        let _this = this;
        const { pieData } = _this;
        _this.drawLine(pieData);
        setTimeout(function() {
          // 随着页面自适应
          window.onresize = function() {
            _this.eChart.resize();
          };
        }, 200);
      },
      methods: {
        drawLine(pieData) {
          let eChart = echarts.init(document.getElementById("echartPie")); // 基于准备好的dom，初始化echarts实例
          this.eChart = eChart;
          eChart.setOption({
            tooltip: {
              trigger: "item",
              formatter: "{b} : {c}",
            },
            legend: {
              orient: "horizontal",
              right: "1%",
              data: [
                { name: "非常满意", icon: "circle" },
                { name: "满意", icon: "circle" },
                { name: "不满意", icon: "circle" },
                { name: "非常不满意", icon: "circle" },
              ],
            },
            series: [
              {
                name: "",
                type: "pie",
                radius: "55%",
                center: ["50%", "60%"],
                data: pieData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
                labelLine: {
                  lineStyle: {
                    type: "dotted", // 虚线
                  },
                },
                label: {
                  normal: {
                    position: "outer",
                  },
                },
              },
              {
                name: "",
                type: "pie",
                radius: "55%",
                center: ["50%", "60%"],
                data: pieData,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
                labelLine: {
                  lineStyle: {
                    type: "dotted", // 虚线
                  },
                },
                label: {
                  normal: {
                    show: true,
                    position: "inner",
                    fontSize: 12,
                    fontWeight: "bold",
                    align: "left",
                    formatter: function(p) {
                      //指示线对应文字,百分比
                      return p.percent.toFixed(0) + "%"; //设置百分比保留几位小数
                    },
                  },
                },
              },
            ],
          });
        },
      },
    };
    </script>
    
    <style scoped></style>

\-----完。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: /images/20221120/f439ad77f30040628faaf502e97f3b13.png