echarts 仪表盘渐变填充

最新推荐文章于 2024-04-15 08:00:00 发布

买买提阿拉灯神丁

最新推荐文章于 2024-04-15 08:00:00 发布

阅读量285

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/weixin_43902291/article/details/133950099

版权

echarts 仪表盘渐变填充

看了很多资料有的用两个表重叠有的各种改颜色。有的版本号低。话不多说看下面：

版本 “echarts”: “^5.4.3”,

效果

在这里插入图片描述


            var chartDom = document.getElementById('echarts_cpu');
            var myChart = echarts.init(chartDom);
            var option;
            const color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                    offset: 0,
                    color: 'rgba(255,136,136,1)',
                },
                {
                    offset: 1,
                    color: 'rgba(217,35,36,1)',
                },
            ]); 
            option = {
                series: [
                    {
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        center: ['50%', '100%'],
                        radius: '160%',
                        min: 0,
                        max: 1,
                        splitNumber: 8,
                        // 填充部分显示
                        progress: {  
                            show: true,
                            width: 18, 
                        },
                        itemStyle: { 
                          // 填充颜色
                            color: color, 
                        },
                        axisLine: {
                            lineStyle: {
                                width: 18,
                                 // 背景色
                                color: [[1, '#999']],
                            }
                        },
                        pointer: {
                            show: false,
                        },
                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            length: 10,
                            distance: 0,
                            lineStyle: {
                            //刻度色
                                color: color,
                                width: 4,
                            }
                        },
                        axisLabel: {
                            color: '#464646',
                            fontSize: 20,
                            distance: -50,
                            rotate: 'tangential',
                            formatter: function (value) {
                            }
                        },
                        title: {
                            offsetCenter: [0, '-10%'],
                            fontSize: 20
                        },
                        detail: {
                            fontSize: 24,
                            offsetCenter: [0, '-40%'],
                            valueAnimation: true,
                            formatter: function (value) {
                                return Math.round(value * 100) + '%';
                            },
                            color: 'red'
                        },
                        data: [
                            {
                                value: 0.7,
                                name: '平均占用'
                            }
                        ]
                    },
                ]
                
            };

            option && myChart.setOption(option);