Echarts在线免费图表

 
            let Data = [
   {
      value: 15461,
      name: '一类',
   },
   {
      value: 1,
      name: '二类',
   },
   {
      value: 6546,
      name: '三类',
   },
   {
      value: 2718,
      name: '四类',
   },
   {
      value: 1704,
      name: '五类',
   },
]
option = {
   color: ['#ffd200', '#00ffa8', '#ff8400', '#ff806b', '#61e7ff'],
   series: [
      {
         type: 'pie',
         hoverAnimation: true,
         minAngle: 1,
         padAngle: 4,
         hoverOffset: 0,
         startAngle: 0, //起始角度
         clockwise: false, //是否顺时针
         radius: ['70%', '88%'],
         center: ['50%', '50%'],
         avoidLabelOverlap: false,
         animationDuration: 3000,
         emphasis: {
            label: {
               show: true,
               fontSize: '30',
               fontWeight: 'bold',
               formatter: ['{a|{c}}' + '\n' + '{b|{b}}'].join('\n'),
               rich: {
                  a: {
                     fontSize: 40,
                     lineHeight: 50,
                     color: '#000',
                  },
                  b: {
                     color: '#000',
                     fontSize: 30,
                     lineHeight: 30,
                  },
               },
            },
         },
         label: {
            show: false,
            position: 'center',
            color: 'rgba(13, 17, 29,0)',
         },
         labelLine: {
            show: false,
         },
         data: Data,
         zlevel: 30,
      },
      {
         type: 'pie',
         radius: ['95%', '100%'],
         center: ['50%', '50%'],
         hoverAnimation: true,
         hoverOffset: 0,
         startAngle: 0, //起始角度
         clockwise: false, //是否顺时针
         padAngle: 4,
         minAngle: 1,
         animationDuration: 3000,
         emphasis: { scale: false },
         label: {
            show: false,
         },
         itemStyle: {
            normal: {
               color: '#05426e',
            },
         },
         data: Data,
         z: 1,
      },
   ],
};
// let index = 0; //默认选中第一个
// myChart.dispatchAction({
//    type: 'highlight',
//    seriesIndex: 0,
//    dataIndex: index, //默认选中第一个
// });
// myChart.on('mouseover', function (e) {
//    if (e.dataIndex != index) {
//       myChart.dispatchAction({
//          type: 'downplay',
//          seriesIndex: 0,
//          dataIndex: index,
//       });
//    }
// });
// myChart.on('mouseout', function (e) {
//    index = e.dataIndex;
//    myChart.dispatchAction({
//       type: 'highlight',
//       seriesIndex: 0,
//       dataIndex: e.dataIndex,
//    });
// });