type: 'scroll',

    drawLine() {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var legends = that.taskTypeList;
      var colors = ['rgba(2, 118, 232, 1)', 'rgba(243, 113, 63, 1)', 'rgba(1, 172, 145, 1)', 'rgba(214, 159, 39, 1)'];

      var data = [];
      that.taskTypeList.forEach((type, index) => {
        var data2 = {
          name: type,
          value: that.areaList[index]
        }
        data.push(data2)
      });
      var option = {
        color: colors,
        legend: {
          orient: 'vertical',
          top: 'center',
          icon: "circle",
          right: "15%",
          type: 'scroll',
          itemGap: 10,
          itemWidth: 20,
          height: '80%',
          itemHeight: 12,
          formatter: function (name) {
            var data = option.series[0].data;
            var total = 0;
            var tarValue;
            for (var i = 0; i < data.length; i++) {
              total += data[i].value;
              if (data[i].name == name) {
                tarValue = data[i].value;
              }
            }
            var v = tarValue;
            var p = Math.round(((tarValue / total) * 100));
            return `${name}  ${p}%`;
          },
          textStyle: {
            color: "#fff",
            fontSize: 14
          },
          data: legends,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
          {
            name: '作业类型对比',
            type: 'pie',
            radius: ['20%', '70%'],
            center: ['35%', '50%'],
            label: {
              show: false
            },
            labelLine: {
              length: 1,
              length2: 20,
              show: false
            },
            data: data
          },
          {
            stack: 'a',
            type: 'pie',
            center: ['35%', '50%'],
            radius: ['20%', '35%'],
            roseType: 'area',
            zlevel: 10,
            hoverAnimation: false,
            tooltip: {
              show: false
            },
            labelLine: {
              show: false,
              length: 1,
              length2: 20
            },
            data: [{
              name: '',
              value: 0,
              itemStyle: {
                normal: {
                  color: "rgba(0,0,0,0.3)"
                }
              }
            }]
          }
        ]
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },