echarts 饼图美化

阿阿源。

已于 2023-03-23 16:41:22 修改

阅读量771

点赞数

分类专栏： echarts 文章标签：前端 echarts

于 2023-03-23 16:29:18 首次发布

本文链接：https://blog.csdn.net/m0_60370017/article/details/129733544

版权

echarts 专栏收录该内容

4 篇文章

订阅专栏

文章展示了如何使用JavaScript处理数据，计算总和，并构建一个多层饼图。数据列表包含不同领域的值，如大米、互联网、医疗和建筑。通过过滤和映射操作，生成ECharts图表所需的选项配置，包括颜色、标题、提示信息以及系列数据。最终创建了一个内环展示详细数据，外环显示总体比例的饼图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例

示例数据
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,
      },
    ]
}

处理方式：等分