ECharts
ECharts是国人开发的一套前端的图表工具库，使用起来超方便，也很简单（当然了，前提是理解了其工作原理之后）。
下面简单的介绍一下，如何在项目中使用ECharts。
下载js代码
个人觉得，开发人员下载完整版会比较好一点。而且官方建议的也是下载完整版。
下载Echarts
博主这里下载的是完整版，大约不到2M。
工作原理浅析
其实仔细的想想，ECharts的工作就是在网页上显示了一张特殊的图片嘛。所以我们需要意识到，需要给“图片”一个一个空间，这样才会有图表的安家之所嘛。
然后空间有了，也就是有地皮了。要盖一个房子的话，必须得有框架不是。这样的往上面添加些砖瓦水泥什么的才能将房子盖起来。同样的，ECharts也是这么个原理。但是这个“骨架”叫Option。至于这个option需要怎么设置，官网上有详细的介绍，博主就不再这里重复的造轮子了。大家有兴趣的可以到下图展示的地方去学习。
ECharts3下载
在项目中引入ECharts
如题，本小节就是大致的讲一下如何简单的使用这个图标库。
不妨看一下下面的代码：
入门
//通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图
//基于准备好的DOM，实例化echarts实例
var myChart=echarts.init（document.getElementById（"container"））;
// 指定图表的配置项和数据
var option1={
title : {
text : 'ECharts 入门案例'
},
tooltip : {
text : '鼠标放上去之后的悬浮提示语句！'
},
legend : {
data : [ '销量' ]
},
xAxis : {
data : [ '衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '内裤' ]
},
yAxis : {},
series : [ {
name : '销量',
type : 'bar',
data : [ 7, 20, 36, 10, 10, 20, 28 ]
} ]
};
// 使用上面的配置项作为参数，传给echart来显示
myChart.setOption（option1）;
关键在于最后一句：
myChart.setOption（option1）;
起作用不言而喻了吧。那么，得到的效果是什么呢？ 如下图：
Tutorial测试
另外手动的点击上面的那个legend为“销量”的小红色的矩形，会有惊喜的哟。
接下来开始进入今天的正题
后台处理
后台处理包括使用PHP查询数据库，然后以数组的形式返回，再由JQuery以Ajax的形式获取数据，交给前端进行显示的过程。
数据库端MySQL
数据是核心，所以建库很重要。这里仅仅是为了演示，所以数据库建的很简单，如下图：
建立数据库
PHP端
需要注意的是，数据库端返回的时候必须是JSON类型，这样才可以被ajax处理的更方便。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery