Echarts 实现仪表盘轴线颜色扇形渐变

亦凉 2023-10-05 11:29 72阅读 0赞

### 1 使用详解 ###

**series.axisLine. lineStyle.color**

说明：设置仪表轴线颜色。

#### 2 原始效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

#### 3 实现代码（仪表板轴线颜色扇形渐变） ####

<body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
     
            // 指定图表的配置项和数据
            var option = {
    			tooltip: {
    				formatter: '{a} <br/>{b} : {c}%'
    			},
    			series: [
    				{
    					name: '业务指标',
    					type: 'gauge',
    					detail: {formatter: '{value}%'},
    					data: [{value: 1, name: '完成率'}],
    					axisLine: {            // 坐标轴线  
    						lineStyle: {       // 属性lineStyle控制线条样式  
    							 color: [
                                    [0.1, 'red'],
                                    [0.3, new echarts.graphic.LinearGradient(
                                        0, 1, 0, 0,
                                        [{
                                            offset: 0,
                                            color: 'red'
                                        }, {
                                            offset: 0.8,
                                            color: 'rgb(235,205,6)'
                                        }]
                                    )],
    								[0.7, 'rgb(235,205,6)'],
                                    [0.9, new echarts.graphic.LinearGradient(
                                        0, 1, 0, 0,
                                        [{
                                            offset: 0,
                                            color: 'rgb(13,211,97)'
                                        }, {
                                            offset: 0.6,
                                            color: 'rgb(235,205,6)'
                                        }]
                                    )],
                                    [1, 'rgb(13,211,97)']
                                ],
    						}  
    					}, 
    				}
    			]
    		};
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>

#### 4 最终效果图（仪表板轴线颜色扇形渐变） ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201011100321576.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020101110351539.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70