echarts 实现仪盘表效果

2023-12-20 16:50:56

实现效果

代码

option = {
  color: '#3dc886',
        series: [
            {
                type: 'gauge',
                radius: '100%',
                min: 0,
                max: 100,
                progress: {
                    show: true,
                    width: 15
                },
                axisLine: {
                    lineStyle: {
                        width: 15
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel:{
                    fontSize: 9,
                    color: '#0c0c0c',
                    show: true,
                    formatter: function (val) {
                        //解决刻度的值为浮点数问题
                        return Math.ceil(val);
                    },

                },
                splitLine: {
                    length: 15,
                    lineStyle: {
                        width: 2,
                        color: '#70a0f1'
                    }
                },
                anchor: {
                    show: true,
                    showAbove: true,
                    size: 16,
                    itemStyle: {
                        borderWidth: 10
                    }
                },
                title: {
                    show: false
                },
                detail: {
                    valueAnimation: true,
                    fontSize: 30,
                    offsetCenter: [0, '70%']
                },
                itemStyle: {
                    color: '#70a0f1'
                },
                pointer: {
                    length: '70%',
                    width: 8,
                },

                data: [{
                    value: 40,
                    color: '#3dc886'
                }]
            }
        ]
};

查看效果地址：

将内容复制到在左边的参数栏

https://echarts.apache.org/examples/zh/editor.html?c=gauge

文章来源:https://blog.csdn.net/gdgztt/article/details/135086648
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。