ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。ECharts 提供了常规的折线图，柱状图，散点图，饼图，K线图，用于统计的盒形图，用于地理数据可视化的地图，热力图，线图，用于关系数据可视化的关系图，treemap，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

官网：http://echarts.baidu.com/

下面来简单说明一下EChart.js的使用。

第一步，引用Js文件

<script type="text/javascript" src="js/echarts.js"></script>

js文件有几个版本，可以根据实际需要引用需要的版本。下载链接

第二步，准备一个放图表的容器

<div id="chartmain" style="width:600px; height: 400px;"></div>

第三步，设置参数，初始化图表

<script type="text/javascript"> //指定图标的配置和数据
var option = {
 title:{
 text:'ECharts 数据统计'
 },
 tooltip:{},
 legend:{
 data:['用户来源']
 },
 xAxis:{
 data:["Android","IOS","PC","Ohter"]
 },
 yAxis:{
 },
 series:[{
 name:'访问量',
 type:'line',
 data:[500,200,360,100]
 }]
 }; //初始化echarts实例
var myChart = echarts.init(document.getElementById('chartmain')); //使用制定的配置项和数据显示图表 myChart.setOption(option); </script>

这样简单的一个统计图表就出来了，官网使用的柱状图，我这边改用了折线图。

柱状图其实也很简单，只要修改一个参数就可以了。把series里的type 值修改为"bar"

饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式。

var option = {
 title:{
 text:'ECharts 数据统计'
 }, 
 series:[{
 name:'访问量',
 type:'pie', 
 radius:'60%',
 data:[
 {value:500,name:'Android'},
 {value:200,name:'IOS'},
 {value:360,name:'PC'},
 {value:100,name:'Ohter'}
 ]
 }]
 };

请大家多多关注我的头条号，谢谢大家。