Echarts在线免费图表

 
            let trafficWay = [
   { name: '需求上报', value: 24, },
   { name: '民情反馈', value: 8, },
   { name: '事件上报', value: 29, },
   { name: '矛盾调解', value: 41, }
];
let color = ['#0064fe', '#0086ff', '#00c9ff', '#00e5ff'];
let seriesOption = [
   {
      name: '',
      type: 'pie',
      radius: '80%',
      roseType: true,
      hoverAnimation: false,
      labelLine: {
         normal: {
            length: 10,
            length2: 30,
         }
      },
      label: {
         show: true,
         // position: 'outer',
         // alignTo: 'labelLine',
         // ·圆点
         backgroundColor: 'auto',
         height: 0,
         width: 0,
         lineHeight: 0,
         distanceToLabelLine: 0,
         borderRadius: 2.5,
         overflow: 'none',
         padding: [2.5, -2.5, 2.5, -2.5],
         fontSize: 12,
         formatter: function (params) {
            if (params.name !== '') {
               return `{a|${params.name}：}{b|${params.percent}%}`;
            } else {
               return '';
            }
         },
         rich: {
            a: {
               padding: [0, 0, 20, -20],
               color: '#fff'
            },
            b: {
               padding: [0, -20, 20, 0],
               color: '#fff'
            },
         }
      },
      data: trafficWay,
   },

];
let option = {
   backgroundColor: '#00266b',
   color: color,
   tooltip: {
      show: false,
   },

   toolbox: {
      show: false,
   },
   series: seriesOption,
};