echarts 环形图

效果图:

代码:

const deviceTypeSumData =[
  { value: 60, name: '防排', itemStyle: { color: '#18c7fe' } },
  { value: 30, name: '气体', itemStyle: { color: '#f78a8a' } },
  { value: 150, name: '报警', itemStyle: { color: '#f2d43d' } },
  { value: 36, name: '烟感', itemStyle: { color: '#ff9ed1' } },
  { value: 66, name: '电气', itemStyle: { color: '#cd9dfe' } },
  { value: 0, name: '充电桩', itemStyle: { color: '#c0c0c0' } },
  { value: 214, name: '视频', itemStyle: { color: '#ff9d19' } },
  { value: 168, name: '消防', itemStyle: { color: '#1fd8ab' } },
  { value: 30, name: '其他', itemStyle: { color: '#18c7fe' } }
];

option = {
    title: [
      {
        text: `设备总数 ${deviceTypeSumData.reduce((acc, cur) => acc + cur.value, 0)}`,
        //subtext: '设备总数',
        left: 'center', // 将 x 改成 left
        top: 'center', // 将 y 改成 top
        textStyle: {
          fontSize: 14,
          fontWeight: 'bold',
          color: '#fff'
        }
      }
    ],
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      top: 'middle',
      right: '5%',
      orient: 'vertical',
      icon: 'circle',
      textStyle: {
        color: '#fff' // 设置图例文字颜色为白色
      },
      formatter: function (name) {
        const seriesData = deviceTypeSumData;
        const total = seriesData.reduce((acc, cur) => acc + cur.value, 0);
        const dataIndex = seriesData.findIndex(item => item.name === name);
        const value = seriesData[dataIndex].value;
        // 添加条件判断，避免除法错误
        const percentage = total !== 0 ? ((value / total) * 100).toFixed(0) : 0;
        return `${name} ${value} ${percentage}%`;
      }
    },
    series: [
      {
        name: '设备类型',
        type: 'pie',
        center: ['50%', '50%'], // 设置图表位置
        radius: ['42%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 16,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: deviceTypeSumData
      }
    ]
  };;