Echarts在线免费图表

 
            const trafficWay = [
   {
      name: '智慧文旅平台',
      value: 1424,
   },
   {
      name: '美团',
      value: 314,
   },
   {
      name: '飞猪',
      value: 513,
   },
   {
      name: '同城',
      value: 245,
   },
];
let sum = trafficWay.reduce((cur, pre) => {
   return cur + pre.value;
}, 0);
let data = [];
let legendData = [];
var color = [
   '#00ffff',
   '#409B5C',
   '#006ced',
   '#ffe000',
   '#ffa800',
   '#ff5b00',
   '#ff3000',
];
for (var i = 0; i < trafficWay.length; i++) {
   let name = trafficWay[i].name + '  ' + trafficWay[i].value;
   legendData.push(name);
   data.push(
      {
         value: trafficWay[i].value,
         name: name,
         itemStyle: {
            borderWidth: 0,
            borderRadius: 10,
            shadowBlur: 10,
            borderColor: color[i],
            shadowColor: color[i],
         },
      },
      {
         value: sum / 100, // 控制每个环形之间的间隙
         name: '',
         itemStyle: {
            label: {
               show: false,
            },
            labelLine: {
               show: false,
            },
            color: 'rgba(0, 0, 0, 0)',
            borderColor: 'rgba(0, 0, 0, 0)',
            borderWidth: 0,
         },
      }
   );
}
let seriesOption = [
   {
      name: '',
      type: 'pie',
      clockwise: false,
      radius: ['50%', '70%'],
      center: ['30%', '50%'],
      emphasis: {
         scale: false,
      },
      label: {
         show: false,
      },
      data: data,
   },
];
option = {
   backgroundColor: '#021425',
   title: {
      text: '本月总量',
      subtext: sum,
      textStyle: {
         color: '#19E1E3',
         fontSize: 18,
         padding: [0, 0, 25, 0]
      },
      subtextStyle: {
         fontSize: 28,
         fontWeight: 'bolder',
         color: '#19E1E3'
      },
      x: '25%',
      y: '43%'
   },
   color: color,
   tooltip: {
      show: false,
   },
   legend: {
      icon: 'rect',
      itemWidth: 16,
      itemHeight: 8,
      itemStyle: {
         borderWidth: 3
      },
      orient: 'vertical',
      data: legendData,
      right: '10%',
      top: 'center',
      align: 'left',
      textStyle: {
         color: '#fff',
         fontSize: 16,
         padding: [0, 0, 0, 10]
      },
      itemGap: 20, // 图例之间的间隔
   },
   toolbox: {
      show: false,
   },
   series: seriesOption,
};