Echarts入门教程

【实例简介】
改资源主要是介绍了如何使用Echarts，来源于Echarts的核心开发者林峰。
How to use JEChauets step:1引入一个模块加载器,如 esl.js或者 require s <script. src=js/esl.js></script> sep:2为 ECharts准备一个具备大小(宽高)的Dom <div. id=.style=height: 500px: ></div> Best Practice 单文件已包含 REnder step:3为模块加载器配置 echarts require contig 的路径,从当前页面链接到 echarts: /js/chants echarts/chart/bar.:../js/echarts echarts/chart/line;-1 /js/echarts/v echarts. js,定义所需图表路径 }); step:4动态加载 echarts然后在回r echarts 调函数中开始使用,不管是单文件 echarts/ chart/bar echarts/chart/line 还是包引入都需要显式按需加载图表 function(ec)-I var- dom-=document. getElementById(' main') var my Chart.=ec init(dom); step:N拷 option当模板?看文档! var option =t. my Chart. setOption(option) How to use? plain JEChauets 非模块化项目?基于CMD的项目(如使用 seas)? 13.5+支持直接 scinti标签式引入 step:1 script引入一个 echarts- plain. js <script. src=js/echarts-plain-map js></script> sep:2为 ECharts准备一个具备大小(宽高)的Dom Step:3 echarts和 render被写入为全局接口,直接使用 var my Chart=echarts init(document. getElementById('main ')) my Chart, setOption([ 七oo1tip:{ trigger:axis legend:t data:["蒸发里,降水里’] step:N拷 option当模板?看文档! How to use JEChauets optIor t立t1e text:‘事例 高 subtext:纯属虚杓 dataRange: I TILl max:2500 tert 低’] 已工1es 低 卫ae 事例, type: ap 3 mapType: china 折线图 柱状图 data: L 星楼盘售况 name:'北京’, value:934 nATIE I name a⊥ue:75} 天津 Value:935 d name:重庆: value:gg4 标准面积图 堆积柱状图,支持任意系列堆积。 name:河北,Waue:78g 卫ame l i 卫1ane ↓Wa1ue:567 南”,Wa1ue:452}, I name Wa⊥ue:33 卫ae 湖 了a11e:7 散点图 K线图 A口 I name 巷, Value:s8g nETLE value: 89 气泡图 Interface JEChauets 初始化(实例化)唯一接口方法:init 通过 require获得 echarts接口后可通过ini方法实例化图表,执行in时传入一个具备大 小的dom节点( width、 height可被计算得到,不一定可见)后即可实例化出图表对 象, echarts实现为多实例的,同一页面可多次in出多个图表 /作为入口 require( echarts echarts/hart/pie’∥/图表按需加载,加载本身也是图表类型自注册过程,必须! function(ec)i ec init(document. getElementByld(main)). setOption(.) /非入口或再次使用,图表已被加载注册 require(echarts ). init(dom).setOption(.s) /如果需要再次使用 ECharts的图表实例建议你还是保存init返回的实例 Best practice var my Chart= require('echarts"). init(dom) 保存实例 my Chart. setoption(.]) Interface JEChauets 实例方法 实例指的就是接口ini返回的对象,即上页代码中的 my Chart”,支持链式调用 类型名称 参数 描述 万能接口 (self) Object)option, 配置图表任何可配置选项或数据,多次调用时 option setOption{ boolean=} notMerge选项默认做合并( merge)计算,可以通过 notMerger参数为tue阻止这个合并计算。 (self] Array series, 数据接囗 setseries|{ boolean=} notMerge驱动图表的数据内容,等同 Jsetoption( series:[]) 选项 动态数据接口(支持多组) 单组数据: seriesldx系列索引,data增加的目标数据, shEad [self) { number seriesldx是否队头加入,默认,不指定或 false时为队尾插入, 数据 addData ( number Object) data data Grow是否增长数据队列长度,默认,不指定或 { boolean=} shEad falsel时移出目标数组对位数据, addition Data是否 线柱例子{ boolean=} data grow增加类目轴饼图为图例数据,附加操作同 sHead和 散K例子stng= additionDatadataGrow 饼雷例子多组数据添加 多组数据添加时参数为 (Array) params params==[[seriesldx, data, isHead, dataRow, addition Datal, [JI Interface JEChauets 实例方法 实例指的就是接口ini返回的对象,即上页代码中的 my Chart”,支持链式调用 类型名称 参数 描述 事件綁定,支持事件有 require( 'echarts/config).EVENTT 全局通用 REFRESH RESTORE CLICK HOVER MOUSEWHEEL [string se On eventName 业务交互逻辑 (Function DATA CHANGED, DATA VIEW CHANGED 例子 DATA ZOOM, DATA RANGE 事件 eventListener LEGEND SELECTED, MAP SELECTED PIE SELECTED MAGIC TYPE CHANGED 内部通信(不建议使用) TOOLTIP HOVER (string) sef丹 eventName, (Function] 事件解绑定 eventListener Interface JEChauets 实例方法 实例指的就是接口ini返回的对象,即上页代码中的 my Chart”,支持链式调用 类型 名称 参数 描述 [self) Object)过渡控制(详见 oadingOption),内置6种特效。 过渡 showLoadingloadingOption显示 loading(读取中),例子 附加 iself sideLoading void] 过渡控制 隐藏 Loading(读取中) ECharts没有主动绑定 Resize事件,显示区域大小发生改变 iself] resize void}内部并未捕获,可根据需求在需要的时机调用 resize实现 区域变化自适应效果。 更新 [self] refresh void}刷新图表,图例选择、数据区域缩放,拖拽状态均保持。 [self] restore od}还原图表为最初展现时的状态,各种状态均被清除。 [self clear Wod}清空绘画内容,清空后实例可用。 8 VOI 释放 dispose 释放图表实例,释放后实例不再可用。BPce 使用后释放 Interface JEChauets 实例方法 实例指的就是接口ini返回的对象,即上页代码中的 my Chart”,支持链式调用 类型 名称 参数 描述 tObject] getoption vod}返回内部持有的当前显示 option克隆 oBject void] 返回内部持有的当前显示eres克隆,效果同 getSeries getoption(series 附加 REnder ovoid 获取当前图表所用 ZRende实例,可用于添加额外图形或 getzrender 进行深度定制, render接口详见 REnder (string stng=}获取当前图表的Bae64图片 dataURL, img Type图片类 getDataURL imgType型,支持 pnglipeg,默认为png img Dom} (string=}获取一个当前图表的mg, img Type图片类型,支持 getImage imgType pnglipeg,默认为png son Best Practice 还有无法满足的显示需求? getzrender自己画 【实例截图】
【核心代码】