基于HTML5的开源图标库-ECharts

来源：互联网发布：权力的48条法则知乎编辑：程序博客网时间：2024/04/29 06:47

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>

<head>

<title>ECharts</title>

</head>

<body>

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'));

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】

显示坐标轴信息。

配置文件可以做的实在太多，暂不一一描述，感兴趣的可以看相关的帮助文档了解学习。

0 0