Echarts在线免费图表

 
            
  const colorList = [
    '#FF386B',
    '',
    '#1FC6FF',
    '',
    '#1A4E5E',
    '',
    '#F5E74F',
    ''
  ]
  const colorList1 = [
    '#431E3B',
    '',
    '#0B405D',
    '',
    '#59FFFF',
    '',
    '#404832',
    ''
  ]
  let total = 0
  let dataList = []
  const moduleContent = {
    极高风险: 32,
    高风险: 16,
    中风险: 20,
    低风险: 32
   }
  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,
      labelLine: {
        show: false,
        lineStyle: {
          color: 'transparent'
        }
      },
      itemStyle: {
        color: 'transparent'
      }
    })
  })

  option = {
    backgroundColor: '#041125',
    legend:{
      show:true,
      left:"5%",
      top:"40%",
      // formatter(name) { // 该函数用于设置图例显示后的百分比quanmei
      //    var data = option.series[0].data;
      //       var total = 0;
      //       var tarValue;
      //       for (var i = 0; i < data.length; i++) {
      //         total += data[i].value;
      //         if (data[i].name == name) {
      //           tarValue = data[i].value;
      //         }
      //       }
      //       var v = tarValue;
      //       var p = Math.round(((tarValue / total) * 100));
      //       return `${name}  ${v}人(${p}%)`;
      // },
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '50%'],
        center: ['70%', '50%'],
        hoverAnimation: false,
        startAngle: 180,
        minAngle: 5,
        emphasis: {
          scale: true,
          scaleSize: 15,
          focus: 'series',
          blurScope: 'coordinateSystem',
          label: {
            show: true
          }
        },
        label: {
          show: false,
          position: 'center',
          formatter: '{percentage|{d}%}'+ '\n\r' + '{name|{b}}',
          rich: {
            percentage:{
              fontSize: 26,
              fontFamily : "微软雅黑",
              color:'#ffffff'
            },
            name: {
              fontFamily : "微软雅黑",
              fontSize: 16,
              color:'#B4C0CC',
              lineHeight:30,
            },
          }
        },
       
        itemStyle: {
          normal: {
            color: function (params) {
              return colorList[params.dataIndex]
            }
          }
        },
        data: data1,
        z: 1
      },
      {
        type: 'pie',
        radius: ['25%', '35%'],
        center: ['70%', '50%'],
        hoverAnimation: false,
        startAngle: 180,
        minAngle: 5,
        emphasis: {
          scale: false,
          scaleSize: 15,
          focus: 'series',
          blurScope: 'coordinateSystem'
        },
        label: {
          show: false
        },
        itemStyle: {
          normal: {
            color: function (params) {
              return colorList1[params.dataIndex]
            }
          }
        },
        data: data1,
        z: 2
      },
      {
        type: 'custom',
        coordinateSystem: 'none',
        silent: true,
        data: [0],
        renderItem(params, api) {
          const center = {
            x: api.getWidth() * 0.70,
            y: api.getHeight() / 2
          };
          //环形图半径
          const r = Math.min(api.getWidth(), api.getHeight()) / 2;
          const rBig = r * 0.6;
          //环上的扇形
          const sectorSize = 60 //扇形长度（弧度）
          const sectorInterval = 30 //扇形与扇形之间的间隔
          const BigStartAngle = 310 //大扇形起始角度
          const startAngle = ((3 * (sectorInterval + sectorSize) + BigStartAngle) * Math.PI) / 180
          const endAngle = startAngle + (sectorSize * Math.PI) / 180
          const smallStartAngle = (Math.PI / 180) * (280  + 2 * (sectorSize + sectorInterval))
          const smallEndAngle = smallStartAngle + (sectorSize * Math.PI) / 180
          const bigSector = [{
            type: 'sector',
            shape: {
              cx: center.x,
              cy: center.y,
              r: rBig+13,
              r0: rBig+7,
              startAngle,
              endAngle
            },
            style: {
              fill: '#041125',
              lineWidth: 2
            }
          }];
          const bigSector1 = [{
            type: 'sector',
            shape: {
              cx: center.x,
              cy: center.y,
              r: rBig+32,
              r0: rBig+28,
              startAngle: smallStartAngle,
              endAngle: smallEndAngle
            },
            style: {
              fill: '#19AAC0',
              lineWidth: 2
            }
          }];
          return {
              type: 'group',
              children: [
                {
                  type: 'arc',
                  shape: {
                    cx: center.x,
                    cy: center.y,
                    r: rBig+10
                  },
                  style: {
                    fill: 'transparent',
                    stroke: '#09334E',
                    lineWidth: 5
                  }
                },
                ...bigSector,
                {
                  type: 'arc',
                  shape: {
                    cx: center.x,
                    cy: center.y,
                    r: rBig+30
                  },
                  style: {
                    fill: 'transparent',
                    stroke: '#09334E',
                    lineWidth: 5
                  }
                },
                ...bigSector1
              ]
            }
        }
      }
    ]
  }