echarts儀表盤漸變色
阿新 • • 發佈:2022-03-30
效果如圖
// this.$echarts 為 echarts物件,該程式碼是使用在vue中的 let option4 = { series: [ { type: 'gauge', center: ['40%', '60%'], startAngle: 200, endAngle: -20, min: 0, max: 60, splitNumber:7, itemStyle: { color: new this.$echarts.graphic.LinearGradient(0,0,1,0,[ { offset: 0.1, color: "#FFC600" }, { offset:0.6, color: "#30D27C" }, { offset: 1, color: "#0B95FF" } ]), }, progress: { show:true, width: 5 }, pointer: { show: false }, axisLine: { lineStyle: { width: 30, color:'#FFAB91' } }, axisTick: { distance: -45, splitNumber: 9, lineStyle: { width: 1, color: new this.$echarts.graphic.LinearGradient(0,0,1,0,[ { offset: 0.1, color: "#FFC600" }, { offset: 0.6, color: "#30D27C" }, { offset: 1, color: "#0B95FF" } ]), } }, splitLine: { distance: -52, length: 11, lineStyle: { width: 2, color: new this.$echarts.graphic.LinearGradient(0,0,1,0,[ { offset: 0.1, color: "#FFC600" }, { offset: 0.6, color: "#30D27C" }, { offset: 1, color: "#0B95FF" } ]), } }, axisLabel: { distance: -20, color: new this.$echarts.graphic.LinearGradient(0,0,1,0,[ { offset: 0.1, color: "#FFC600" }, { offset: 0.6, color: "#30D27C" }, { offset: 1, color: "#0B95FF" } ]), fontSize: 0 }, anchor: { show: false }, title: { show: true }, // 圖中的34%是我另外新增的,把下面的show設定為true可以顯示自帶的數字 detail: { valueAnimation: true, width: '60%', lineHeight: 40, borderRadius: 8, offsetCenter: [0, '-15%'], fontSize: 10, fontWeight: 'bolder', formatter: '{value}', color: '#FFAB91', show:false }, data: [ { value: 100 } ] } ] };