Echarts学习总结（一）-----柱状图

简介

ECharts，缩写来自Enterprise Charts，商业级数据图表，基于【HTML5】Canvas （ZRender），纯Javascript图表库，是百度的一个开源的数据可视化工具，业界给予了很多赞誉，这里不多说，需要了解详情的同学参见官网。我简略看了下，最贴切的地方在于本地化支持，比如对于中国地图的支持。

名词解释    

基本名词

名词	描述
chart	是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等
axis	直角坐标系中的一个坐标轴，坐标轴可分为类目轴和数值轴
xAxis	直角坐标系中的横轴，通常并默认为类目轴
yAxis	直角坐标系中的纵轴，通常并默认为数值轴
grid	直角坐标系中除坐标轴外的绘图网格
legend	图例，表述数据和图形的关联
dataRange	值域选择，常用于展现地域数据时选择值域范围
dataZoom	数据区域缩放，常用于展现大数据时选择可视范围
toolbox	辅助工具箱，辅助功能，如添加标线，框选缩放等
tooltip	气泡提示框，常用于展现更详细的数据
timeline	时间轴，常用于展现同一组数据在时间维度上的多份数据
series	数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据

 图表名词

名词	描述
line	折线图，堆积折线图，区域图，堆积区域图。
bar	柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。
scatter	散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图
k	K线图，蜡烛图。常用于展现股票交易数据。
pie	饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。
radar	雷达图，填充雷达图。高维度数据展现的常用图表。
chord	和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据
force	力导布局图。常用于展现复杂关系网络聚类布局。
map	地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。

引入Echarts的方式

echarts提供多种引入方式，请根据你的项目类型选择合适的方式：

1 模块化包引入
       需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时文件的连

接压缩。

    require.config({
       packages:[{
		 name:'echarts',
		 location:'../js/echarts',
		 main:'echarts'
	 	},{
		 name:'zrender',
		 location:'../js/zrender',//zrender与echarts，在同一级目录,模块化包引入
		 main:'zrender'
		}
	 ]
	 });

首先下载Zrender到本地，和ECharts放在同一目录下。

在echarts/doc/example/www文件中建立一个HTML文件，所使用的js文件都包含在js文件中。    包含echarts.js、echarts-map.js、esl.js三个，其实只用到两个，echarts-map.js并不用。

2 模块化单文件引入（推荐）
      如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发，这种方式只是我们预先帮你把常用图表组合连接合并在一起，你只需一个符合AMD规范的加载器，同时引入一个echarts相关js即可。如你所发现的，build文件夹下已经生成了不同组合的多个单文件见下，根据你的需求场景只需要使用其中一个即可：

例子：   在这里我们只是用line图表，其他的不用，如果你不用的话打包在一起就非常浪费，这时候就可以通过build目录下的build.js文件来构建一个更加贴身的echarts单文件。 总结来说模块化如何引入ECharts，你都需要如下4步： 1、引入一个模块加载器，如esl.js或者require.js 2、为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的） 3、为模块加载器配置echarts的路径，从当前页面链接到echarts.js，见上述说明 4、动态加载echarts然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）

首先下载node下载完成后，安装好node。 打开build文件夹，看到如下文件：

这里我已经建立了一个新的build01.bat 就是单一生成echarts.js

node build.js optimize=true plain=false exclude=map output=echarts.js

当然也可以在终端里通过命令行参数方式运行 node.js构建脚本。

具体语法：

node build.js optimize=true exclude=map,force,line output=echarts.js plain=true

名称	描述
optimize	是否压缩, 默认false
exclude	不打包的图表，多个图表使用逗号分割, 默认使用所有图表
output	输出打包地址，默认为echarts.js
plain	是否打包esl, 打包的话可以直接使用scripts标签引入, 默认false

config-tpl.js文件修改为：

{
    // appDir: './',
    baseUrl: '../src',
    name: 'echarts',
    packages: [
        {
            name: 'zrender',
            location: '../../zrender/src',
            main: 'zrender'
        },
        {
            name: 'echarts',
            location: '.',
            main: 'echarts'
        }
    ],
    include:[
        'echarts/chart/line'
    ],
    out: 'echarts.js'
}

完成后，将echarts.js拷贝到doc/example/www/js文件中，并将原有的覆盖

HTML配置如下：

 require.config({
            paths: {
                 echarts: '../js/echarts', //echarts.js的路径
　　　　　　　　　　'echarts/chart/bar' : './js/echarts',       // 把所需图表指向单文件  
　　　　　　　　   'echarts/chart/line': './js/echarts'  
 
            }
        });

require.config配置后后就可以通过动态加载使用echarts。

       require(
		    [
		        'echarts',
		        'echarts/chart/line',   // 按需加载所需图表
		        'echarts/chart/bar'
		    ],
		    function (ec) {
		        var myChart = ec.init(domMain);
		        var option = {
		            ...
		        }
		        myChart.setOption(option);
		    }
		);

3 标签式单文件引入
      如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签

式引入，忘掉require，srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，但是需要注意的是excanvas依赖body标签插入Canvas节点

去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。

标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：
echarts.config = require('echarts/config')， zrender.tool.color = require('zrender/tool/color')

可以直接引入的单文件如下：

echarts.js : 经过压缩，包含除地图外的全部图表
echarts-original.js : 未压缩，可用于调试，包含除地图外的全部图表
echarts-map.js : 经过压缩，全图表，包含world，china以及34个省市级地图数据
echarts-original-map.js : 未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据

<script src="example/www2/js/echarts-plain.js"></script>
<script>
    var myChart = echarts.init(domMain);
    var option = {
        ...
    }
    myChart.setOption(option);
</script>

牛刀小试----代码解析柱状图

今天在学习Echarts练习时，总是在路径的配置上出现错误，作为入门，总结一下，在此分享给大家，希望有用。

ECharts主页：  http://echarts.baidu.com/index.html

ECharts-2.2.0下载地址：  http://echarts.baidu.com/build/echarts-2.2.0.zip

ECharts官方实例：  http://echarts.baidu.com/doc/example.html

ECharts官方API文档：  http://echarts.baidu.com/doc/doc.html

需要注意的是ECharts内部也是依赖于另一个插件的叫ZRender，当然对于大部分图表而言不需要ZRender的，但是对于地图控件及其他复杂的呈现控件而已都是需要ZRender的。为了避免不要的问题出现，建议大家在下载ECharts时同时也要下载ZRender。

ZRender下载地址：http://ecomfe.github.io/zrender/index.html

1、项目结构

js文件夹： 下载了ECharts之后，解压缩，如解压后的根目录是echarts-2.2.0，则到echarts-2.2.0\doc\example\www路径下，把里面的js文件夹直接复制粘贴到项目的 WebRoot根目录下即可。ZRender插件放在与ECharts的同一目录下，即zrender-master\src

这里有以下几点需要说明：

l  所有的跟ECharts有关的文件全部都在echarts文件夹下

l  echarts文件夹的内容分为两部分

1)       一部分是以echarts开头的js文件，这些文件全部来自于1.中的ECharts文件目录中的js文件夹下的文件，也就是1.中的图中红框标注的js下的文件。如下：

2)       另一部分是一个名为zrender的文件夹，这里需要特别注意的是该文件夹的命名必须为zrender，因为在echarts的js文件中对zrender的引用都是以zrender为根目录的，zrender文件夹的内容即为1.中zrender文件目录中的src文件夹下的内容，如下：

dem1：index.html：在WebRoot根目录下新建index.html

<!DOCTYPE html>
<html>
  <head>
    <title>ECharts</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
  </head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="js/echarts.js"></script>
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: './js'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                'echarts/chart/line'
            ],
            function (ec) {
                // 基于准备好的dom，初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 

                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:"销量",
                            type:"bar",
                            data:[5, 20, 40, 10, 10, 20]
                        },//折线图
	                    {
	                    	 name:"销量",
	                    	 type:"line",
	                    	 data:[5, 20, 40, 10, 10, 20],
	                    	  //绘制平均线
	                    	 markLine : {
	                    	      data : [
	                    	          {
	                    	          type : 'average',
	                    	          name: '平均值'
	                    	          }
	                    	      ]
	                    	 },
	                    	  //绘制最高最低点
	                    	 markPoint : {
	                    	       data : [
	                    	               {
	                    	               type : 'max',
	                    	               name: '最大值'
	                    	               },
	                    	               {
	                    	               type : 'min',
	                    	               name: '最小值'
	                    	               }
	                    	        ]
	                    	  }
	                    }
	                  ]
	                };

                // 为echarts对象加载数据
                myChart.setOption(option);
            }
        );
    </script>
</body>

</html>

dem2：echarts.jsp：同上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts-基本线性图及其配置要求</title>
</head>
<body>
    <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="main" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    <div id="mainMap" style="width:500px;height:500px;border:1px solid #ccc;padding:10px;"></div>

    <!--Step:2 Import echarts.js-->
    <!--Step:2 引入echarts.js-->
    <script src="js/echarts.js"></script>

    <script type="text/javascript">
    // Step:3 conifg ECharts's path, link to echarts.js from current page.
    // Step:3 为模块加载器配置echarts的路径，从当前页面链接到echarts.js，定义所需图表路径
    require.config({
        paths: {
            echarts: './js'		//echarts.js所在的路径
        }
    });

    // Step:4 require echarts and use it in the callback.
    // Step:4 动态加载echarts然后在回调函数中开始使用，注意保持按需加载结构定义图表路径
    require(
        [
            'echarts',
            'echarts/chart/bar',
            'echarts/chart/line',
            'echarts/chart/map'
        ],
        function (ec) {//渲染ECharts图表  ，可单独写出来作为回调函数
            //--- 折柱 ---
            //图表渲染的容器对象
	        var chartContainer = document.getElementById("main");  //""、''这里均可以
            //加载图表
            var myChart = ec.init(chartContainer);
            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 : [
                    {
                    	name : '月份',
                        type : 'category',
                        data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
                    }
                ],
                yAxis : [
                    {
                    	name : '数值',
                        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]
                    }
                ]
            });

            // --- 地图 ---
            var myChart2 = ec.init(document.getElementById('mainMap'));
            var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series : [
                    {
                        name: '中国',
                        type: 'map',
                        mapType: 'china',
                        selectedMode : 'multiple',
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}}
                        },
                        data:[
                            {name:'广东',selected:true}
                        ]
                    }
                ]
            };
            myChart2.setOption(option); // 为echarts对象加载数据 

        }
    );
    </script>
</body>
</html>

完成以上的步骤后，把项目发布到服务器，在浏览器上访问echarts.jsp(由于本实例还没有跟后台进行交互，只是先做一个前台用法介绍，所以可以把echart.jsp直接修改成echarts.html文件,把它跟js文件夹放在同一级目录下，然后直接用浏览器打开echarts.html)，即可看到效果。好了，这次总结就先到这里！