Unable to pass values to labels in gauge chart

[srivignes]

I've created a gauge chart in my html page and added some labels to it, but couldn't pass data to those labels. Currently , I've hard-coded the values for those labels

One-line summary [问题简述]

So help me passing data to the labels marked in the screenshot of the chart added below

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 3.0
• Browser version [浏览器类型和版本]: Google Chrome Version 56.0.2924.87
• OS Version [操作系统类型和版本]: Windows 7 Professional Service Pack 1

Expected behaviour [期望结果]

ECharts option [ECharts配置项]

option = {{
	  tooltip: {
	    formatter: "{a} <br/>{b} : {c}%"
	  },
	  toolbox: {
	    show: true,
	    feature: {
	      restore: {
	        show: true,
	        title: "Refresh"
	      },
	      saveAsImage: {
	        show: true,
	        title: "Save Image"
	      }
	    }
	  },
	  series: [{
	    name: 'Performance',
	    type: 'gauge',
	    center: ['50%', '50%'],
	    startAngle: 140,
	    endAngle: -140,
	    min: 0,
	    max: 100,
	    precision: 0,
	    splitNumber: 10,
	    axisLine: {
	      show: true,
	      lineStyle: {
	        color: [
	          [0.2, '#CBEAE3'], 
	          [0.4, '#26B99A'], 
	          [1, '#087E65']
	        ],
	        width: 30
	      }
	    },
	    axisTick: {
	      show: true,
	      splitNumber: 5,
	      length: 8,
	      lineStyle: {
	        color: '#eee',
	        width: 1,
	        type: 'solid'
	      }
	    },
	    axisLabel: {
	      show: true,
	      formatter: function(v) {
	          switch (v + '') {
	          case '0':
	              return '0';//1955
	          case '20':
	              return '20';//3910
	          case '40':
	              return '40';//5865
	          case '60':
	              return '60';//7820
	          case '80':
	              return '80';   
	          default:
	              return '';
	          }
	      },
	      textStyle: {
	        color: '#333'
	      }
	    },
	    splitLine: {
	      show: true,
	      length: 30,
	      lineStyle: {
	        color: '#eee',
	        width: 2,
	        type: 'solid'
	      }
	    },
	    pointer: {
	      length: '80%',
	      width: 8,
	      color: 'auto'
	    },
	    title: {
	      show: true,
	      offsetCenter: ['-65%', -10],
	      textStyle: {
	        color: '#333',
	        fontSize: 15
	      }
	    },
	    detail: {
	      show: true,
	      backgroundColor: 'rgba(0,0,0,0)',
	      borderWidth: 0,
	      borderColor: '#ccc',
	      width: 100,
	      height: 40,
	      offsetCenter: ['-60%', 10],
	      formatter: '{value}%',
	      textStyle: {
	        color: 'auto',
	        fontSize: 30
	      }
	    },
	    data: [{
	      value: memory_percentage,
	      name: 'Used'
	    }]
	  }]
	});
}
}

Other comments [其他信息]

[100pah]

Maybe using graphic component is an option. Check this sample.

[srivignes]

Thanks a lot @100pah . It works. Appreciate your help!