ECharts 史上最复杂的仪表盘

爱被打了一巴掌 2023-10-05 11:29 7阅读 0赞

#### 1 前言 ####

国庆之前项目组长让我调查一下下面这个仪表盘怎么实现，于是乎整个国庆一有时间就去网上找有没有类似的仪表盘实例。

![20201011101740332.png][]

终于有一天我找到类似的实例，网址如下：

[https://gallery.echartsjs.com/editor.html?c=xGhlqVU7j2][https_gallery.echartsjs.com_editor.html_c_xGhlqVU7j2]

以上仪表盘最难的有以下几点：

（1）轴线颜色是类似扇形渐变，需要用线性渐变和不透明颜色组合才能实现。

（2）由3个仪表盘组成，第一个仪表盘实现最外面的线条，第二个仪表盘实现里面的圆形虚线，剩下的内容都是第三个仪表盘的。

（3）第二个仪表盘的圆形虚线，需要设置开始角度为0，结束角度为359.999。

#### 2 实现代码 ####

<body>
        
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('main'));
    		var colors=["#e00005","#e6a900","#00c05a"];
    		var fontColor="#0089fa";
    		var data=[70,2];
    		var fontSize=13;
    		var percent=data[0]/(data[0]+data[1])*100;
           	var option = {
    			backgroundColor:"#05233b",
    			series: [
    				{
    					type: 'gauge',
    					name: '外层辅助',
    					radius: '86%',
    					pointer: {
    						show: false
    					},
    					detail: {
    						show: true,
    						offsetCenter: [-30,'90%'],
    						fontSize:15,
    						color: '#fff'
    					},
    					data: [{
    						value: 70,name:"在线："
    					}],
    					title: {
    						show: true,
    						offsetCenter: [-60, '90%'],
    						textStyle: {
    							color: fontColor,
    						}
    					},
    					axisLine: {
    						show: true,
    						lineStyle: {
    							color: [
    								[1, '#0a80d5'],
    							],
    							width: 5,
    							opacity: 1
    						}
    					},
    					axisTick: {
    						show: false
    					},
    					splitLine: {
    						show: true,
    						length: 20,
    						lineStyle: {
    							color: '#051932',
    							width: 0,
    							type: 'solid',
    						},
    					},
    					axisLabel: {
    						show: false
    					}
    				},
    				{
    					name: '最内层线',
    					type: 'gauge',
    					radius: '30%',
    					center: ['50%', '50%'],
    					startAngle: 0,
    					endAngle: 359.999,
    					axisLine: {
    						show: false,
    						lineStyle: {
    							opacity: 0,
    						}
    					},
    					splitLine: {
    						show: false,
    						lineStyle: {
    							opacity: 0
    						}
    					},
    					axisLabel: {
    						show: false
    					},
    					axisTick: {
    						length: 2,
    						lineStyle: {
    							color: fontColor,
    							width: 2,
    							type: 'solid'
    						}
    					},
    					detail: {
    						show: true,
    						offsetCenter: [80,'258%'],
    						fontSize:15,
    						color: '#fff'
    					},
    					data: [{
    						value: data[1],name:"离线："
    					}],
    					title: {
    						show: true,
    						offsetCenter: [50, '258%'],
    						textStyle: {
    							color: fontColor,
    						}
    					},
    					pointer: {
    						show: false
    					}
    				},
    				{
    					name: '内层数据刻度',
    					type: 'gauge', 
    					radius: '79%',
    					min: 0,
    					max: 100,
    					center: ['50%', '50%'],
    					axisLine: {
    						lineStyle: {
    							width: 30,
    							color: [
    								[0.1, colors[0]],
    								[0.3, new echarts.graphic.LinearGradient(
    									0, 1, 0, 0,
    									[{
    										offset: 0,
    										color: colors[0]
    									}, {
    										offset: 0.8,
    										color: colors[1]
    									}]
    								)],
    								[0.7, colors[1]],
    								[0.9, new echarts.graphic.LinearGradient(
    									0, 1, 0, 0,
    									[{
    										offset: 0,
    										color: colors[2]
    									}, {
    										offset: 0.6,
    										color: colors[1]
    									}]
    								)],
    								[1, colors[2]]
    							],
    						}
    					},
    					splitLine: {
    						length: 15,
    						lineStyle: {
    							width: 2,
    							color: '#ffffff'
    						}
    					},
    					axisTick: {
    						lineStyle: {
    							width: 1,
    							color: '#ffffff'
    						}
    					},
    					axisLabel: {
    						color: fontColor,
    						distance: 20,
    						fontSize: fontSize,
    					},
    					detail: {
    						show: true,
    						offsetCenter: ['0','60%'],
    						color: '#fff',
    						formatter: function (value) {
    							return value.toFixed(1)+"%";
    						},
    						fontSize:19
    					},
    					itemStyle: {
    						normal: {
    							color: 'rgb(0,191,255)'
    						}
    					},
    					data: [{
    						value: percent,name:"在线率"
    					}],
    					silent: false,
    					title:{
    						offsetCenter : [0, '75%'],//设置在线率位置
    						color:fontColor,
    					}
    				},
    			]
    		};
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        </script>
    </body>

#### 3 最终效果图 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70][]

[20201011101740332.png]: https://img-blog.csdnimg.cn/20201011101740332.png
[https_gallery.echartsjs.com_editor.html_c_xGhlqVU7j2]: https://gallery.echartsjs.com/editor.html?c=xGhlqVU7j2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201011115139140.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4OTc0NjM4,size_16,color_FFFFFF,t_70