echarts 饼图美化

示例

示例数据
let dataList = [
    { name: '大米', value: 3051 },
    { name: '互联网', value: 4256 },
    { name: '医疗', value: 687 },
    { name: '建筑', value: 1654 },
    ...
]
 
数据处理
let total = 0;
dataList && dataList.filter((item) => {
    total += parseInt(item.value)
})
let data = []
dataList && dataList.map((item, index) => {
    let option1 = {
        name: "",
        value: total / 100,
        legend: false,
        tooltip: {
            show: false,
        },
        itemStyle: {
            color: "rgba(0,0,0,0)"
        }
    }
    let option = {
      ...item
    }
    data.push(option, option1)
})
 
option示例
let option = {
    color: ['#00FFA2', '#75CCFF', '#18ADFB', '#0081FF', ...],
    title: {
      text: dataList[0].value,
      subtext: dataList[0].name,
      x: "49%",
      top: "45%",
      subtextStyle: {
        fontSize: 22,
        color: "#9FA5AD"
      },
      textStyle: {
        fontSize: 49,
        fontWeight: "Bold",
        color: "#fff"
      },
      textAlign: "center"
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      show: false
    },
    series: [
      {
        type: "pie",
        radius: ["50%", "56%"],
        center: ["50%", "50%"],
        z: 11,
        itemStyle: {
          normal: {
            borderWidth: 8,
            borderColor: "rgba(0, 0, 0, 0)",
          },
        },
        // v5和v4版本差异，高亮偏移量设置
        emphasis: {
          disabled: false,
          scale: true,
          scaleSize: 15,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      },
      {
        type: "pie",
        radius: ["40%", "45%"],
        center: ["50%", "50%"],
        z: -1,
        legendHoverLink: false,
        selectedMode: false,
        hoverAnimation: false,
        cursor: 'auto',
        tooltip: {
          show: false
        },
        title: {
          show: false
        },
        itemStyle: {
          normal: {
            color: '#272C38',
            borderWidth: 8,
            borderColor: "rgba(0, 0, 0, 0)",
          },
        },
        legend: {
          show: true,
        },
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: data,
      },
    ]
}复制

处理方式：等分