Echarts在线免费图表

 
              var res = [
     { value: 93, name: '节水型机关' },
     { value: 3, name: '节水型校园' },
     { value: 22, name: '节水型小区' },
     { value: 13, name: '其他' },
    ];
   //  var res = this.evaluatedCountList;
    var data1 = [], data2 = [], data3 = [], legendData = [];
    var curIndex = 0;
    var index = 0;

    for (var i = 0; i < res.length; i++) {
      data1.push({
        value: res[i].value,
        name: res[i].name,
      })
      data2.push({
        value: res[i].value,
        name: res[i].name,
        itemStyle: {
          opacity: 0.4,
        },
      })

      data3.push({
        value: res[i].value,
        name: res[i].name,
        itemStyle: {
          opacity: 0.1,
        },
      })
      legendData.push(res[i].name);
    }

    option = {
         backgroundColor: "#000",
      color: ['#4BC62D', '#01B1C0', '#3CB9FC', '#FFC076'],
      title: [
        {
          text: res[0].count,
          top: '37%',
          textAlign: 'center',
          left: '65%',
          textStyle: {
            color: '#ffffff',
            fontSize: 20,
            fontFamily: 'SourceHanSansCN',
          },
        },
        {
          text: res[0].evaluatedEnumValue,
          top: '53%',
          textAlign: 'center',
          left: '65%',
          textStyle: {
            color: 'rgba(242, 252, 253, 0.84)',
            fontSize: 14,
            fontFamily: 'SourceHanSansCN',
          },
        },
      ],
      grid: {
        top: '3%',
        left: '6%',
        right: '6%',
        bottom: '3%',
        containLabel: true
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}:{d}'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        top: 'middle',
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "#ffffff",
          fontSize: 17,
          lineHeight: 26,
          rich: {
            text: {
              fontSize: 17,
            },
            number: {
              fontSize: 19,
              color: "#0EFAF2",
              fontWeight: 'bold'
            },
            unit: {
              fontSize: 14,
            }
          }
        },
        data: legendData,
        formatter(name) {
          const newData = res;
          let tarValue = 0;
          let total = 0;
          for (let i = 0; i < newData.length; i++) {
            total += newData[i].count;
            if (newData[i].evaluatedEnumValue === name) {
              tarValue = newData[i].count;
            }
          }
          var percert = total == 0 ? 0 : ((tarValue / total) * 100).toFixed(2);
          const arr = name + '  ' + tarValue;
          return `{text|${name}} {number|${tarValue}}{unit|个}`;;
        },
      },
      series: [
        {
          type: 'pie',
          radius: ['60%', '70%'],
          center: ['67%', '50%'],
          z: 10,
          label: {
            show: false,
            position: 'center',
            formatter: (params) => {
              return params.name + "\r\n" + params.value
            },
            rich: {
              total: {
                fontSize: 16,
                color: '#04F5FE',
              },
              efficiency: {
                fontSize: 12,
                color: '#00FD6D',
              },
            },
            color: '#FFFFFF',
            fontSize: 12,
            lineHeight: 16,
          },
          data: data1,
          labelLine: {
            show: false,
          },
        },
        {
          type: 'pie',
          radius: ['49%', '60%'],
          center: ['67%', '50%'],
          label: {
            show: false,
          },
          data: data2,
          labelLine: {
            show: false,
          },
        },
        {
          type: 'pie',
          radius: ['38%', '49%'],
          center: ['67%', '50%'],
          label: {
            show: false,
          },
          data: data3,
          labelLine: {
            show: false,
          },
        },
      ],

    };

    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: curIndex * 1, //存在间隙 index*2
    });
    //设置高亮
    function setEmphasis(index) {
      if (curIndex != index) {
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: curIndex,
        });
      }
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: index,
      });

      //修改option参数
      curIndex = index;
      option.title[0].text = data1[index].value;
      option.title[1].text = data1[index].name;
      myChart.setOption(option);
    }
    //自动轮播
    function startAnima() {
      clearInterval(self.userWaterSetInterval2);
      self.userWaterSetInterval2 = setInterval(function () {
        if (index >= data1.length - 1) {
          index = 0;
        } else {
          index += 1;
        }
        setEmphasis(index);
      }, 2000);
    }
    //取消轮播
    function clearAnima() {
      clearInterval(self.userWaterSetInterval2);
    }
    //开始轮播
    startAnima();
    //鼠标移入事件
    myChart.on('mouseover', function (e) {
      clearAnima();
      setEmphasis(e.dataIndex);
    });
    myChart.on('mouseout', function (e) {
      startAnima();
    });