echarts

名词解析基本名词名词描述chart是指一个完整的图表，如折线图，饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表，可能包括坐标轴、图例等axis直角坐标系中的一个坐标轴，坐标轴可分为类目轴和数值轴xAxis直角坐标系中的横轴，通常并默认为类目轴yAxis直角坐标系中的纵轴，通常并默认为数值轴grid直角坐标系中除坐标轴外的绘图网格legend图例，表述数据和图形的关联dataRange值域选择，常用于展现地域数据时选择值域范围dataZoom数据区域缩放，常用于展现大数据时选择可视范围toolbox辅助工具箱，辅助功能，如添加标线，框选缩放等tooltip气泡提示框，常用于展现更详细的数据timeline时间轴，常用于展现同一组数据在时间维度上的多份数据series数据系列，一个图表可能包含多个系列，每一个系列可能包含多个数据图表名词名词描述line折线图，堆积折线图，区域图，堆积区域图。bar柱形图（纵向），堆积柱形图，条形图（横向），堆积条形图。scatter散点图，气泡图。散点图至少需要横纵两个数据，更高维度数据加入时可以映射为颜色或大小，当映射到大小时则为气泡图kK线图，蜡烛图。常用于展现股票交易数据。pie饼图，圆环图。饼图支持两种（半径、面积）南丁格尔玫瑰图模式。radar雷达图，填充雷达图。高维度数据展现的常用图表。chord和弦图。常用于展现关系数据，外层为圆环图，可体现数据占比关系，内层为各个扇形间相互连接的弦，可体现关系数据force力导布局图。常用于展现复杂关系网络聚类布局。map地图。内置世界地图、中国及中国34个省市自治区地图数据、可通过标准GeoJson扩展地图类型。支持svg扩展类地图应用，如室内地图、运动场、物件构造等。图表类型图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表：引入EChartsecharts提供多种引入方式，请根据你的项目类型选择合适的方式：模块化包引入如果你熟悉模块化开发，你的项目本身就是模块化且遵循AMD规范的，那引入echarts将很简单，只需要配置好packet路径指向src即可，你将享受到图表的按需加载等最大的灵活性，由于echarts依赖底层zrender，你需要同时下载zrender到本地，可参考demo，你需要配置如下。需要注意的是，包引入提供了开发阶段最大的灵活性，但并不适合直接上线，减少请求的文件数量是前端性能优化中最基本但很重要的规则，务必在上线时做文件的连接压缩。//fromechartsexamplerequire.config({packages:[{name:'echarts',location:'../../src',main:'echarts'},{name:'zrender',location:'../../../zrender/src',//zrender与echarts在同一级目录main:'zrender'}]});模块化单文件引入（推荐）如果你使用模块化开发但并没有自己的打包合并环境，或者说你不希望在你的项目里引入第三方库的源文件，我们建议你使用单文件引入，同模块化包引入一样，你需要熟悉模块化开发，这种方式只是我们预先帮你把常用图表组合连接合并在一起，你只需一个符合AMD规范的加载器，同时引入一个echarts相关js即可。如你所发现的，build文件夹下已经生成了不同组合的多个单文件见下，根据你的需求场景只需要使用其中一个即可：echarts.js:经过压缩，包含除地图外的全部图表echarts-original.js:未压缩，可用于调试，包含除地图外的全部图表echarts-map.js:经过压缩，全图表，包含world，china以及34个省市级地图数据echarts-original-map.js:未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据采用单一文件使用例子见ECharts单一文件引入，存放在example/下，你需要配置如下：//fromechartsexamplerequire.config({paths:{'echarts':'./js/echarts','echarts/chart/bar':'./js/echarts',//把所需图表指向单文件'echarts/chart/line':'./js/echarts'}});require.config配置后后就可以通过动态加载使用echarts//fromechartsexamplerequire(['echarts','echarts/chart/line',//按需加载所需图表'echarts/chart/bar'],function(ec){varmyChart=ec.init(domMain);varoption={...}myChart.setOption(option);});总结来说，模块化引入ECharts，你都需要如下4步：1.引入一个模块加载器，如esl.js或者require.js2.为ECharts准备一个具备大小（宽高）的Dom（当然可以是动态生成的）3.为模块加载器配置echarts的路径，从当前页面链接到echarts.js，见上述说明4.动态加载echarts然后在回调函数中开始使用（容我罗嗦一句，当你确保同一页面已经加载过echarts，再使用时直接require('echarts').init(dom)就行）标签式单文件引入自1.3.5开始，ECharts提供标签式引入。如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入，忘掉require，srcipt标签引入echarts后将可以直接使用两个全局的命名空间：echarts，zrender，可参考ECharts标签式引入，需要注意的是excanvas依赖body标签插入Canvas节点去判断Canvas的支持，如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。标签式引入环境中，常用模块的引用可通过命名空间直取，同模块化下的路径结构，如：echarts.config=require('echarts/config')，zrender.tool.color=require('zrender/tool/color')//fromechartsexamplescriptsrc=example/=echarts.init(domMain);varoption={...}myChart.setOption(option);/script可以直接引入的单文件如下：echarts-plain.js:经过压缩，包含除地图外的全部图表echarts-plain-original.js:未压缩，可用于调试，包含除地图外的全部图表echarts-plain-map.js:经过压缩，全图表，包含world，china以及34个省市级地图数据echarts-plain-original-map.js:未压缩，可用于调试，全图表，包含world，china以及34个省市级地图数据自定义构建echarts单文件默认echarts通过build目录下的build.sh（build.bat）脚本可以输出是否包含地图，是否压缩和是否打包esl（可以标签引入）排列组合总共6个版本的echarts单文件，大部分场景下已经够用，但是如果你还是觉得很多图表用不到还放在里面非常浪费，可以通过build目录下的build.js来构建一个更加贴身的echarts单文件。运行build.js只需要一个node环境，build文件夹内已经为你准备好配置项，可根据你的项目需求修改config-tpl.js以构建你的最佳配置，你甚至可以在终端里通过命令行参数的方式运行nodebuild.js构建脚本，具体示例：nodebuild.jsoptimize=trueexclude=map,force,lineoutput=echarts.jsplain=true参数说明:名称描述optimize是否压缩,默认falseexclude不打包的图表，多个图表使用逗号分割,默认使用所有图表output输出打包地址，默认为echarts.jsplain是否打包esl,打包的话可以直接使用scripts标签引入,默认false更详细的配置在build/config-tpl.js目录下，具体的配置项使用可以参考requirejsoptimizer的examplebuildfile，要注意的的是optimize,include,wrap三个配置项会在build过程中根据输入的参数被改掉，所以不建议直接修改这三个配置项，修改config-tpl.js最常见的场景是zrender和echarts不在同一个目录下从而需要修改zrender的package路径。初始化通过require获得echarts接口后（或者命名空间上）可实例化图表，echarts接口仅有一个方法init，执行init时传入一个具备大小的dom节点（width、height可被计算得到即可，不一定可见）后即可实例化出图表对象，图表库实现为多实例的，同一页面可在多个dom上init出多个图表，同一个dom上多次init将自动释放已有实例（1.4.0+）。init方法说明如下：名称参数描述{ECharts}init{dom}dom,{string|Object=}theme初始化接口，返回ECharts实例，其中dom为图表所在节点，theme为可选的主题，内置主题（暂无）直接传入名称，自定义扩展主题可传入主题对象图表实例可用方法见方法引入ECharts后的的初始化代码如下：//作为入口require(['echarts','echarts/chart/pie'],function(ec){varmyChart=ec.init(document.getElementById('main'));myChart.setOption({...});});//-----------------------------//非入口或再次使用，图表已被加载注册require('echarts').init(dom).setOption({...});//如果需要再次使用ECharts的图表实例，建议你还是保存init返回的图表实例吧varmyChart=require('echarts').init(dom);myChart.setOption({...});熟悉模块化的你可以跳过了下面代码了//不习惯模块化的你当然可以varecharts;require(['echarts'],function(ec){echarts=ec;});//是的，把echarts加载后保存起来作为命名空间使用实例方法实例指的就是接口init()返回的对象，即上述代码中的“myChart”，非get接口均返回自身self支持链式调用名称参数描述{self}setOption{Object}option,{boolean=}notMerge万能接口，配置图表实例任何可配置选项（详见option），多次调用时option选项默认是合并（merge）的，merge的设计可以让setOption很方便的成为更新任何属性的万能方法，比如你仅需要改title文字，则仅需要：setOption({title:{text:'新标题'}});如果不需要，可以通过notMerger参数为true阻止与上次option的合并，如多次setOption间数据改变、长度不一致等的场景。2.0.0起支持timeline组件，option中包含timel