ECharts 使用series.axisLine. lineStyle.color设置仪表盘轴线颜色

缺乏、安全感 2023-10-05 11:02 63阅读 0赞

#### 1 使用详解 ####

**series.axisLine. lineStyle.color**

说明：设置轴线颜色。仪表盘的轴线可以被分成不同颜色的多段。每段的结束位置和颜色可以通过一个数组来表示。

默认值：\[\[0.2, '\#91c7ae'\], \[0.8, '\#63869e'\], \[1, '\#c23531'\]\]。

参数类型：Array\[\]\[\]。

#### 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'));
     
            // 指定图表的配置项和数据
           option = {
    			tooltip: {
    				formatter: '{a} <br/>{b} : {c}%'
    			},
    			series: [
    				{
    					name: '业务指标',
    					type: 'gauge',
    					detail: {formatter: '{value}%'},
    					data: [{value: 50, name: '完成率'}],
    					axisLine: {            // 坐标轴线  
    						lineStyle: {       // 属性lineStyle控制线条样式  
    							 color: [[0.2, '#c23531'], [0.8, '#63869e'], [1, '#91c7ae']]
    						}  
    					}, 
    				}
    			]
    		};
    
     
            // 使用刚指定的配置项和数据显示图表。
            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/20201002093332765.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/20201002093609351.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70