Echarts在线免费图表

 
            
let currentList = [
   {
      name: '圆环1',
      value: 4000,
      addNum: 12,
      color: '#64B5F6'
   },
   {
      name: '圆环2',
      value: 3200,
      addNum: 100,
      color: '#90CAF9'
   },
   {
      name: '圆环3',
      value: 2000,
      addNum: 100,
      color: '#BBDEFB'
   },
   {
      name: '圆环4',
      value: 800,
      addNum: 100,
      color: '#E3F2FD'
   },
]
let colorRich = {}
Object.values(currentList).forEach((item, index) => {
   let legend = {
      width: 8,
      height: 8,
      fontSize: 16,
      borderRadius: '50%',
      padding: [0, 8, 0, 0],
      color: 'inherit',
   }
   colorRich[`legend${index}`] = {
      ...legend,
      color: item.color,
   }
   colorRich[`name${index}`] = {
      width: 60,
      color: item.color,
   }
})
let yAxisFn = yData => {
   return [
      {
         show: true,
         type: 'category',
         inverse: true,
         // offset: -80,
         axisLine: {
            show: false,
         },
         axisTick: {
            show: false,
         },
         axisLabel: {
            show: true,
            interval: 0,
            inside: true,
            formatter: (value, index) => {
               let record = currentList[index]
               return `{legend${index}|●}\t{name${index}|${record.name}}\t{value|${value}}\t{chip|+${record.addNum}}`
            },
            rich: {
               // legend: {
               //   width: 8,
               //   height: 8,
               //   padding: [0, 8, 0, 0],
               //   color: 'inherit',
               // },
               // name: {
               //   color: 'inherit',
               //   width: 60,
               // },
               ...colorRich,
               value: {
                  color: '#64B5F6',
                  width: 50,
               },
               chip: {
                  backgroundColor: '#42A5F5',
                  padding: [5, 8, 2],
                  borderRadius: 5,
                  color: '#fff',
               },
            },
         },
         data: yData,
      },
   ]
}

let legend = {
   show: false,
   orient: 'vertical',
}

let seriesFn = list => {
   let numList = list.map(v => v.value)
   let total = numList.reduce((x, y) => x + y)
   let series = []
   let yData = []
   let center = ['40%', '55%']
   list.forEach((item, i) => {
      // 高亮环
      series.push({
         name: '',
         type: 'pie',
         clockwise: false, //顺时加载
         color: item.color,
         emphasis: {
            scale: false,
         }, //鼠标移入变大
         radius: [82 - i * 22 + '%', 77 - i * 22 + '%'],
         center,
         label: {
            show: false,
         },
         itemStyle: {
            borderWidth: 30, //圆柱图宽度
            borderRadius: 30, //光环宽度
            borderColor: 'rgba(0, 0, 0, 0)',
            borderDashOffset: 20,
         },
         data: [
            {
               value: item.value,
               name: item.name,
            },
            {
               value: total - item.value == 0 ? 1 : total - item.value,
               name: '',
               itemStyle: {
                  color: 'transparent',
               },
               emphasis: {
                  scale: false,
               },
            },
         ],
      })
      // 阴影环
      series.push({
         name: '',
         type: 'pie',
         silent: true,
         z: 1,
         clockwise: false, //顺时加载
         emphasis: {
            scale: false,
         }, //鼠标移入变大
         radius: [82 - i * 22 + '%', 78 - i * 22 + '%'],
         center,
         label: {
            show: false,
         },
         itemStyle: {
            borderWidth: 30, //圆柱图宽度
            borderRadius: 30, //光环宽度
            borderColor: 'rgba(0, 0, 0, 0)',
            borderDashOffset: 20,
         },
         data: [
            {
               value: 7.5,
               itemStyle: {
                  color: '#C5CAE9',
                  opacity: 0.1,
               },
               emphasis: {
                  scale: false,
               },
            },
            {
               value: 2.5,
               itemStyle: {
                  color: 'rgba(0,0,0,0)',
               },
               emphasis: {
                  scale: false,
               },
            },
         ],
      })
      yData.push(item.value)
      // yData.push(((item.value / total) * 100).toFixed(2) + '%')
   })
   return {
      series,
      yData,
   }
}

let optionFn = list => {
   if (!list || list.length === 0) {
      return {}
   }
   let { series, yData } = seriesFn(list)
   return {

      legend,
      grid: {
         // show: true,
         // backgroundColor: '#fff',
         top: '10%',
         bottom: '47%',
         left: '39.5%',
         containLabel: false,
      },
      xAxis: [
         {
            show: false,
         },
      ],
      yAxis: yAxisFn(yData),
      series: series,
   }
}

option = optionFn(currentList)