The basic method of using the ECharts

ECharts, an open source visualization library implemented in JavaScript, you can smooth run on the PC and mobile devices, is compatible with the vast majority of current browsers, the underlying rely lightweight vector graphics library ZRender, provides an intuitive, interactive rich, highly personalized customization of data visualization charts.

Drawing data charts

1, Histogram

 

                                                          Histogram Effects Browser

Code

<! DOCTYPE HTML > 
< HTML > 
< head > 
    < Meta charset = "UTF-. 8" > 
    < title > ECharts </ title > 
    <-! Introduced echarts.js -> 
    < Script the src = "JS / echarts.min .js " > </ Script > 
</ head > 
< body > 
    ! <- to prepare ECharts includes a size (width and height) of Dom -> 
    < div ID =" main " style =" width:600px;height:400px;"></div> 
    < Script type = "text / JavaScript" > 
        // based ready dom, instance initialization echarts 
        var myChart = echarts.init (document.getElementById ( ' main ' )); 

        // the specified configurations and graph data 
        var Option = { 
            title: { 
                text: ' ECharts start example ' 
            }, 
 ToolTip: {}, 
            Legend: { 
                Data: [ ' sales ' ] 
            }, 
            XAXIS: { 
                Data: [ "Shirt " , " sweater " , " chiffon shirt " , " pants " , " heels " , " socks " ] 
            }, 
            YAXIS: {}, 
            Series: [{ 
                name: ' sales ' , 
                type: ' bar ' , 
                Data: [ . 5 , 20 is , 36 , 10 , 10 , 20 is ] 
            }] 
        }; 

        // use just specified configuration data items and display the chart. 
        myChart.setOption (Option);
     </ Script > 
</ body > 
</ HTML >

2, line

<! DOCTYPE HTML > 
< HTML > 
< head > < Meta  charset = "UTF-. 8" > < title > Statistics charts: Line </ title > ! <-  introducing ECharts file compressed version of the Pick min.js echarts  -> < Script  the src = "JS / echarts.min.js" > </ Script > </ head > < body > <-! to prepare a ECharts includes Dom size (width and height) of the -> < div ID = "main" style="width: 600px;height:400px;"
    
    
    
    


    
           > </ Div > 
           < Script type = "text / JavaScript" > 
               // based ready dom, instance initialization echarts 
               var myChart = echarts.init (document.getElementById ( ' main ' ));
         //  CI tables in the specified and data 
var  Option  =  { 
            title: { 
                text:  ' future temperature change of one weeks ' 
            }, 
            ToolTip: { 
                Trigger:  ' Axis ' 
            }, 
            XAXIS: { 
                type:  '        category ' , 
                the Data: [ ' Monday ' , ' Tuesday ' , ' Wednesday ' , ' Thursday ' , ' Friday ' , ' Saturday ' , ' Sunday ' ] 
            }, 
            YAXIS: { 
                of the type:  ' value ' , 
                of AxisLabel : {   // axis scale label settings. 
                    Formatter:  ' {value} [deg.] C ' //   String, template variables default scale value tag} { 
                } 
            }, 
            Series: [ 
                { 
                    name: ' highest temperature ' , 
                    type: ' Line ' , 
                    Data: [ . 11 ,  . 11 ,  15 ,  13 is ,  12 is ,  13 is ,  10 ], 
                }, 
                { 
                    name: ' lowest temperature ' , 
                    type: ' Line ', 
                    Data: [ . 1 ,  - 2 ,  2 ,  . 5 ,  . 3 ,  2 ,  0 ], 

                } 
            ] 
        }; 
        //  use just specified configuration data items and display the chart. 
        myChart.setOption (Option);
     </ Script > 

</ body > 
</ HTML >

3, pie

 

 code show as below:

<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		   <div id="main" style="width: 600px;height:400px;"></div>
		   <script type="text/javascript">
		       // 基于准备好的dom，初始化echarts实例
		       var myChart = echarts.init(document.getElementById('main'));
		
		       // 指定图表的配置项和数据
		       var option = {
		           title: {
		               text: '小杰公司年龄阶段的员工占比',
					   x:'center'//水平居中
		           },
		       tooltip: {//提示框组件
				   trigger:'item',//'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用
				   formatter:"{a}<br/>{b}:{c} ({d}%)"
			   },
		       series:[
				   {
					   name:'年龄占比',
					   type:'pie',
					   radius:'55%',
					   center:['50%','60%'],
					   data:[
						   {value:80,name:'20-25岁'},
						   {value:30,name:'26-30岁'},
						   {value:20,name:'31-35岁'},
						   {value:8,name:'36-40岁'},
						   {value:5,name:'41岁以上'}
					   ],
					   itemStyle:{
						   emphasis:{
							   shadowBlur:10,
							   shadowOffsetX:0,
							   shadowColor:'rgba(0,0,0,0.5)'
						   }
					   }
				   }
			   ]
		       };
		
		       // 使用刚指定的配置项和数据显示图表。
		       myChart.setOption(option);
		   </script>

　　

结语

以上绘制的图表是数据图中用的频率较高的三种。不仅如此，ECharts 还可用于地理数据可视化的地图，用于关系数据可视化的关系图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，并且支持图与图之间的混搭。更多有关 ECharts 的使用方法，可参考 ECharts 的官方文档：

https://echarts.baidu.com/index.html