vue前端实现饼图

参考：https://blog.csdn.net/xxtnt/article/details/95594896
https://blog.csdn.net/weixin_43953710/article/details/90034985

1、定义div

2、引入import echarts from "echarts";
3、弹出框展示分布图
踩坑：弹出层中插入echarts图表，没有报错（有的人也有报错，结果都是加载不出来），但是图表加载不出来
原因分析：
弹出层 的内容是懒渲染的，即在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。
弹出层组件会监听 visible 的状态，当状态为 true 时，立刻触发 open 事件，但这个时候 弹出层 的内容还没有渲染。因为 Vue 组件通过 $emit 触发的事件并不是异步执行的，而是同步执行。
弹窗在点击弹出前弹窗里的内容 是没有渲染到dom
在点击显示弹窗的时候 让弹窗里的内容渲染到dom
解决方式：nextTick（推荐此方法）

getChart(value) {
      if (value == "1") {
        this.$nextTick(() => {
          //  执行echarts方法
          this.renderChart();
        });
      }
    },
    renderChart() {
      var chart2 = echarts.init(document.getElementById("build_chart2"));
      var titleStr = "";
      var legendData = [];
      var SeriesData = [];
      var SeriesDataObj = {};
      this.failDetailList.forEach((item, index) => {
        legendData.push(item.reason);
        this.$set(SeriesDataObj, "name", item.reason);
        this.$set(SeriesDataObj, "value", item.count);
        SeriesData.push(SeriesDataObj);
        SeriesDataObj = {};
      });
      //无失败数据时展示title
      if(legendData.length == "0"){
        titleStr = "暂无数据"
      } else {
        titleStr = "失败原因分布"
      }
      chart2.setOption({
        title: {
          text: titleStr, //主标题
          subtext: "", //副标题
          x: "center" //x轴方向对齐方式
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} 
{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          bottom: "bottom",
          data: legendData
        },
        series: [
          {
            name: "错误原因",
            type: "pie",
            radius: "55%",
            center: ["55%", "45%"],
            data: SeriesData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      });
    }

效果图如下：

image.png