1. 程式人生 > 其它 >echarts儀表盤漸變色

echarts儀表盤漸變色

效果如圖

 

 

    // 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 } ] } ] };