echarts仪表盘的详细绘制

最新推荐文章于 2024-05-15 16:53:15 发布

学会沉淀呀

最新推荐文章于 2024-05-15 16:53:15 发布

阅读量1.2k

点赞数 1

分类专栏： echarts vue 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_45372418/article/details/128449131

版权

在这里插入图片描述

代码如下

var colorSet = {
   
			    color: 'rgba(2, 253, 253, 1)'
			};
var color1 = {
   
	            type: "linear",
	            x: 0,
	            y: 0,
	            x2: 1,
	            y2: 1,
	            colorStops: [
	                {
   
		                offset: 0,
		                color: "rgba(255,255,255,0.1)"
	                },
	                {
   
	                    offset: 1,
	                    color: "rgba(255,255,255,0.3)"
	                }
	            ],
	                global: false
	        }
var color2 = {
   
	            type: "linear",
	            x: 0,
	            y: 0,
	            x2: 1,
	            y2: 1,
	            colorStops: [
	                {
   
		                offset: 0,
		                color: "rgba(2, 253, 253,0.09)"
	                },
	                {
   
	                    offset: 1,
	                    color: "rgba(2, 253, 253,0.09)"
	                }
	            ],
	                global: false
	        }
var dataArr = 44
option = {
   
			    backgroundColor: '#0E1327',
			   // tooltip: {
   
			   //     formatter: "{a} <br/>{b} : {c}%"
			   // },

			    series: [
			       // 最外边的线
			    	  {
   
			            name: "内部进度条",
			            type: "gauge",
			            // center: ['20%', '50%'],
			            radius: '52%',

			            splitNumber: 10,
			            axisLine: {
   
			                lineStyle: {
   
			                    color: [
			                        [dataArr / 100, colorSet.color],
			                        [1, colorSet.color]
			                    ],
			                    width: 2
			                }
			            },
			            axisLabel: {
   
			                show: false,
			            },
			            axisTick: {
   
			                show: false,

			            },
			            splitLine: {
   
			                show: false,
			            },
			            itemStyle: {
   
			                color:"#ffffff"
			            },
			            detail: {
   
			            	show: false,
			                formatter: function(value) {
   
			                    if (value !== 0) {
   
			                        var num = Math.round(value ) ;