Echarts在线免费图表

 
            option = {
  backgroundColor: '#1f4279',
  color: ['#4CD57D', '#0CE5F3', '#4772E1', '#EFB062', '#4b5cc4', '#fa8c35'],
  tooltip: {
    show: false,
    backgroundColor: '#02132fC9',
    borderColor: '#0D97E460',

    textStyle: {
      fontSize: 16,
      color: '#DCDCDC'
    },
    formatter: (params) => {
      var yzg = (params.data.yzg / params.value) * 100;
      var wzg = (params.data.wzg / params.value) * 100;
      return `${params.name}:${params.value}件<br/>
          已解决: ${params.data.yzg}件(${yzg.toFixed(2)}%)<br/>
          未解决: ${params.data.wzg}件(${wzg.toFixed(2)}%)`;
    }
  },
  legend: {
    orient: 'vertical',
    right: 10,
    top: '30%',
    icon: 'rect',
    textStyle: {
      fontSize: 14,
      color: '#fff'
    }
    //  show: false,
  },
  series: [
    {
      name: '',
      type: 'pie',
      center: ['35%', '50%'],
      radius: ['55%', '70%'],
      avoidLabelOverlap: false,

      label: {
        textStyle: {
          fontSize: 14,
          color: '#fff'
        }
      },
      labelLine: {},

      data: [
        { value: 56, name: '乱采', yzg: 50, wzg: 6 },
        { value: 74, name: '乱占', yzg: 70, wzg: 4 },
        { value: 23, name: '乱建', yzg: 6, wzg: 2 },
        { value: 11, name: '乱堆', yzg: 10, wzg: 1 }
      ]
    },
    {
      name: '',
      type: 'pie',
      selectedMode: 'single',
      center: ['35%', '50%'],
      radius: [0, '45%'],
      label: {
        position: 'inner',
        textStyle: {
          fontSize: 14,
          color: '#fff'
        },
        formatter: (params) => {
          return `${params.name}\n\n${params.value}件`;
        }
      },
      // labelLine: {
      //   show: false
      // },
      data: [
        // 默认和第一个数值相同
        { value: 50, name: '已解决' },
        { value: 6, name: '未解决' }
      ]
    }
  ]
};

var currentIndex = 0;
var timer = 0;
function animate() {
  timer = setInterval(function () {
    var dataLen = option.series[0].data.length;
    // 取消之前高亮的图形
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
    currentIndex = (currentIndex + 1) % dataLen;
    // 高亮当前图形
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex
    });
    option.series[1].data[0].value = option.series[0].data[currentIndex].yzg;
    option.series[1].data[1].value = option.series[0].data[currentIndex].wzg;
    myChart.setOption(option, true);
  }, 2000);
}
animate();

myChart.on('mouseover', function (e) {
  if (e.seriesIndex == 0) {
    clearInterval(timer);
    // 取消之前高亮的图形
    myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0
    });
    myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: e.dataIndex
    });
    option.series[1].data[0].value = option.series[0].data[e.dataIndex].yzg;
    option.series[1].data[1].value = option.series[0].data[e.dataIndex].wzg;
    myChart.setOption(option, true);
  }
});

myChart.on('mouseout', function (e) {
  if (e.seriesIndex == 0) {
    currentIndex = e.dataIndex;
    animate();
  }
});