echarts.docx
- 文档编号:30670364
- 上传时间:2023-08-19
- 格式:DOCX
- 页数:96
- 大小:424.11KB
echarts.docx
《echarts.docx》由会员分享,可在线阅读,更多相关《echarts.docx(96页珍藏版)》请在冰豆网上搜索。
echarts
名词解析
基本名词
名词
描述
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提供多种引入方式,请根据你的项目类型选择合适的方式:
模块化包引入
如果你熟悉模块化开发,你的项目本身就是模块化且遵循AMD规范的,那引入echarts将很简单,只需要配置好packet路径指向src即可,你将享受到图表的按需加载等最大的灵活性,由于echarts依赖底层zrender,你需要同时下载zrender到本地,可参考demo,你需要配置如下。
需要注意的是,包引入提供了开发阶段最大的灵活性,但并不适合直接上线,减少请求的文件数量是前端性能优化中最基本但很重要的规则,务必在上线时做文件的连接压缩。
//fromechartsexample
require.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/www下,你需要配置如下:
//fromechartsexample
require.config({
paths:
{
'echarts':
'./js/echarts',
'echarts/chart/bar':
'./js/echarts',//把所需图表指向单文件
'echarts/chart/line':
'./js/echarts'
}
});
require.config配置后后就可以通过动态加载使用echarts
//fromechartsexample
require(
[
'echarts',
'echarts/chart/line',//按需加载所需图表
'echarts/chart/bar'
],
function(ec){
varmyChart=ec.init(domMain);
varoption={
...
}
myChart.setOption(option);
}
);
总结来说,模块化引入ECharts,你都需要如下4步:
1.引入一个模块加载器,如esl.js或者require.js
2.为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')
//fromechartsexample
varmyChart=echarts.init(domMain);
varoption={
...
}
myChart.setOption(option);
可以直接引入的单文件如下:
∙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
是否压缩,默认false
exclude
不打包的图表,多个图表使用逗号分割,默认使用所有图表
output
输出打包地址,默认为echarts.js
plain
是否打包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中包含timeline(详见timeline)时每一个独立的option应该放置到命名为options的数组内,如
myCharts.setOption({
timeline:
{...},
options:
[
{//option1
title:
{...},
series:
[...]
},
{...},//option2
...
]
});
{Object}getOption
{void}
返回内部持有的当前显示option克隆(拷贝)。
{self}setSeries
{Array} series,
{boolean=} notMerge
数据接口,驱动图表生成的数据内容(详见series),效果等同调用setOption({series:
{...}})
{Object}getSeries
{void}
返回内部持有的当前显示series克隆(拷贝),效果同returngetOption().series
{self}addData
单组数据:
{number} seriesIdx
{number|Object} data
{boolean=} isHead
{boolean=} dataGrow
{string=} additionData
多组数据添加:
{Array} params
动态数据接口,trythis(Line&Bar)» trythis(Scatter&K)» trythis(Pie&Radar)»
seriesIdx系列索引
data增加数据
isHead是否队头加入,默认,不指定或false时为队尾插入
dataGrow是否增长数据队列长度,默认,不指定或false时移出目标数组对位数据
additionData是否增加类目轴(饼图为图例)数据,附加操作同isHead和dataGrow
多组数据添加时参数为:
params==[[seriesIdx,data,isHead,dataGrow,additionData],[...]]
{self}addMarkPoint
{number} seriesIdx
{Object} markData
新增标注接口,其中
seriesIdx系列索引
markData[标注]对象,同series.markPoint,支持多个
{self}addMarkLine
{number} seriesIdx
{Object} markData
新增标线接口,其中
seriesIdx系列索引
markData[标线]对象,同series.markLine,支持多个
{self}delMarkPoint
{number} seriesIdx
{string} markName
删除单个标注接口,其中
seriesIdx系列索引
markName[标注]名称
{self}delMarkLine
{number} seriesIdx
{string} markName
删除单个标线接口,其中
seriesIdx系列索引
markName[标线]名称
{self} on
{string} eventName,
{Function}eventListener
事件绑定,事件命名统一挂载到require('echarts/config').EVENT(非模块化为echarts.config.EVENT)命名空间下,建议使用此命名空间作为事件名引用,当前版本支持事件有:
REFRESH(刷新),RESTORE(还原),RESIZE(显示空间变化),CLICK(点击),HOVER(悬浮),
DATA_CHANGED(数据修改),DATA_VIEW_CHANGED(数据视图修改),
MAGIC_TYPE_CHANGED(动态类型切换),TIMELINE_CHANGED(时间轴变化),
DATA_ZOOM(数据区域缩放),DATA_RANGE(值域漫游),MAP_ROAM(地图漫游),
LEGEND_SELECTED(图例选择),MAP_SELECTED(地图选择),PIE_SELECTED(饼图选择)
事件调试»
{self} un
{string} eventName,
{Function}eventListener
事件解绑定
{self}setTheme
{string|Object} theme
设置主题,内置主题(暂无)直接传入名称,自定义扩展主题可传入主题对象
{self}connect
{ECharts|Array
多图联动,传入联动目标为EChart实例,支持数组。
多图联动支持直角系下tooltip联动,保存图片的自动拼接,同时支持的联动事件有:
REFRESH,RESTORE,MAGIC_TYPE_CHANGED
DATA_ZOOM,DATA_RANGE,LEGEND_SELECTED
多图联动»
{self}disConnect
{ECharts|Array
解除已连结的多图联动
{self}showLoading
{Object} loadingOption
过渡控制(详见loadingOption),显示loading(读取中) trythis»
{self}hideLoading
{void}
过渡控制,隐藏loading(读取中)
{ZRender}getZrender
{void}
获取当前图表所用ZRender实例,可用于添加额外图形或进行深度定制,zrender接口详见ZRender
{string}getDataURL
{string=} imgType
获取当前图表的Base64图片dataURL,imgType图片类型,支持png|jpeg,默认为png
{Dom}getImage
{string=} imgType
获取一个当前图表的img,imgType图片类型,支持png|jpeg,默认为png
{self} resize
{void}
ECharts没有绑定resize事件,显示区域大小发生改变内部并不知道,使用方可以根据自己的需求绑定关心的事件,主动调用resize达到区域更新的效果。
{self} refresh
{void}
刷新图表,图例选择、数据区域缩放,拖拽状态均保持。
{self} restore
{void}
还原图表,各种状态均被清除,还原为最初展现时的状态。
{self} clear
{void}
清空绘画内容,清空后实例可用
{void}dispose
{void}
释放图表实例,释放后实例不再可用
选项
option
图表选项,包含图表实例任何可配置选项:
公共选项 , 组件选项 , 数据选项
名称
描述
{color}backgroundColor
全图默认背景,(详见backgroundColor),默认为无,透明
{Array} color
数值系列的颜色列表,(详见color),可配数组,eg:
['#87cefa','rgba(123,123,123,0.5)','...'],当系列数量个数比颜色列表长度大时将循环选取
{boolean}renderAsImage
非IE8-支持渲染为图片,(详见renderAsImage)
{boolean} calculable
是否启用拖拽重计算特性,默认关闭,(详见calculable,相关的还有 calculableColor, calculableHolderColor, nameConnector,valueConnector)
{boolean} animation
是否开启动画,默认开启,(详见 animation,相关的还有 addDataAnimation, animationThreshold, animationDuration,animationEasing)
{Object} timeline
时间轴(详见timeline),每个图表最多仅有一个时间轴控件
{Object} title
标题(详见title),每个图表最多仅有一个标题控件
{Object} toolbox
工具箱(详见toolbox),每个图表最多仅有一个工具箱
{Object} tooltip
提示框(详见tooltip),鼠标悬浮交互时的信息提示
{Object} legend
图例(详见legend),每个图表最多仅有一个图例,混搭图表共享
{Object} dataRange
值域选择(详见dataRange),值域范围
{Object} dataZoom
数据区域缩放(详见dataZoom),数据展现范围选择
{Object} grid
直角坐标系内绘图网格(详见grid)
{Array|Object} xAxis
直角坐标系中横轴数组(详见xAxis),数组中每一项代表一条横轴坐标轴,标准(1.0)中规定最多同时存在2条横轴
{Array|Object} yAxis
直角坐标系中纵轴数组(详见yAxis),数组中每一项代表一条纵轴坐标轴,标准(1.0)中规定最多同时存在2条纵轴
{Array} series
驱动图表生成的数据内容(详见series),数组中每一项代表一个系列的特殊选项及数据
timeline
时间轴,每个图表最多仅有一个时间轴控件,try bar»、scatter»、pie»、map»
名称
默认值
描述
{boolean} show
true
显示策略,可选为:
true(显示)|false(隐藏)
{string} type
'time'
模式是时间类型,时间轴间隔根据时间跨度计算,可选为:
'number'
{boolean} notMerge
false
时间轴上多个option切换时是否进行merge操作,同setOption第二个参数(详见实例方法)
{boolean} realtime
true
拖拽或点击改变时间轴是否实时显
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- echarts