Echarts在线免费图表

 
            const data = [
  { value: 1048, name: '文书卷/件' },
  { value: 735, name: '专业' },
  { value: 580, name: '科技' },
  { value: 484, name: '会计' },
  { value: 300, name: '干部（死亡）' },
  { value: 148, name: '实物' },
  { value: 35, name: '照片' },
  { value: 500, name: '录像' },
  { value: 500, name: '录音' },
]
option = {
  tooltip: {
    trigger: "item",
    formatter: "{b} : {c}  {d}%",
  },
  toolbox: {
    show: true,
  },
  legend: {
    show: true,
    orient: 'vertical',
    right: '0%',
    top: '18%',
    itemGap: 30,
    textStyle: {
      color: '#ffffff',
      fontSize: 12,
    },
    data: data.map(v => v.name)
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['20%', '70%'],
      avoidLabelOverlap: true,
      itemStyle: {
        borderRadius: 10,
        borderWidth: 2,
        color: function (params) {
          const colorList = [
            {
              c1: ' #FF5745',
              c2: '#D05A4D',
            },
            {
              c1: ' #FA981E',
              c2: '#EC7322',
            },
            {
              c1: '#FFD145',
              c2: '#FFD145',
            },
            {
              c1: ' #238483',
              c2: '#55C27C',
            },
            {
              c1: ' #45EAFF',
              c2: '#40ADAC',
            },
            {
              c1: '#12B3F8',
              c2: '#7DE8FF',
            },
            {
              c1: ' #0176D3',
              c2: '#13B7FF',
            },
            {
              c1: '#015BD3',
              c2: '#138DFF',
            },
            {
              c1: ' #7c94e7',
              c2: '#1e2783',
            }
          ];
          console.log(colorList[params.dataIndex])
          return new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: colorList[params.dataIndex].c1,
            },
            {
              offset: 1,
              color: colorList[params.dataIndex].c2,
            }
          ])
        },
      },

      label: {
        normal: {
          show: true,
          formatter: "{c}",
          position: 'outside',
          color: "#fff"
        },
        emphasis: {
          show: true,
        },
      },
      labelLine: {
        show: true, //显示引导线
        length: 30, //连接饼图第1段线条的长度 length length2 不写自适应
        length2: 10, //链接饼图第2段线条长度
        smooth: true, //是否光滑连接线
      },
      // label: {
      //   show: true,
      //   position: 'center'
      // },

      emphasis: {
        label: {
          show: true,
          fontSize: '20',
          fontWeight: 'bold',
          formatter: params => {
            return '{a|' + params.name + '}\n{b|' + params.value + '}'
          },
          rich: {
            a: {},
            b: {}
          }
        }
      },
      data: data
    }
  ]
};

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,
    });
  }, 1500);
}
// animate();

myChart.on("mouseover", function (e) {
  clearInterval(timer);
  // 取消之前高亮的图形
  myChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
  });
  myChart.dispatchAction({
    type: 'highlight',
    dataIndex: e.dataIndex
  });
});

myChart.on("mouseout", function (e) {
  currentIndex = e.dataIndex;
  // animate();
});