Echarts在线免费图表

 
            let data = [];
let currentIndex = 0;
let oldIndex;
let barChartList = [{
   name: '普通终端1',
   value: 20
},
{
   name: '普通终端2',
   value: 10
},
{
   name: '普通终端3',
   value: 30
},
{
   name: '普通终端4',
   value: 40
},
{
   name: '普通终端5',
   value: 40
}];
var color = ['#006EDF', '#00FF00', '#FFC30D', '#FF8400', '#00FFFF', '#fd5151', '#f071ff', '#85f67a'];
let total = Math.max(...barChartList.map(item => item.value))
let gap = total * (6 / 360)
for (var i = 0; i < barChartList.length; i++) {
   data.push(
      {
         value: barChartList[i].value,
         name: barChartList[i].name,
         itemStyle: {
            normal: {
               borderColor: color[i],
               shadowColor: color[i],
               color: color[i],
            }
         }
      },
      {
         value: gap,
         name: '',
         itemStyle: {
            normal: {
               label: {
                  show: false
               },
               labelLine: {
                  show: false
               },
               color: 'rgba(0, 0, 0, 0)',
               borderColor: 'rgba(0, 0, 0, 0)',
               borderWidth: 0
            }
         },
         emphasis: {
            label: {
               show: false
            }
         }
      }
   );
}
var seriesOption = [
   {
      name: 'pie1',
      type: 'pie',
      radius: [70, 100],
      center: ['30%', '50%'],
      grid: {
         containLabel: true
      },
      label: {
         show: false,
         position: 'center',
         formatter: '{c_style|{c}%}\n{b_style|{b}}',
         rich: {
            b_style: {
               fontSize: 16,
               fontWeight: 400,
               color: '#fff'
            },
            c_style: {
               padding: [0, 0, 10, 0],
               fontSize: 28,
               fontWeight: 'bold',
               color: '#fff'
            }
         }
      },
      emphasis: {
         label: {
            show: true,
            fontSize: '14',
            fontWeight: 'normal'
         }
      },
      labelLine: {
         show: false
      },
      data: data
   }
];
var optionRich = {
   a: {
      width: 60,
      fontSize: 18,
      fontWeight: 400,
      color: '#FFF',
      lineHeight: 20,
      padding: [0, 50, 0, 0]
   },
}

barChartList.forEach((ele, i) => {
   optionRich[i] = {
      width: 20,
      fontSize: 18,
      fontWeight: 400,
      lineHeight: 20,
      color: '#FFF',
      align: 'center',
      padding: [0, 0, 0, 20]
   }
});
console.log(optionRich)
option = {
   backgroundColor: '#011234',
   color: color,
   tooltip: {
      show: false
   },
   legend: {
      type: 'scroll',
      orient: 'vertical',
      left: '50%',
      align: 'left',
      top: 'middle',
      icon: 'circle',
      itemHeight: 15,
      itemWidth: 15,
      itemGap: 20,
      height: 300,
      data: barChartList,
      formatter: function (name) {
         let index = 0
         let value = 0;
         let rate = 0;
         for (let i = 0; i < barChartList.length; i++) {
            if (barChartList[i].name == name) {
               value = barChartList[i].value ? barChartList[i].value : 0;
               rate = (total / barChartList[i].value).toFixed(0);
               index = i;
            }
         }
         return `{a|${name}}{${index}|${'|'}}{${index}|${rate + '%'}}{${index}|${value}}`
      },
      textStyle: {
         color: '#fff',
         rich: optionRich
      }
   },
   series: seriesOption
};

myChart.on('mouseover', (params) => {
   oldIndex = currentIndex;
   currentIndex = params.dataIndex;
   highlightPie(currentIndex, oldIndex);
})
function highlightPie(currentIndex, oldIndex) {
   myChart.dispatchAction({
      type: 'downplay',
      seriesIndex: 0,
      dataIndex: oldIndex
   })
   myChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: currentIndex
   })
}
setTimeout(() => {
   highlightPie(0, 1);
}, 50)