Echarts在线免费图表

 
            
const color = ['rgba(23, 106, 230, 0.65)', 'rgba(204, 208, 97, 0.65)', 'rgba(141, 54, 47, 0.65)'];
const data = [
   { name: '企业1', value: 20 },
   { name: '企业2', value: 30 },
   { name: '企业3', value: 50 },
]
option = {
   color,
   backgroundColor: 'rgba(0,0,0,0.85)',
   toolbox: {
      show: true,
   },
   legend: {
      itemWidth: 14,
      itemHeight: 14,
      orient: 'vertical',
      left: '45%',
      align: 'left',
      top: 'middle',
      textStyle: {
         fontSize: 12,
         fontFamily: 'PingFang SC',
         fontWeight: 'bold',
         color: '#FFFFFF',
         lineHeight: 20,
      },
      formatter: function (name) {
         let value = '';
         for (let i = 0, l = data.length; i < l; i++) {
            if (data[i].name == name) {
               value = data[i].value;
            }
         }
         return `${name}\n ${value}个`;
      },
   },
   series: [
      {
         name: '总数',
         type: 'pie',
         clockWise: true,
         hoverAnimation: false,
         startAngle: 90,
         center: ['30%', '50%'],
         radius: [35, 36],
         label: {
            normal: {
               show: false,
            },
         },
         data: [100],
         itemStyle: {
            color: {
               type: 'linear',
               x: 0,
               y: 0,
               x2: 1,
               y2: 0,
               colorStops: [
                  {
                     offset: 0,
                     color: 'rgba(0, 202, 255, 0.2)', // 0% 处的颜色
                  },
                  {
                     offset: 1,
                     color: 'rgba(30, 247, 255, 0.2)', // 100% 处的颜色
                  },
               ],
            },
         },
      },
      {
         name: '风险地块',
         zlevel: 11,
         type: 'pie',
         center: ['30%', '50%'],
         radius: [50, 70],
         label: { show: false },
         emphasis: {
            scale: false,
         },
         data,
      },
      {
         zlevel: 10,
         type: 'pie',
         center: ['30%', '50%'],
         radius: [50, 70],
         label: { show: false },
         itemStyle: {
            color: 'rgba(255, 255, 255, 1)',
            shadowBlur: 8,
         },
         blendMode: 'source-out',
         tooltip: {
            show: false,
         },
         silent: true,
         data: [10],
      },
      {
         zlevel: 9,
         type: 'pie',
         center: ['30%', '50%'],
         radius: [50, 70],
         label: { show: false },
         itemStyle: {
            color: 'rgba(255, 255, 255, 1)',
            shadowBlur: 8,
         },
         blendMode: 'source-out',
         tooltip: {
            show: false,
         },
         silent: true,
         data: [10],
      },
   ],
};