首页 > 代码库 > 基于HTML5的开源图标库-ECharts
基于HTML5的开源图标库-ECharts
ECharts：
来自百度商业前端数据可视化团队,基于html5 Canvas,纯Javascript图表库，底层依赖ZRender，商业产品常用图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。图表类型支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图，同时支持任意维度的堆积和多图表混合展现。
链接是：http://echarts.baidu.com/
参考在其他信息：
http://www.highcharts.com/
http://echarts.baidu.com/doc/example.html#line
http://echarts.baidu.com/doc/doc.html
http://www.oschina.net/question/tag/echarts?show=hot
echarts使用步骤 http://www.oschina.net/question/1179358_127869
https://github.com/ecomfe/zrender
http://www.oschina.net/question/947559_144622
结构图如下：
图【1】
核心库：zrender 是一个轻量级的Canvas类库,MVC封装,数据驱动,提供类Dom事件模型,让canvas绘图大不同。
组件：好的项目必须将各个功能模块单独开发最后集成，这样升级、找问题会很高效，以上组件中多数是常用图标的功能组成必备模块。
图类：将核心底层的组件进行面向对象封装，成为真正的产品。
接口：为了方便调用，ECharts采用特别简单的json配置，加载直接成像。
该产品功能非常多，我仅仅将使用到的比较常用和特殊需要的地方分享一下，需要更多功能可以去这里查阅。
首先下载它的代码：
图【2】
解压后里边的结构是：
图【3】
直接看说明文件：doc
图【4】
其中，doc.html是官网上的Api&Doc ， Example.html是官网的Example:
图【5】
双击example.html后：
图【6】
这里边每一个小例子都在example文件夹中，进入example文件夹看到的内容:
图【7】
回到双击example.html的页面，找个比较常用的快速入门吧：
图【8】
点击进入：
图【9】
左边是最上边结构图中给最外层接口调用的配置json文件，使用非常方便，暂时先简单描述一下使用的方法：
总的来说：我们提供一份配置数据，然后调用ECharts的相关接口，自动画图成像。
具体来说：
1：环境配置
最精简的仅仅需要这4个文件：
我理解中:]
echarts是组件，zrender已经被包含在里边了，所以不需要自己增加了;
echarts-map将图类与组件map（映射、关联）在一起;
Esl是加载器，将配置数据与图像接口加载在一起成像
JS文件在下载的源码中随处可见，而index.html里边调用这三个js，以及数据的添加、接口的调用，将3个js放在一个文件夹中归类。
Html中很的源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script src=http://www.mamicode.com/"js/esl.js"></script> <!-- 注释：esl.js里边调用另外两个js 相关内容-->
</head>
<body>
<div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
<!--注释：最后图像会画在这个div里边-->
<script type="text/javascript">
require.config({
paths:{
echarts:‘./js/echarts‘,
‘echarts/chart/bar‘ : ‘./js/echarts-map‘,<!--注释：表示该图像需要柱状图-->
‘echarts/chart/line‘: ‘./js/echarts-map‘<!--注释：表示该图像需要曲线图-->
}
});
require(
[
‘echarts‘,
‘echarts/chart/bar‘,
‘echarts/chart/line‘
],
function(ec) {
var myChart = ec.init(document.getElementById(‘main‘));
<!--注释：使用前必须调用这个初始化接口，将内容画在main那个div中-->
myChart.setOption({
tooltip : {
trigger: ‘axis‘
},
legend: {
data:[‘蒸发量‘,‘降水量‘]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: [‘line‘, ‘bar‘]},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : ‘category‘,
data : [‘1月‘,‘2月‘,‘3月‘,‘4月‘,‘5月‘,‘6月‘,‘7月‘,‘8月‘,‘9月‘,‘10月‘,‘11月‘,‘12月‘]
}
],
yAxis : [
{
type : ‘value‘,
splitArea : {show : true}
}
],
series : [
{
name:‘蒸发量‘,
type:‘bar‘,
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name:‘降水量‘,
type:‘bar‘,
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
});
}
);
</script>
</body>
</html>
上边的代码的效果：
图【10】
可以做到的比较特殊的效果展现一下：
图【11】
自定义X、Y坐标内容；
自定义需要哪些显示的曲线，比如曲线、柱状线等；
图【12】
可以将两条曲线的感兴趣的对比信息添加到上边显示。
图【13】
每一个点都可以进行各种特殊化处理：
形状（空心圆、星星等）
鼠标停在上边显示内容（可以全部不一样，完全自定义，很方便）
图【14】
显示坐标轴信息。
配置文件可以做的实在太多，暂不一一描述，感兴趣的可以看相关的帮助文档了解学习。