Echarts在线免费图表

 
            const colorList1 = [ 'rgb(61, 188, 190)','', 'rgb(50, 84, 221)','', 'rgb(43, 142, 243)','', 'rgb(190, 229, 251)','', 'rgb(60, 212, 149)','']
const colorList2 =  [ 'rgb(61, 188, 190,0.5)','', 'rgb(50, 84, 221,0.5)','', 'rgb(43, 142, 243,0.5)', '','rgb(190, 229, 251,0.5)', '','rgb(60, 212, 149,0.5)','']
let total = 0
let dataList = []
const moduleContent = { '化学': 420, '金属制造业': 380, '电气机械和器械制造业': 100 ,'生态保护和环境治理业': 70, '仓储业': 30}
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: '151个',
    left: 'center',
    top: '45%',
    itemGap: 10,
    textStyle: {
      color: '#fff',
      fontSize: '35',
      fontWeight: 500
    },
    subtext: '共计企业',
    subtextStyle: {
      color: 'rgba(255,255,255,0.5)',
      fontSize: '20',
      fontWeight: 600
    }
  },
  tooltip: {
    trigger: 'item',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
    },
    formatter(params) {
      if(params.data.name){
        return `${params.name + ':' + params.data.value}`
      }
    },
    // formatter: "{b}: {c} "+" | "+"{d}%",
    textStyle: {
      fontSize: 18,
      color: 'rgba(255,255,255,0.8)'
    },
    borderColor: 'rgba(255,255,255,0.9)',
    backgroundColor: 'rgba(255,255,255,0.5)',
    extraCssText: 'box-shadow: 2px 2px 4px 0px rgba(255,255,255,0.5);'
  },
  series: [
    {
      type: 'pie',
      radius: ['50%', '72%'],
      center: ['50%', '50%'],
      minAngle: 5,
      labelLine: {
        show: false
      },
      label: {
        show: false,
      },
      itemStyle: {
        normal: {
          color: function (params) {
            return colorList1[params.dataIndex]
          }
        }
      },
      data: data1,
      z: 666
    },
    {
      type: 'pie',
      radius: ['75%', '85%'],
      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
    },
  ]
}