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: