echarts实现半圆环形图

1,450 阅读1分钟

环形图.png

话不多说,上代码:

let percent = 0.5; //percent
    let current = 270 * percent; // 当前用量 = all * percent
    let all = 270; //彩色部分总大小,自定义,和最下方bottom的值一起决定环形图的角度
    const option = {
        
        series: [
            {
                type: "pie",
                label: {
                    show: false,
                },
                // itemStyle: {
                //
                // },
                center: ["50%", "50%"],
                radius: ["50%", "70%"],
                startAngle: 225, //起始角度,根据实际需要调节
                data: [
                    {
                        name: "用量",
                        value: current,
                        label: {
                            show: true,
                            position: "center",
                            formatter: (percent ? (percent * 100).toFixed(2) : 0) + "%",
                            textStyle: {
                                baseline: "bottom",
                                fontSize: 35,
                                color: "rgba(49, 49, 49, 1)",
                            },
                        },
                        labelLine: {
                            show: false,
                        },
                        itemStyle: {
                            
                            color: {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(232, 159, 71, 1)", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(245, 184, 70, 1)", // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },

                          
                        },
                    },
                    {
                        name: "rest", // 实际显示部分是总量-用量
                        value: all - current,
                        itemStyle: {
                            color: "rgba(248, 171, 44, 0.16)",
                        },
                    },
                    {
                        name: "bottom",
                        value: 90,//底部透明部分的颜色,看实际情况,如果需要的是半圆图,这个透明部分的value值就变成和all相同的值,以此类推,可以自己调节value的大小
                        itemStyle: {
                            color: "transparent",
                        },
                    },
                ],
            },
        ],
    };
    

以上基本就完成了一个半角的环形图,或者其他角度的都可以自己调,主要就是把不显示的部分换成透明色,然后百分比相对于不透明的一部分即半圆或者四分之三圆来,起始角度决定透明部分在上下左右即环形图缺口的方向