eCharts (v3) Simple Bar Chart

I have been playing around with javascript based charting libraries. I like HighCharts. Its pretty good for the charts you will need with very good customization features. It, however it is not free (for commercial uses).

D3 library is good for creating your own charting solutions and there are a pretty good charting libraries out there built on top of D3. Personally am a big fan of the D3 library and Mike Bostock.

However recently I came across eCharts (version 3) (owned by Baidu) and was blown away by the examples in its gallery. Its based on ZRender which is a lightweight canvas library.

Its definitely something I will use over highcharts in my next project.

Here’s a list of things that made me try it :

  • A very rich gallery where you can play around as well -> Demo Gallery
  • Canvas based*
  • Very well documented -> API Docs
  • It also has a offline chart builder.
  • Free. Yes you can simply get the minified js and start using it.

Note : A lot of people indicated that the documentation is difficult as it is mostly in chinese. As of today I did not find that to be a hindrance and the documentation I read was in plain English.

Here’s the CDN for the english version of echarts version 3

https://cdnjs.com/libraries/echarts

Do give it a try.

Here’s a sample application :

The js code (app.js):

var chartdata=[
 {    
     name: 'Oranges',    
     type: 'bar',    
     data: [20, 20, 36, 12, 15, 20]    
 },          
 {    
     name: 'Apples',    
     type: 'bar',    
     data: [8, 5, 25, 10, 10, 13]    
 },
 {    
     name: 'Strawberries',    
     type: 'bar',    
     data: [8, 5, 20, 10, 7, 15]    
 },          
 {    
     name: 'Mangoes',    
     type: 'bar',    
     data: [8, 5, 20, 10, 7, 15]    
 }
];

var legendData = chartdata.map(function(d){return d.name;});

var chart = document.getElementById('chart');    

var myChart = echarts.init(chart);  
  
var option = {    
               title: { 
                        text: 'eCharts:Bar',                 
                        textStyle:{                          
                                    color:'#fff'                  
                                   }
                       },
               toolbox: {
                         show : true,
                         feature : {            
                                     dataView : {show: true, title:'Data View', readOnly: false},            
                                     magicType : {show: false, title:['line','bar'],type: ['line', 'bar']},            
                                     restore : {show: true, title:'Restore'},            
                                     saveAsImage : {show: true, title:"Save As Image"}        
                                    }    
                        },    
               tooltip: {                   
                         backgroundColor:'rgba(250,250,250,0.7)',                  
                         textStyle:{                              
                                     color:'#000'                              
                                   }                                     
                         },
               legend: { 
                         orient:'vertical',                   
                         textStyle:{                              
                                     color:'#fff'                              
                                   },                   
                         left:'30',
                         top:'100',           
                         data: [ 'Oranges','Apples','Strawberries','Mangoes' ]
                        },
               xAxis: { 
                        data: [ "2006", "2008", "2010", "2012", "2014", "2016" ]
                       },    
               yAxis: { },    
               series: chartdata,          
               backgroundColor:'rgba(0, 0, 0, 1)',          
               textStyle:{
                           color:'#fff'          
                },          
               color:[ '#FF9800','#ef5350','#F48FB1','#81C784','#c4ccd3','#c23531','#2f4554','#61a0a8','#d48265','#91c7ae']
};
myChart.setOption(option);

The HTML Code(index.html):

<!doctype html>
<html>
<head>
<title>Charts BarChart Example</title>
</head>
<body>
<div id="chart" style="width: 100vw; height: 100vh;">
</div>
<script src="http://echarts.baidu.com/dist/echarts.min.js"></script>
<script src="app.js"></script>
</body>
</html>

And here’s the output (Its interactive and you can toggle the series via the legends) :

 

 

Github repo : https://github.com/nizantz/echartsDemo.git

Codepen link : https://codepen.io/nizantz/full/QqgVmZ/

Pretty interesting. I will be playing around more with echarts and vue.

Posted in Charts n Graphs, Generic, JS Frameworks, Web Technology

Leave a Reply

Your email address will not be published. Required fields are marked *

*