echarts基礎儀表盤-漸變色

直接上代碼

HTML:

<div echarts [options]="chartOption" [loading]="true" [ngClass]="{'ipadEchartH': !isPC, 'pcEchartH': isPC}"></div>

儀表盤配置：

declare var echarts: any;

  
initNormalOption() {
   var chartNormalOption = {
     tooltip: {
         formatter: "{a} <br/>{b} : {c}%"
     },
     toolbox: {
         feature: {
             restore: {},
             saveAsImage: {}
         }
     },
     series: [{
         name: '',
         type: 'gauge',
         radius:'100%',
         detail: {
            formatter: '{value}%',
            textStyle:{
              fontSize:14
            }
         },
         axisLine: {
			    show: true,
            lineStyle: {
              color: [
                [1,new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {
                  offset: 0.1,
                  color: "#FFC600"
                  },
                  {
                  offset: 0.6,
                  color: "#30D27C"
                  },
                  {
                  offset: 1,  
                  color: "#0B95FF"
                  }
                ])
              ]
            ]
          }
        },
        data: [
          {
            value: 87,
            name: '預算完成率'
          }
        ]
     }]
   };
   return chartNormalOption;
  }

初始化echarts，及動態賦值方式：

chartOption: any;

//初始化echarts
this.chartOption = this.initNormalOption();

//給echarts賦值
let sedata1 = [];
sedata1.push({value:80,name:'完成率'});

this.chartOption.series[0].data=sedata1;