初步用Echarts实现圆饼图

首先让大家看一下最后的效果:

初次使用Echarts来完成图表的效果，仅此记录一下。
一、引入Echarts

import echarts from "echarts";

二、写引入图表的布局

        <div class="data_governance_div">
          <div class="data_quality_div" ref="main_echearts"></div>
        </div>

.data_quality_div {
  width: 100%;
  height: 400px;
}
.data_governance_div {
  padding: 10px;
  border-left: 1px solid #e4e1e1;
  border-right: 1px solid #e4e1e1;
  border-bottom: 1px solid #e4e1e1;
}

三、初始化图表

 initEchart() {
      let chart = this.$refs.main_echearts;
      if (chart) {
        let myChart = echarts.init(chart);
        let option = {
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: "horizontal",
            left: "right",
            width: "260px",
            data: [
              "设备台账不完整",
              "线路台关系缺失",
              "设备台账不一致",
              "设备安装地址缺失",
              "停电通知未覆盖",
              "距离异常"
            ]
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: "35%",
              center: ["50%", "50%"],
              data: [
                {
                  value: 335,
                  name: "设备台账不完整",
                  itemStyle: { color: "#0a51b3" }
                },
                {
                  value: 310,
                  name: "线路台关系缺失",
                  itemStyle: { color: "rgba(28,108,218,1)" }
                },
                {
                  value: 234,
                  name: "设备台账不一致",
                  itemStyle: { color: "rgba(28,108,218,0.85)" }
                },
                {
                  value: 135,
                  name: "设备安装地址缺失",
                  itemStyle: { color: "rgba(28,108,218,0.7)" }
                },
                {
                  value: 1548,
                  name: "停电通知未覆盖",
                  itemStyle: { color: "rgba(28,108,218,0.5)" }
                },
                {
                  value: 1548,
                  name: "距离异常",
                  itemStyle: { color: "rgba(28,108,218,0.4)" }
                }
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        };
        myChart.setOption(option);
      }
    }

四、在vue项目的mounted（）方法中调用initEchart（）方法

 mounted() {
    this.initEchart();
  }

参考资料：Ecahrts官方文档