基于HTML5的开源图标库-ECharts
ECharts:
来自百度商业前端数据可视化团队,基于html5 Canvas,纯Javascript图表库,底层依赖ZRender,商业产品常用图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。图表类型支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图,同时支持任意维度的堆积和多图表混合展现。
参考在其他信息:
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="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】
显示坐标轴信息。
配置文件可以做的实在太多,暂不一一描述,感兴趣的可以看相关的帮助文档了解学习。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。