eCharts (v3) has captured my attention and am impressed. Lets create a gauge chart and also understand the code.
Note: CDN for english version of echarts version 3 can be found here :
https://cdnjs.com/libraries/echarts
HTML:
<!doctype html> <html> <head> <title>Charts Gauge Example</title> </head> <body> <div id="chart" style="width: 100vw; height: 100vh;"> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts-en.min.js"></script> <script src="app.js"></script> </body> </html>
The js code (app.js):
var mychart = document.getElementById('chart');
gChart = echarts.init(mychart);
var option = {
tooltip : {
formatter: "{a} <br/>{b} : {c}%"
},
toolbox: {
show : true,
feature : {
restore : {show: true},
saveAsImage : {show: true}
}
},
series : [
{
title:{
show:true,
offsetCenter:[0,-230],
color:'#888',
fontWeight:'bold',
fontSize:24
},
clockwise:true,
startAngle:180,
endAngle:0,
pointer:{show:true},
axisTick:{show:true},
splitLine:{show:false},
name:'Business Indicators',
type:'gauge',
detail : {
offsetCenter:[5,-40],
formatter:'{value}%'
},
data:[{value: 75, name: 'Rate'}]
}]
};
//Add this to have the data changed every two seconds
setInterval(function () {
option.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
gChart.setOption(option, true);
},2000);
- Here first we are setting variable “mychart” to DOM element with ID = “chart”
- At line 2 of the JS we initialize an echart at the DOM ID (“chart”)
- Now we set the options which will be passed to the initialized echart to render on screen
Decoding the “options”:
- In the example , options has the following attributes
- series
- tooltip
- toolbox
Series:
Here we define the
- name of chart – ‘Business Indicators’ in the example
- type of chart – ‘Gauge’
- Title (“Rate” in this example) takes its value from data.name and the styling is driven by series.title properties
- startAngle is 180 and endAngle is 0 (see pic) when property clockwise is set to true (default)
- series.data.value is displayed with style and positioning defined by series.details
- pointer and axis ticks have visbility set to true.
Tooltip:
- Here we define the content to be seen when hovering over the pointer.
- In line 33 of JS code ,
- {a} represents name of the chart, defined in property series.name (“Businesss Indicators”)
- {b} represents data.name
- {c} represents data.value
Note : There are more options to customize ( described in API documentation of echarts)
Tool Box:
- Here two features are defined to be visible -> Restore and Download as Image.
- There are other options that can be configured
Heres the output:
Just by changing the startAngle and/or endAngle you can change the shape of the dial.
Ex, set startAngle to 225 and endAngle to -45 and here’s what you get:
How to change color gauge?
Apologies for the late response as I haven’t been monitoring this anymore.
You can change the gauge color by adding axisLine object to the object inside the series array, as shown below
series : [
{
title:{
show:true,
offsetCenter:[0,-230],
color:'#888',
fontWeight:'bold',
fontSize:24
},
clockwise:true,
startAngle:180,
endAngle:0,
pointer:{show:true},
axisTick:{show:true},
splitLine:{show:false},
name:'Business Indicators',
type:'gauge',
detail : {
offsetCenter:[5,-40],
formatter:'{value}%'
},
axisLine: {
lineStyle: {
color: [
[0.29, 'lime'],
[0.86, 'yellow'],
[1, 'orange']
],
width: 2
}
},
data:[{value: 75, name: 'Rate'}]
}]