Echarts在线免费图表

 
            let color = ['rgba(50, 146, 255, 1)', 'rgba(50, 243, 255, 1)', 'rgba(255, 210, 50, 1)', 'rgba(47, 217, 125, 1)', 'rgba(244, 244, 244, 1)'];
let chartData = [
  { name: '事件一', value: 8848 },
  { name: '事件二', value: 4396 },
  { name: '事件三', value: 3690 },
  { name: '事件四', value: 2587 },
  { name: '事件五', value: 1248 }
];
let pieSeries = [],lineYAxis = [];
let arrName = [];
let arrValue = [];
let sum = 0;
chartData.forEach((v, i) => {
  arrName.push(v.name);
  arrValue.push(v.value);
  sum = sum + v.value;
});
chartData.forEach((v, i) => {
  let chartnewData = chartData.slice(0, i);
  let newValue = chartnewData.reduce((a, b) => {
    return a + b.value;
  }, 0);
  v.startAngle = (newValue / sum) * 360;
  pieSeries.push({
    type: 'pie',
    clockWise: false,
    hoverAnimation: false,
    radius: [75 - i * 9 + '%', 72 - i * 9 + '%'],
    center: ['30%', '50%'],
    label: { show: false },
    startAngle: v.startAngle,
    data: [{ value: v.value, name: v.name }, { value: sum - v.value, name: '', itemStyle: { color: 'rgba(0,0,0,0)' } }]
  });
  pieSeries.push({
    type: 'pie',
    silent: true,
    z: 1,
    clockWise: false,
    hoverAnimation: false,
    radius: [75 - i * 9 + '%', 72 - i * 9 + '%'],
    center: ['30%', '50%'],
    label: { show: false },
    data: [{ value: sum, itemStyle: { color: '#013561' } }, { value: 0, name: '', itemStyle: { color: 'red' } }]
  });
  v.percent = ((v.value / sum) * 100).toFixed(0) + '%';
  lineYAxis.push({
    value: i,
    textStyle: {
      rich: {
        circle: {
          color: color[i],
          padding: [0, 5]
        }
      }
    }
  });
});

option = {
   backgroundColor: "#051C43",
   color: color,
   graphic: { elements: [{ type: 'image', z: 3, style: { width: 70, height: 72 }, left: '36%', top: 'center' }] },
   tooltip: { show: true },
   legend: {
      icon: 'roundRect',
      orient: 'vertical',
      data: arrName,
      right: '10%',
      top: '15%',
      itemGap: 13,
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
         color: '#fff',
         fontSize: 13,
         rich: {
            a0: { color: color[0], align: 'center', fontSize: 14 },
            a1: { color: color[1], align: 'center', fontSize: 14 },
            a2: { color: color[2], align: 'center', fontSize: 14 },
            a3: { color: color[3], align: 'center', fontSize: 14 },
            a4: { color: color[4], align: 'center', fontSize: 14 },
            b: { color: '#fff', width: 50 }
         }
      },
      formatter: name => {
         if (chartData.length) {
            var target;
            var index;
            for (var i = 0, l = chartData.length; i < l; i++) {
               if (chartData[i].name == name) {
                  target = chartData[i].value;
                  index = i < 6 ? i : 5;
               }
            }
            return `{b|${name}}\n{a${index}|${target}}`;
         }
      }
   },
   grid: { top: '15%', bottom: '15%', left: '45%', containLabel: false },
   yAxis: [{
      type: 'category',
      inverse: true,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
      data: lineYAxis
   }],
   xAxis: [{ show: false }],
   series: pieSeries
};