基于HTML5的开源图标库-ECharts

YPE >

标签：开源   html5   javascript   数据可视化   

 

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中很的源码：

html>

    

    

    

">  

 

  

  

    

    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]

                    }

                ]

            });

        }

    );

    

上边的代码的效果：

 

图【10】

 

可以做到的比较特殊的效果展现一下：

 

图【11】

自定义X、Y坐标内容；

自定义需要哪些显示的曲线，比如曲线、柱状线等；

 

图【12】

可以将两条曲线的感兴趣的对比信息添加到上边显示。

 

 

图【13】

每一个点都可以进行各种特殊化处理：

形状（空心圆、星星等）

鼠标停在上边显示内容（可以全部不一样，完全自定义，很方便）

 

 

图【14】

显示坐标轴信息。

 

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

基于HTML5的开源图标库-ECharts,搜素材,soscw.com

基于HTML5的开源图标库-ECharts

标签：开源   html5   javascript   数据可视化   

原文地址：http://blog.csdn.net/lileiyang12/article/details/32168887