基于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,以及数据的添加、接口的调用,将3js放在一个文件夹中归类。

 

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】

自定义XY坐标内容;

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

 

图【12】

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

 

 

图【13】

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

形状(空心圆、星星等)

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

 

 

图【14】

显示坐标轴信息。

 

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

基于HTML5的开源图标库-ECharts,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。