1、效果图

2、代码

createTenantChartOne(){var myChart1 = this.$echarts.init(document.getElementById('tenant-chart-1'));var dataArr = 82;var title = '仪表盘';let option = {graphic: {type: 'text',left: 'center',top: '85%',style: {text: title,textAlign: 'center',//居中对齐fill: '#999',//填充色fontSize: 14,fontWeight: 400,fontFamily: "Source Han Sans CN",},},series: [{name: "外部间隔条形",type: "gauge",radius: '113%',z: 5,splitNumber: 20,startAngle: 225,endAngle: -45,axisLine: {lineStyle: {opacity: 0}},axisLabel: {show: false,},axisTick: {show: true,length: 4,splitNumber: 1,lineStyle: {color: '#F1F1F1',width: 1}},splitLine: {show: false},detail: {show: false},title: {show: false,}},{name: "外部线",type: "gauge",radius: '85%', // 动态startAngle: 225,endAngle: -45,axisLine: {lineStyle: {color: [[1, '#F1F1F1'] // 动态],width: 1}},axisLabel: {show: false,},axisTick: {show: false,},splitLine: {show: false,},detail: {show: false},title: { //标题show: false,}},{name: "间隔条形",type: "gauge",radius: '104%',z: 4,splitNumber: 20,startAngle: 225,endAngle: -45,axisLine: {lineStyle: {opacity: 0}},axisLabel: {show: false,},axisTick: {show: true,length: 12,splitNumber: 1,lineStyle: {color: '#fff',width: 1}},splitLine: {show: false},detail: {show: false},title: {show: false,}},{name: "数据",type: 'gauge',radius: '78%',z: 3,startAngle: 225,endAngle: -45,max: 100,// 仪表盘的线，颜色值为一个数组axisLine: {show: true,lineStyle: {width: 12,opacity: 1,color: [[dataArr / 100,{x: 0,y: 0,x1: 1,y1: 1,colorStops: [{offset: 0,color: 'rgba(65, 249, 255, 0.5059)',},{offset: 1,color: 'rgba(19, 124, 255, 1)',},],},],[1, '#F4F4F4'],],},},tooltip: {show: false},axisLabel: {show: false,},axisTick: {show: false,},splitLine: {show: false},detail: {show: true,fontWeight: 'bold',offsetCenter: [0, 0],//水平、垂直偏移formatter: (val) => [`{a|${dataArr}%}`].join(''),rich: {a: {fontSize: 20,lineHeight: 38,fontFamily: 'Source Han Sans',fontWeight: 500,color: '#1479EA',},},},pointer: {show: false,width: 3,},data: [{name: '',value: dataArr}]},{type: 'gauge',radius: '62%',z: 3,startAngle: 225,endAngle: -45,max: 100,axisLine: {show: false,},splitLine: {show: false},axisTick: {show: false},axisLabel: {show: false},splitLabel: {show: false},pointer: {icon: 'circle', // 箭头图标length: '5%',width: 14,height: 14,offsetCenter: [0, '-88%'], // 箭头位置itemStyle: {color: [[dataArr / 100,{x: 0,y: 0,x1: 1,y1: 1,colorStops: [{offset: 0,color: 'rgba(65, 249, 255, 0.5059)',},{offset: 1,color: 'rgba(19, 124, 255, 1)',},],},],[1, '#F4F4F4'],],shadowBlur: 10},},detail: {show: false,},title: {show: false},data: [{value: dataArr,}]},{name: '内圆环',type: 'pie',radius: ['51%', '49%'],hoverAnimation: false,tooltip: {show: false},cursor: "default",labelLine: {"normal": {"show": false}},itemStyle: {color: 'rgba(0, 0, 0, 0.01)'},animation: false,data: [1]},]}myChart1.setOption(option);setTimeout(function () {window.addEventListener("resize",()=>{myChart1.resize()})}, 200)
},