I am using Echarts Baidu - Gauge charts. In the result, I am getting 30 out of 100 mark. I need to change that to 30 out of 50 mark. This is my code.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- Prepare a Dom with size (width and height) for ECharts -->
<div id="main" style="height:400px"></div>
<!-- ECharts import -->
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
// configure for module loader
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// use
require(
[
'echarts',
'echarts/chart/gauge'
],
function (ec) {
// Initialize after dom ready
var myChart = ec.init(document.getElementById('main'));
option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
name:'????',
type:'gauge',
startAngle: 180,
endAngle: 0,
center : ['50%', '90%'], // ??????
radius : 320,
axisLine: { // ????
lineStyle: { // ??lineStyle??????
width: 200
}
},
axisTick: { // ??????
splitNumber: 10, // ??split?????
length :12, // ??length????
},
axisLabel: { // ???????,??axis.axisLabel
formatter: function(v){
switch (v+''){
case '10': return 'R';
case '50': return 'A';
case '90': return 'G';
default: return '';
}
},
textStyle: { // ??????????????,??TEXTSTYLE
color: '#fff',
fontSize: 15,
fontWeight: 'bolder'
}
},
pointer: {
width:50,
length: '90%',
color: 'rgba(255, 255, 255, 0.8)'
},
title : {
show : true,
offsetCenter: [0, '-60%'], // x, y,??px
textStyle: { // ??????????????,??TEXTSTYLE
color: '#fff',
fontSize: 30
}
},
detail : {
show : true,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 0,
borderColor: '#ccc',
width: 100,
height: 40,
offsetCenter: [0, -40], // x, y,??px
formatter:'{value}',
textStyle: { // ??????????????,??TEXTSTYLE
fontSize : 50
}
},
data:[{value: 30, name: 'Your Score'}]
}
]
};
// Load data into the ECharts instance
myChart.setOption(option);
}
);
</script>
I am new to JS. I tried to look at their docs, but most of the docs is written in Chinese. Please help me with that. Thanks in advance.
You only need to add
maxattribute toseries:The English version document is available at http://echarts.baidu.com/doc/doc-en.html#SeriesGauge .