vue中使用echerts饼状图

1.在页面中按需加载

let echarts = require("echarts/lib/echarts");
// 引入饼状图组件
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

2.创建容器

<div class="pie">
     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
     <div id="main1" style="float:left;width:493px;height: 530px"></div>
</div>

3.在js里写

 mounted() {
    this.initData();
  }
   methods: {
    //初始化数据
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main1"));
      window.onresize = myChart.resize;
      // 绘制图表
      myChart.setOption({
        series: [
          {
            name: "部门报销比例",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
                //{b}是name {c}是value
                formatter: ["{a|{b}}", "{b|{c}元}"].join("\n"),
                //在 rich 里面，可以自定义富文本样式。{a|}是标签
                rich: {
                  a: {
                    fontSize: 40,
                    lineHeight: 30
                  },
                  b: {
                    fontSize: 21,
                    lineHeight: 60,
                    height: 60
                  }
                }
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "30",
                  fontWeight: "bold"
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.data,
            color: ["#f9c270", "#40c4f4", "#999", "pink", "blue", "red"]
          }
        ]
      });

      //设置默认选中高亮部分
      myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0
      });

      myChart.on("mouseover", function(e) {
        console.log(e);
        //当检测到鼠标悬停事件，取消默认选中高亮
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: 0
        });
        //高亮显示悬停的那块
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex
        });
      });

      //检测鼠标移出后显示之前默认高亮的那块
      myChart.on("mouseout", function(e) {
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: e.dataIndex
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0
        });
      });
    }
  }
``