Echarts实战案例代码(33)：饼状图半圆实现方法

最新推荐文章于 2024-09-25 11:23:55 发布

原创最新推荐文章于 2024-09-25 11:23:55 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

echarts 专栏收录该内容

206 篇文章

订阅专栏

本文介绍了一种使用ECharts库实现半饼图的方法，通过将所有项作为180°上的饼图，并将所有相的和作为180°下的半圆不显示，巧妙地解决了半饼图的绘制问题。文章提供了具体代码示例，包括数据准备、颜色设置、ECharts配置选项等，同时指出了在实际场景中可能遇到的问题及解决方案。

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

在这里插入图片描述
解决方案：按照饼图的实际写法，将所有项作为180°上的饼图，所有相的和作为180°下的半圆不显示即可。

let list = [{
    name: "张三",
    value: "9"
}, {
    name: "李四",
    value: "50"
}, {
    name: "王五",
    value: "30"
}, {
    name: "马六",
    value: "9"
}, {
    name: "__other",
    value: "0"
}]

let sum = 0;
list.map((item, index) => {
    sum += parseInt(item.value)
})

list[list.length - 1].value = sum
let colorList = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', "rgba(0,0,0,0)"]

Echarts option:

option = {
    tooltip: {},
    color: colorList,
    series: [{
        name: "",
        type: "pie",
        hoverAnimation: false,
        startAngle: -180,
        radius: ["60%", "100%"],
        center: ["50%", "70%"],
        label: {
            normal: {
                show: true,
                position: "inner", //显示在扇形上
                formatter: "{b}", //显示内容
                textStyle: {
                    color: "white", // 改变标示文字的颜色
                    fontSize: 12, //文字大小
                    fontWeight: "bold",
                },
            },
        },
        labelLine: {
            normal: {
                show: false,
            },
        },
        data: list,
        itemStyle: {
            emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
            },
        },
    }, ],
}