ECharts是一个图形展示控件，基于javascript开发出来的，挺好用的，研究了下。
主页地址：http://echarts.baidu.com/index.html
API地址：http://echarts.baidu.com/doc/doc.html
在主页中可以找到下载地址，这一个开源的图形展示空间，类似于extjs的图形展示。不过有些功能挺好用的，比extjs更人性化一点。
下面我写了一个简单的例子用来展示ECharts的功能：
1、首先需要下载两个文件
2、下载到这两个文件后，我们需要的是这两个文件中的一些文件，首先是echarts-1.3.7下面的这个文件夹下面的三个文件：
echarts-1.3.7\echarts-1.3.7\doc\example\www\js
这三个文件是：echarts.js,echarts-map.js,esl.js
然后是zrender-master下面的这个文件夹里面的文件：zrender-master\zrender-master\src，我们需要这个文件夹内所有的内容。
3、在桌面上建一个文件夹：echartsexample，
4、在文件夹里面创建两个文件：
5、index.html的内容：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Echarts Example</title> <script src="js/echarts/esl.js" type="text/javascript"></script>
<script src="js/echartsexample/echartsexample.js" type="text/javascript"></script> </head> <body> <div id="main" style=" height:500px; border:1px solid #ccc; padding:10px;"></div> </body>
</html>
6、js文件夹下面的内容：
7、echarts文件夹下面的内容：
文件echarts.js,echarts-map.js,esl.js是从第三步中在echarts-1.3.7拷过来的三个文件，在zrender文件夹下面存放的是第三步中在zrender-msater拷过来的文件：
8、第六步中echartsexample文件夹中的内容：
echartsexample.js内容：
require.config({
paths: {
echarts:'js/echarts/echarts',//这里是你引用的echarts文件的路径
'echarts/chart/bar':'js/echarts/echarts',//这里需要注意的是除了mapchart使用的配置文件为echarts-map之外，其他的图形引用的配置文件都为echarts，这也是一般的图形跟地图的区别
'echarts/chart/line':'js/echarts/echarts'
}
});
require(
[
'echarts',//这里定义项目中需要的类
'echarts/chart/bar',
'echarts/chart/line'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));//图表初始化的地方，在页面中要有一个地方来显示图表，他的ID是main
option= {
tooltip: {
trigger:'axis'
},
legend: {//图例
data: ['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
},
toolbox: {
show:true,
feature: {
mark:true,
dataView: { readOnly:false },
magicType: ['line','bar'],
restore:true,
saveAsImage:true
}
},
calculable:true,
xAxis: [//X轴
{
type:'category',
boundaryGap:false,
data: ['周一','周二','周三','周四','周五','周六','周日']
}
],
yAxis: [//Y轴
{
type:'value',
splitArea: { show:true }
}
],
series: [//序列
{
name:'邮件营销',
type:'line',
stack:'总量',
data: [120,132,101,134,90,230,210]
},
{
name:'联盟广告',
type:'line',
stack:'总量',
data: [220,182,191,234,290,330,310]
},
{
name:'视频广告',
type:'line',
stack:'总量',
data: [150,232,201,154,190,330,410]
},
{
name:'直接访问',
type:'line',
stack:'总量',
data: [320,332,301,334,390,330,320]
},
{
name:'搜索引擎',
type:'line',
stack:'总量',
data: [820,932,901,934,1290,1330,1320]
}
]
};
myChart.setOption(option);
}
);
跟着上面的步骤就可以创建一个ECharts的图表显示页面，比起extjs更人性化。
效果：
在图表上面的工具栏中功能挺丰富的，
更多的例子可以在官网的example菜单栏中找到。