Echarts在线免费图表

 
             let data = [
  { value: 100, name: '新上报' },
  { value: 400, name: '已处理'},
  { value: 500, name: '处理中' },
]
option = {
   tooltip: {
          show: true,
        },
        legend: {
          type: 'scroll',
          top: 'middle',
          right: '20%',
          icon: 'roundRect',
          itemWidth: 4,
          itemHeight: 28,
          borderRadius: 100,
          pageIconColor: '#00EBFF',
          pageIconInactiveColor: 'rgba(0, 235, 255, 0.4)',
          pageTextStyle: {
            color: '#FFF',
          },
          textStyle: {
            color: '#4E5969',
            //图例样式修改
            rich: {
              name: {
                width: 60,
                fontSize: 14,
                fontWeight: 500,
                align: 'left',
              },
              rate: {
                width: 20,
                fontSize: 20,
                fontWeight: 500,
                align: 'left',width: 30,
                align: 'left',
                fontSize: 12,
              },
            },
          },
          //自定义legend图例
          formatter: function (name) {
            let total = 0
            let target
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name === name) {
                target = data[i].value
              }
            }
            var arr = [
              '{name|' + name + '}',
              '{rate|' + ((target / total) * 100).toFixed(2) + '%}'
            ]
            return arr.join('  ')
          },
          orient: 'vertical',
          data: ['新上报', '已处理', '处理中'],
        },
        color: ['#165DFF', '#14C9C9', '#F7BA1E'],
        series: {
          name: '',
          type: 'pie',
          hoverAnimation: false,
          center: ['25%', '50%'],
          radius: ['40%', '50%'],
          data:data,
          label: {
            normal: {
              show: false,
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
        },
};