Echarts在线免费图表

 
            const bgColors = [
   'rgba(255, 169, 101, 0.4)',
   'rgba(107, 165, 255, 0.4)',
   'rgba(162, 134, 254, 0.4)',
   'rgba(75, 210, 201, 0.4)'
];
const colors = ['#FFA965', '#6BA5FF', '#A286FE', '#4BD2C9']
const names = [
   '测试1',
   '测试2',
   '测试3',
   '测试4',
]

const bgSeriesData = []
const seriesData = []
const values = [25, 25, 25, 25]

names.forEach((item, index) => {
   bgSeriesData.push({
      name: item,
      value: values[index],
      itemStyle: {
         color: bgColors[index]
      }
   })
   seriesData.push({
      name: item,
      value: values[index],
      itemStyle: {
         color: colors[index]
      }
   })
})



option = {
   backgroundColor: '#fff',
   title: {
      text: '数量',
      subtext: `100.00`,
      top: '48%',
      left: 'center',
      textStyle: {
         color: '#666666',
         fontSize: 20,
         fontWeight: 400
      },
      subtextStyle: {
         color: '#333333',
         fontSize: 16,
         fontWeight: 400
      }
   },
   series: [
      {
         type: 'pie',
         radius: ['40%', '54%'],
         center: ['50%', '50%'],
         labelLine: {
            show: true,
            length2: 100,
            length: 20,
            lineStyle: {
               color: '#DDDDDD'
            }
         },
         label: {
            show: true,
            position: 'outside',
            distanceToLabelLine: -70,
            rich: {
               name0: {
                  color: '#333333',
                  fontSize: 14,
                  fontWeight: 400,
                  padding: [0, 0, 8, 6]
               },
               name1: {
                  color: '#333333',
                  fontSize: 14,
                  fontWeight: 400,
                  padding: [0, 0, 8, 6]
               },
               name2: {
                  color: '#333333',
                  fontSize: 14,
                  fontWeight: 400,
                  padding: [0, 20, 8, 6]
               },
               name3: {
                  color: '#333333',
                  fontSize: 14,
                  fontWeight: 400,
                  padding: [0, 20, 8, 6]
               },
               zb0: {
                  color: '#666666',
                  fontWeight: 400,
                  fontSize: 13,
                  padding: [8, 0, 0, 12]
               },
               zb1: {
                  color: '#666666',
                  fontWeight: 400,
                  fontSize: 13,
                  padding: [8, 0, 0, 12]
               },
               zb2: {
                  color: '#666666',
                  fontWeight: 400,
                  fontSize: 13,
                  padding: [8, 0, 0, 12],
                  align: 'left'
               },
               zb3: {
                  color: '#666666',
                  fontWeight: 400,
                  fontSize: 13,
                  padding: [8, 0, 0, 12],
                  align: 'left'
               },
               dot0: {
                  backgroundColor: '#FFA965',
                  width: 6,
                  height: 6,
                  padding: [0, 0, 0, 0],
                  borderRadius: 3,
                  verticalAlign: 'top'
               },
               dot1: {
                  backgroundColor: '#6BA5FF',
                  width: 6,
                  height: 6,
                  padding: [0, 0, 0, 0],
                  borderRadius: 3,
                  verticalAlign: 'top'
               },
               dot2: {
                  backgroundColor: '#A286FE',
                  width: 6,
                  height: 6,
                  padding: [0, 0, 0, 0],
                  borderRadius: 3,
                  verticalAlign: 'top'
               },
               dot3: {
                  backgroundColor: '#4BD2C9',
                  width: 6,
                  height: 6,
                  padding: [0, 0, 0, 0],
                  borderRadius: 3,
                  verticalAlign: 'top'
               }
            },
            formatter: (params) => {
               const x = params.dataIndex
               return '{dot' + x + '|}' + '{name' + x + '|' + params.data.name + '}' + '\n' + '{zb' + x + '|占比' + params.percent + '%}'
            }
         },
         data: seriesData
      },
      {
         type: 'pie',
         radius: ['32%', '40%'],
         center: ['50%', '50%'],
         labelLine: {
            show: false
         },
         label: {
            show: false
         },
         silent: true,
         data: bgSeriesData
      }
   ]
};