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

简介

ECharts，缩写来⾃Enterprise Charts，商业级数据图表，基于【HTML5】Canvas （ZRender），纯Javascript图表库，是百度的⼀个开源的数据可视化⼯具，业界给予了很多赞誉，这⾥不多说，需要了解详情的同学参见官⽹。我简略看了下，最贴切的地⽅在于本地化⽀持，⽐如对于中国地图的⽀持。名词解释 基本名词

chartaxisxAxisyAxisgridlegenddataRangedataZoomtoolboxtooltiptimelineseries 图表名词linebarscatterkpieradarchordforcemap

折线图，堆积折线图，区域图，堆积区域图。

柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。

散点图，⽓泡图。散点图⾄少需要横纵两个数据，更⾼维度数据加⼊时可以映射为颜⾊或⼤⼩，当映射到⼤⼩时则为⽓泡图K线图，蜡烛图。常⽤于展现股票交易数据。

饼图，圆环图。饼图⽀持两种（半径、⾯积）南丁格尔玫瑰图模式。雷达图，填充雷达图。⾼维度数据展现的常⽤图表。

和弦图。常⽤于展现关系数据，外层为圆环图，可体现数据占⽐关系，内层为各个扇形间相互连接的弦，可体现关系数据⼒导布局图。常⽤于展现复杂关系⽹络聚类布局。

地图。内置世界地图、中国及中国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。 打开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

名称

描述

optimizeexcludeoutputplain是否压缩, 默认false

不打包的图表，多个图表使⽤逗号分割, 默认使⽤所有图表输出打包地址，默认为echarts.js

是否打包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个省市级地图数据

⽜⼑⼩试----代码解析柱状图

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

需要注意的是ECharts内部也是依赖于另⼀个插件的叫ZRender，当然对于⼤部分图表⽽⾔不需要ZRender的，但是对于地图控件及其他复杂的呈现控件⽽已都是需要ZRender的。为了避免不要的问题出现，建议⼤家在下载ECharts时同时也要下载ZRender。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

dem2：echarts.jsp：同上

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