vue echarts 画饼图

页面：

    {{--饼图--}}
    <template>
{{--    <div class="col-md-12">--}}
{{--      <div id="mychart4" class="col-md-4" style="height: 400px">--}}
{{--      </div>--}}
{{--    </div>--}}
      
		<el-col :span="8">
		   <div id="mychart4" :style="{width: '100%', height: '400px'}">
		   </div>
		 </el-col>
    </template>

  pie_data: [],  //饼图
  myChart: {},
  pieName: [],



/*
 * 再画个饼给秃吃
 **/
  drawPieChart(){
      var that = this;
      var pie_title =  "制板未达成原因";
      let select_type = that.selectType;
      if (select_type == 2){
        pie_title =  "样品未达成原因";
      }
      for (let i = 0; i < that.pie_data.length; i++) {
        that.pieName[i] = that.pie_data[i].name;
      }
      var option;
      option = {
        // xAxis: {
        // },
        // yAxis: {
        // },
        legend: {
          // 图例
          data: that.pieName2,
          right: "10%",
          top: "10%",
          orient: "vertical"
        },
        title: {
            // 设置饼图标题，位置设为顶部居中
            text: pie_title,
            //子标题
            subtext: sub_title,
            top: "0%",
            left: "center",
            //子标题字体大小
            subtextStyle:{
              fontSize: 16,
              fontWeight: 500,
              color: '#000'
            },
            //鼠标移入显示
            tooltip: {
              trigger: 'item',
              formatter: '{a} : <br/> {b} : {c} <br/>百分比 : {d}%' //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比
            },
        },

        series: [
         {
            name: sub_title, //{a}（系列名称）
            type: "pie",
            data: that.pie_data,
            label: {
				show: true,
                //color: 'inherit', //label与饼图区域颜色 一致
                //formatter: "{b}：{c} ({d}%)" ,// b名称，c对应值，d百分比
                //formatter: "{b}：\n{c} ({d}%)" , //加回车
                //formatter: '{d}%' ,//只要百分比
				//设置label的字体大小
                "normal": {
                  "show": true,
                  //"position":'inner', //标签的位置
                  //label的字体
                  "textStyle": {
                    "fontSize": 12,
                    "fontWeight" : 200,
                    //"color": "#000"  //指定颜色
                    "color": 'inherit', //label与饼图区域颜色 一致
                  },
                  //formatter: "{b}：{c} ({d}%)" ,// b名称，c对应值，d百分比
                  //formatter:"{b}：{d}%" ,
                  //formatter: "{b}：\n{c} ({d}%)" ,
                  //设置label的颜色
                  //formatter: function (params) {
                    // return params.value;
                      return params.seriesName + ' \n ' + params.value;
                  //},
                  formatter: "{b}: {a|{d}%}",
                  rich: {
                    a: {
                      color: "#17b3e9",
                    },
                  },

                },
            },
            itemStyle: {
                //这里是更添加阴影
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                //这里是更改饼图颜色
                normal:{
                  color:function(params) {
                    var colorList = [
                      '#2F4554','#C23531'
                    ];
                    return colorList[params.dataIndex]
                  }
                }
            },
            radius: "50%", //饼图半径

          }
        ]

      };

      var chartDom = document.getElementById('mychart2');
      var myChart = echarts.init(chartDom);
      option && myChart.setOption(option);
      
      //初始化echarts
      //var myChart = echarts.init(document.getElementById('main'));
	  //var myChartA = echarts.init(document.getElementById('mainA'));
	  //var myChartB = echarts.init(document.getElementById('mainB'));
      //加载echarts配置项
	  //myChart.setOption(option);
	  //myChartA.setOption(option);
	  //myChartB.setOption(option);
  
       //随着屏幕大小调节图表 自适应

        //方法一：
        // window.addEventListener("resize",function (){
        //   myChart.resize();
        //   myChartA.resize();
        //   myChartB.resize();
        // });
        //
        //方法二：
        // window.onresize = function(){
        //   myChart.resize();
        //   myChartA.resize();
        //   myChartB.resize();
        // }
    },