echars 半圆环形图记录

最新推荐文章于 2025-05-14 17:12:21 发布

原创最新推荐文章于 2025-05-14 17:12:21 发布 · 943 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用流行的JavaScript数据可视化库echarts创建半圆环形图。内容包括配置项设置、数据绑定以及自定义样式等关键步骤，帮助读者实现个性化的数据展示需求。

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

 // 半圆环形图
var myChart = echarts.init(document.getElementById(id));

var option = {
        title: {
            text: ['测试'],
            show: true,
            x: "center",
            y: "bottom",
            textStyle: {
                color: '#a3a6b4',
                fontSize: 13,
                fontWeight: 'bold'
            },
            left: 'center',
            top: '90%',
            bottom: '69%',
            itemGap: 60,
        },
        tooltip: {
            show: false,
        },
        color: ['#B7DD7'],

        legend: {
            orient: 'vertical',
            x: 690,
            y: 120,
            data: ['www'],

        },
        series: [{
            type: 'pie',
            //起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。
            startAngle: 0,
            hoverAnimation: false,
            tooltip: {},
            radius: ["30%", "47%"],
            center: ['50%', '80%'],
            label: {
                normal: {
                    show: true,
                    position: 'center',
                    color: '#fff',
                    formatter: function(params) {
                        return params.value
                    },
                },
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: [{
                value: [50],
                itemStyle: {
                    normal: {
                        color: "rgba(80,150,224,0)"
                    }
                }
            },

            ]
        },
            {
                type: 'pie',
                startAngle: 0,
                hoverAnimation: false,
                radius: ["70%", "87%"],
                center: ['50%', '80%'],
                label: {
                    normal: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            fontSize: '10',
                            fontWeight: 'bold'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: [{//代表下半部分隐藏的半圆（不能为0）
                    value: 300,
                    itemStyle: {
                        normal: {
                            color: "rgba(1,218,220,0)"
                        }
                    }
                },
                    {//上半部分半圆所占比例
                        value: 200,
                        itemStyle: {
                            normal: {
                                color: "rgba(1,218,220,1)"
                            }
                        }

                    },
                    {//上半部分圆剩下的比例（不能为0）
                        value: 100,
                        itemStyle: {
                            normal: {
                                color: "rgba(1,218,220,0.1)"
                            }
                        }
                    },
                ]
            }
        ]
    };

 myChart.setOption(option);

如图所示