Echarts在线免费图表

 
            const colorList1 = ['#00e4ff', '', '#1f77ee', '', '#f7b31d', '',]
const colorList2 = ['#0db0c3', '', '#0e51ab', '', '#ab7a0e', '',]
const colorList3 = ['#098c9c', '', '#084290', '', '#906508', '',]
let total = 0
let dataList = []
const moduleContent = { '村务': 204, '财务': 310, '党务': 84 }
let sum = 0
const chartdata = []
for (const i in moduleContent) {
   chartdata.push({
      name: i,
      value: moduleContent[i] || 1
   })
   sum += Number(moduleContent[i] || 0)
}
total = sum
dataList = chartdata
const data1 = []
chartdata.forEach((item) => {
   const _item = { ...item }
   if (!_item.value) {
      _item.value = sum / 100
   }
   data1.push(_item, {
      name: '',
      value: sum / 100,
      label: { show: false },
      itemStyle: {
         color: 'transparent'
      }
   })
})

let option = {
   backgroundColor: '#00266b',
   title: {
      text: '608',
      subtext: `总数`,
      top: '46%',
      left: 'center',
      itemGap: 15,
      textStyle: {
         color: '#ffffff',
         fontSize: 60,
         fontWeight: 400
      },
      subtextStyle: {
         color: 'rgba(255,255,255,0.39)',
         fontSize: 20,
         fontWeight: 400
      }
   },
   series: [
      {
         type: 'pie',
         radius: ['65%', '80%'],
         center: ['50%', '50%'],
         minAngle: 5,
         labelLine: {
            show: false
         },
         label: {
            show: true,
            alignTo: 'labelLine',
            position: 'outside',

            rich: {
               name: {
                  color: '#ffffff',
                  fontSize: 12,
                  fontWeight: 400,
                  padding: [0, 0, 0, 10]
               },
               zb: {
                  color: '#fff',
                  fontWeight: 400,
                  fontSize: 12,
                  align: 'left',
                  padding: [14, 0, 0, 24]
               },
               dot: {
                  backgroundColor: 'auto',
                  width: 14,
                  height: 14,
                  padding: [0, 0, 0, 0],
                  verticalAlign: 'top'
               }
            },
            formatter: (params) => {
               const x = params.dataIndex
               return '{dot|}' + '{name|' + params.data.name + '}' + '\n' + '{zb|' + params.data.value + '}'
            }
         },
         itemStyle: {
            normal: {
               color: function (params) {
                  return colorList1[params.dataIndex]
               }
            }
         },
         data: data1,
         z: 666
      },
      {
         type: 'pie',
         radius: ['65%', '55%'],
         center: ['50%', '50%'],
         hoverAnimation: false,
         minAngle: 5,
         emphasis: { scale: false },
         label: {
            show: false
         },
         itemStyle: {
            normal: {
               color: function (params) {
                  return colorList2[params.dataIndex]
               }
            }
         },
         data: data1,
         z: 1
      },
      {
         type: 'pie',
         radius: ['45%', '55%'],
         center: ['50%', '50%'],
         hoverAnimation: false,
         minAngle: 5,
         emphasis: { scale: false },
         label: {
            show: false
         },
         itemStyle: {
            normal: {
               color: function (params) {
                  return colorList3[params.dataIndex]
               }
            }
         },
         data: data1,
         z: 1
      }
   ]
}