var gaugeChart = echarts.init(document.getElementById('gaugeChart'));
? ? ? ? let inputValue = parseInt(Math.random() * 100);
? ? ? ? gaugeChart.setOption({
? ? tooltip: {
? ? ? ? formatter: "{a} <br/>椅野 : {c}%"
? ? },
? ? series: [{
? ? ? ? name: '1刻度',
? ? ? ? type: 'gauge',
? ? ? ? radius: '35%',
? ? ? ? center: ['50%', '50%'],
? ? ? ? startAngle: 220,
? ? ? ? endAngle: -40,
? ? ? ? axisLine: {
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? width:2,
? ? ? ? ? ? ? ? color:[[1,'#8c929d']]
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? splitLine: {
? ? ? ? ? ? length: 0,
? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? ? ? color:'#8c929d',
? ? ? ? ? ? ? ? width:2
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? axisLabel: {
? ? ? ? ? ? show:false
? ? ? ? },
? ? ? ? axisTick:{
? ? ? ? ? ? show:false
? ? ? ? },
? ? ? ? detail:{
? ? ? ? ? ? show:false
? ? ? ? },
? ? ? ? pointer:{
? ? ? ? ? ? show:false
? ? ? ? }
? ? },{
? ? ? ? name: '2刻度',
? ? ? ? type: 'gauge',
? ? ? ? radius: '45%',
? ? ? ? center: ['50%', '50%'],
? ? ? ? startAngle: 212,
? ? ? ? endAngle: -32,
? ? ? ? axisLine: {
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? width:2,
? ? ? ? ? ? ? ? color:[[1,'#8c929d']]
? ? ? ? ? ? },
? ? ? ? },
? ? ? ? splitLine: {
? ? ? ? ? ? length: 0,
? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? ? ? color:'#8c929d',
? ? ? ? ? ? ? ? width:2
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? axisLabel: {
? ? ? ? ? ? show:false
? ? ? ? },
? ? ? ? axisTick:{
? ? ? ? ? ? show:false
? ? ? ? },
? ? ? ? detail:{
? ? ? ? ? ? show:false
? ? ? ? },
? ? ? ? pointer:{
? ? ? ? ? ? show:false
? ? ? ? }
? ? },{
? ? ? ? name: '3刻度',
? ? ? ? type: 'gauge',//儀表盤
? ? ? ? radius: '55%',//儀表盤半徑
? ? ? ? center: ['50%', '50%'],//儀表盤位置
? ? ? ? startAngle:208,//起始角度
? ? ? ? endAngle: -28,//結(jié)束角度
? ? ? ? data: [{value: inputValue, name: ''}],
? ? ? ? axisLine: {
? ? ? ? ? ? lineStyle: {//儀表盤軸線相關(guān)配置恤浪。
? ? ? ? ? ? ? ? width:2,
? ? ? ? ? ? ? ? color:[[1,'#8c929d']]
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? splitLine: {//分隔線樣式相關(guān)
? ? ? ? ? ? length: 40,//分割線的長度
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? width:1,
? ? ? ? ? ? ? ? color:'#b0b3b8'
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? axisLabel: {//大刻度標(biāo)簽崇众。
? ? ? ? ? ? distance: -70,//數(shù)字刻度距離
? ? ? ? ? ? textStyle: {//數(shù)字刻度樣式
? ? ? ? ? ? ? ? ? ? color: '#fff',
? ? ? ? ? ? ? ? ? ? fontSize:18,
? ? ? ? ? ? ? ? },
? ? ? ? ? ? data: [{value: inputValue, name: ''}],
? ? ? ? ? ? formatter:function(param){
? ? ? ? ? ? ? ? if ((param % 10)==0) {
? ? ? ? ? ? ? ? ? ? return param
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? axisTick:{//小刻度相關(guān)
? ? ? ? ? ? show:false
? ? ? ? },
? ? ? ? detail: {//儀表盤詳情數(shù)據(jù)相關(guān)
? ? ? ? ? ? textStyle: {
? ? ? ? ? ? ? ? ? ? color: '#5bdbff',
? ? ? ? ? ? ? ? ? ? fontSize:46,
? ? ? ? ? ? ? ? ? ? offsetCenter: [0,'80%']
? ? ? ? ? ? ? }
? ? ? ? },
? ? ? ? itemStyle:{//指針樣式
? ? ? ? ? ? normal:{
? ? ? ? ? ? ? ? color:'#1ed133'
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? pointer:{//指針長度與寬度
? ? ? ? ? ? width:8,
? ? ? ? ? ? length:'85%'
? ? ? ? },
? ? ? ? data: [{
? ? ? ? ? ? value:inputValue
? ? ? ? }]
? ? },{
? ? ? ? name: '4線',
? ? ? ? type: 'gauge',
? ? ? ? radius: '100%',
? ? ? ? center: ['50%', '50%'],
? ? ? ? startAngle: 190,
? ? ? ? endAngle: -10,
? ? ? ? axisLine: {
? ? ? ? ? ? lineStyle: {
? ? ? ? ? ? ? ? width:2,
? ? ? ? ? ? ? ? color:[[1,'#3d80f5']]
? ? ? ? ? ? },
? ? ? ? },
? ? ? ? splitLine: {
? ? ? ? ? ? length: -6,
? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? ? ? opacity:0
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? axisLabel: {
? ? ? ? ? ? show:false
? ? ? ? },
? ? ? ? axisTick:{
? ? ? ? ? ? splitNumber:1,
? ? ? ? ? ? lineStyle:{
? ? ? ? ? ? ? ? opacity:0,
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? detail:{
? ? ? ? ? ? show:false
? ? ? ? },
? ? ? ? pointer:{
? ? ? ? ? ? show:false
? ? ? ? }
? ? }]
})
————————————————
版權(quán)聲明：本文為CSDN博主「大小都是愁」的原創(chuàng)文章镶苞，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明颁井。
原文鏈接：https://blog.csdn.net/wangjiaohome/article/details/82667291
