echarts有哪些图表2.0图表切换需要引入哪些js 做地图需要引用 echarts有哪些图表 哪些js

当前位置: >>
名词解析基本名词 名词 chart axis xAxis yAxis grid legend dataRange dataZoom toolbox tooltip timeline series 直角坐标系中的一个坐标轴,坐标轴可分为类目轴和数值轴 直角坐标系中的横轴,通常并默认为类目轴 直角坐标系中的纵轴,通常并默认为数值轴 直角坐标系中除坐标轴外的绘图网格 图例,
表述数据和图形的关联 值域选择,常用于展现地域数据时选择值域范围 数据区域缩放,常用于展现大数据时选择可视范围 辅助工具箱,辅助功能,如添加标线,框选缩放等 气泡提示框,常用于展现更详细的数据 时间轴,常用于展现同一组数据在时间维度上的多份数据 数据系列,一个图表可能包含多个系列,每一个系列可能包含多个数据 描述 是指一个完整的图表,如折线图,饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表,可能包括坐标轴、图例等 图表名词名词line bar scatter k pie radar chord force map 折线图,堆积折线图,区域图,堆积区域图。 柱形图(纵向),堆积柱形图,条形图(横向),堆积条形图。描述散点图,气泡图。散点图至少需要横纵两个数据,更高维度数据加入时可以映射为颜色或大小,当映射到大小时则为气泡图 K 线图,蜡烛图。常用于展现股票交易数据。 饼图,圆环图。饼图支持两种(半径、面积)南丁格尔玫瑰图模式。 雷达图,填充雷达图。高维度数据展现的常用图表。 和弦图。常用于展现关系数据,外层为圆环图,可体现数据占比关系,内层为各个扇形间相互连接的弦,可体现关系数据 力导布局图。常用于展现复杂关系网络聚类布局。 地图。内置世界地图、中国及中国 34 个省市自治区地图数据、可通过标准 GeoJson 扩展地图类型。支持 svg 扩展类地图应用,如室内地图、运 动场、物件构造等。图表类型图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表: 引入 EChartsecharts 提供多种引入方式,请根据你的项目类型选择合适的方式:模块化包引入如果你熟悉模块化开发,你的项目本身就是模块化且遵循 AMD 规范的,那引入 echarts 将很简单,只需要配置好 packet 路径指向 src 即可,你将享受到 图表的按需加载等最大的灵活性,由于 echarts 依赖底层 zrender,你需要同时下载 zrender 到本地,可参考 demo,你需要配置如下。 需要注意的是,包引入提供了开发阶段最大的灵活性,但并不适合直接上线,减少请求的文件数量是前端性能优化中最基本但很重要的规则,务必在上 线时做文件的连接压缩。//from echarts example 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 下,你需要配置如下://from echarts example require.config({ paths:{ 'echarts':'./js/echarts', 'echarts/chart/bar' : './js/echarts', 'echarts/chart/line': './js/echarts' } }); // 把所需图表指向单文件require.config 配置后后就可以通过动态加载使用 echarts//from echarts example require( [ 'echarts', 'echarts/chart/line', 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(domMain); var option = { ... } // 按需加载所需图表 myChart.setOption(option); } );总结来说,模块化引入 ECharts,你都需要如下 4 步: 1. 2. 3. 4. 引入一个模块加载器,如 esl.js 或者 require.js 为 ECharts 准备一个具备大小(宽高)的 Dom(当然可以是动态生成的) 为模块加载器配置 echarts 的路径,从当前页面链接到 echarts.js,见上述说明 动态加载 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')//from echarts example &script src=&example/www2/js/echarts-plain.js&&&/script& &script& var myChart = echarts.init(domMain); var option = { ... } 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 以构建你的最佳配置, 你甚至可以 在终端里通过命令行参数的方式运行 node build.js 构建脚本,具体示例:node build.js optimize=true exclude=map,force,line output=echarts.js plain=true参数说明:名称optimize exclude output plain 是否压缩, 默认 false 不打包的图表,多个图表使用逗号分割, 默认使用所有图表 输出打包地址,默认为 echarts.js描述是否打包 esl, 打包的话可以直接使用 scripts 标签引入, 默认 false更详细的配置在 build/config-tpl.js 目录下,具体的配置项使用可以参考 requirejs optimizer 的 example build file,要注意的的是 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 实例,其中 dom 为图表所在节点,theme 为可选的主题,内置主题(暂无)直接传入 名称,自定义扩展主题可传入主题对象{dom} dom, {ECharts}init {string | Object =}theme 图表实例可用方法见方法引入 ECharts 后的的初始化代码如下:// 作为入口 require( [ 'echarts', 'echarts/chart/pie' ], function (ec) { var myChart = ec.init(document.getElementById('main')); myChart.setOption({...}); } ); // ----------------------------// 非入口或再次使用,图表已被加载注册 require('echarts').init(dom).setOption({...}); // 如果需要再次使用 ECharts 的图表实例,建议你还是保存 init 返回的图表实例吧 var myChart = require('echarts').init(dom); myChart.setOption({...});熟悉模块化的你可以跳过了下面代码了// 不习惯模块化的你当然可以 require(['echarts'], function (ec){ echarts = }); // 是的,把 echarts 加载后保存起来作为命名空间使用实例方法实例指的就是接口 init()返回的对象,即上述代码中的“myChart”,非 get 接口均返回自身 self 支持链式调用名称参数描述万能接口,配置图表实例任何可配置选项(详见 option),多次调用时 option 选项默认是合 并(merge)的,merge 的设计可以让 setOption 很方便的成为更新任何属性的万能方法,比 如你仅需要改 title 文字,则仅需要: setOption({title : {text : '新标题'}}); 如果不需要,可以通过 notMerger 参数为 true 阻止与上次 option 的合并,如多次 setOption 间数据改变、长度不一致等的场景。 2.0.0 起支持 timeline 组件,option 中包含 timeline(详见 timeline)时每一个独立的 option 应该放置到命名为 options 的数组内,如{self}setOption{Object} option, {boolean=} notMergemyCharts.setOption({ timeline : {...}, options : [ { // option1 title : {...}, series : [...] }, {...}, ... ] }); // option2 {Object}getOption {self}setSeries {Object}getSeries{void} {Array} series, {boolean=} notMerge {void} 单组数据: {number} seriesIdx {number | Object} data {boolean=} isHead {boolean=} dataGrow {string=} additionData 多组数据添加: {Array} params {number} seriesIdx {Object} markData返回内部持有的当前显示 option 克隆(拷贝)。 数据接口,驱动图表生成的数据内容(详见 series),效果等同调用 setOption({series : {...}}) 返回内部持有的当前显示 series 克隆(拷贝),效果同 return getOption().series 动态数据接口,try this (Line & Bar) ? try this (Scatter & K) ? try this (Pie & Radar) ? seriesIdx 系列索引 data 增加数据 isHead 是否队头加入,默认,不指定或 false 时为队尾插入 dataGrow 是否增长数据队列长度,默认,不指定或 false 时移出目标数组对位数据 additionData 是否增加类目轴(饼图为图例)数据,附加操作同 isHead 和 dataGrow 多组数据添加时参数为: params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]] 新增标注接口,其中 seriesIdx 系列索引 markData [标注]对象,同 series.markPoint,支持多个 新增标线接口,其中 seriesIdx 系列索引 markData [标线]对象,同 series.markLine,支持多个 删除单个标注接口,其中 seriesIdx 系列索引 markName [标注]名称 删除单个标线接口,其中 seriesIdx 系列索引 markName [标线]名称 事件绑定,事件命名统一挂载到 require('echarts/config').EVENT(非模块化为 echarts.config.EVENT)命名空间下,建议使用此命名空间作为事件名引用,当前版本支持事 件有: REFRESH(刷新),RESTORE(还原),RESIZE(显示空间变化),CLICK(点击), HOVER(悬浮), DATA_CHANGED(数据修改),DATA_VIEW_CHANGED(数据视图修改),{self}addData{self}addMarkPoint{self}addMarkLine{number} seriesIdx {Object} markData{self}delMarkPoint{number} seriesIdx {string} markName{self}delMarkLine{number} seriesIdx {string} markName{self} on{string} eventName, {Function}eventListener MAGIC_TYPE_CHANGED(动态类型切换),TIMELINE_CHANGED(时间轴变化), DATA_ZOOM(数据区域缩放),DATA_RANGE(值域漫游),MAP_ROAM(地图漫游), LEGEND_SELECTED(图例选择),MAP_SELECTED(地图选择),PIE_SELECTED(饼 图选择) 事件调试 ? {self} un {self}setTheme {string} eventName, {Function}eventListener {string | Object} theme 事件解绑定 设置主题,内置主题(暂无)直接传入名称,自定义扩展主题可传入主题对象 多图联动,传入联动目标为 EChart 实例,支持数组。多图联动支持直角系下 tooltip 联动,保 存图片的自动拼接,同时支持的联动事件有: REFRESH,RESTORE,MAGIC_TYPE_CHANGED DATA_ZOOM,DATA_RANGE,LEGEND_SELECTED 多图联动 ? 解除已连结的多图联动 过渡控制(详见 loadingOption),显示 loading(读取中) try this ? 过渡控制,隐藏 loading(读取中) 获取当前图表所用 ZRender 实例,可用于添加额外图形或进行深度定制,zrender 接口详见 ZRender 获取当前图表的 Base64 图片 dataURL,imgType 图片类型,支持 png|jpeg,默认为 png 获取一个当前图表的 img,imgType 图片类型,支持 png|jpeg,默认为 png ECharts 没有绑定 resize 事件,显示区域大小发生改变内部并不知道,使用方可以根据自己 的需求绑定关心的事件,主动调用 resize 达到区域更新的效果。 刷新图表,图例选择、数据区域缩放,拖拽状态均保持。 还原图表,各种状态均被清除,还原为最初展现时的状态。 清空绘画内容,清空后实例可用 释放图表实例,释放后实例不再可用{self}connect{ECharts | Array &ECharts&}connectTarget{self}disConnect {self}showLoading {self}hideLoading{ECharts | Array &ECharts&}connectTarget {Object} loadingOption {void}{ZRender}getZrender {void} {string}getDataURL {Dom}getImage {self} resize {self} refresh {self} restore {self} clear {void}dispose {string=} imgType {string=} imgType {void} {void} {void} {void} {void} 选项option图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项名称{color}backgroundColor {Array} color描述全图默认背景,(详见 backgroundColor),默认为无,透明 数值系列的颜色列表,(详见 color),可配数组,eg:['#87cefa', 'rgba(123,123,123,0.5)','...'],当系列数量个数比颜色列表长 度大时将循环选取{boolean}renderAsImage 非 IE8-支持渲染为图片,(详见 renderAsImage) {boolean} calculable 是否启用拖拽重计算特性, 默认关闭, (详见 calculable, 相关的还有 calculableColor,calculableHolderColor,nameConnector, valueConnector) 是否开启动画,默认开启,(详见 animation,相关的还有 addDataAnimation, animationThreshold, animationDuration, animationEasing) 时间轴(详见 timeline),每个图表最多仅有一个时间轴控件 标题(详见 title),每个图表最多仅有一个标题控件 工具箱(详见 toolbox),每个图表最多仅有一个工具箱 提示框(详见 tooltip),鼠标悬浮交互时的信息提示 图例(详见 legend),每个图表最多仅有一个图例,混搭图表共享 值域选择(详见 dataRange),值域范围 数据区域缩放(详见 dataZoom),数据展现范围选择 直角坐标系内绘图网格(详见 grid) 直角坐标系中横轴数组(详见 xAxis),数组中每一项代表一条横轴坐标轴,标准(1.0)中规定最多同时存在 2 条横轴 直角坐标系中纵轴数组(详见 yAxis),数组中每一项代表一条纵轴坐标轴,标准(1.0)中规定最多同时存在 2 条纵轴 驱动图表生成的数据内容(详见 series),数组中每一项代表一个系列的特殊选项及数据{boolean} animation {Object} timeline {Object} title {Object} toolbox {Object} tooltip {Object} legend {Object} dataRange {Object} dataZoom {Object} grid {Array | Object} xAxis {Array | Object} yAxis {Array} seriestimeline 时间轴,每个图表最多仅有一个时间轴控件,try bar ?、scatter ?、pie ?、map ?名称{boolean} show {string} type {boolean} notMerge {boolean} realtime {number | string} x {number | string} y {number | string} x2 {number | string} y2 {number} width {number} height true 'time' false true 80 null 80 0 自适应 50默认值描述显示策略,可选为:true(显示) | false(隐藏) 模式是时间类型,时间轴间隔根据时间跨度计算,可选为:'number' 时间轴上多个 option 切换时是否进行 merge 操作,同 setOption 第二个参数(详见实例 方法) 拖拽或点击改变时间轴是否实时显示 时间轴左上角横坐标,数值单位 px,支持百分比(字符串),如'50%'(显示区域横向中心) 时间轴左上角纵坐标, 数值单位 px, 支持百分比 (字符串) , 默认无, 随 y2 定位, 如'50%'(显 示区域纵向中心) 时间轴右下角横坐标,数值单位 px,支持百分比(字符串),如'50%'(显示区域横向中心) 时间轴右下角纵坐标,数值单位 px,支持百分比(字符串),如'50%'(显示区域纵向中心) 时间轴宽度,默认为总宽度 - x - x2,数值单位 px,指定 width 后将忽略 x2。见下图。 支持百分比(字符串),如'50%'(显示区域一半的宽度) 时间轴高度,数值单位 px,支持百分比(字符串),如'50%'(显示区域一半的高度) 背景颜色,默认透明。 边框线宽 边框颜色。 内边距,单位 px,默认各方向内边距为 5,接受数组分别设定上右下左边距,同 css,见 下图 播放控制器位置,可选为:'left' | 'right' | 'none' 是否自动播放 是否循环播放 播放时间间隔,单位 ms{color}backgroundColor 'rgba(0,0,0,0)' {number} borderWidth {color} borderColor 0 '#ccc'{number | Array}padding 5 {string} controlPosition {boolean} autoPlay {boolean} loop {number} playInterval {Object} lineStyle {Object} label 'left' false true 2000{color: '#666', width: 1, type: 'dashed'} 时间轴轴线样式,lineStyle 控制线条样式,(详见 lineStyle) { 时间轴标签文本 show: true, interval: 'auto', rotate: 0, formatter: null, textStyle: { color: '#333' } }show : 是否显示 interval : 挑选间隔,默认为'auto',可选为:'auto'(自动隐藏显示不下的) | 0(全部显 示) | {number} rotate : 旋转角度,默认为 0,不旋转,正值为逆时针,负值为顺时针,可选为:-90 ~ 90 formatter : 间隔名称格式器:{string}(Template) | {Function} textStyle : 文字样式(详见 textStyle){ symbol : 'auto', symbolSize : 'auto', color : 'auto', borderColor : 'auto', borderWidth : 'auto', label: { show: false, textStyle: { color: 'auto' } } } { {Object} controlStyle } {string} symbol {number} symbolSize {number} currentIndex {Array} data 'emptyDiamond' 4 0 [] 轴点 symbol,同 serie.symbol 轴点 symbol,同 serie.symbolSize 当前索引位置,对应 options 数组,用于指定显示特定系列 时间轴列表,同时也是轴 label 内容 normal : { color : '#333'}, emphasis : { color : '#1e90ff'} 时间轴控制器样式,可指定正常和高亮颜色 时间轴当前点 symbol : 当前点 symbol,默认随轴上的 symbol symbolSize : 当前点 symbol 大小,默认随轴上 symbol 大小 color : 当前点 symbol 颜色,默认为随当前点颜色,可指定具体颜色,如无则为'#1e90ff' borderColor : 当前点 symbol 边线颜色 borderWidth : 当前点 symbol 边线宽度 label 同上{Object}checkpointStyle title标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题。名称{string} text {string} link {string} target {string} subtext {string} sublink {string} subtarget {string | number} x {string | number} y {string} textAlign {color} backgroundColor {string} borderColor {number} borderWidth {number | Array} padding {number} itemGap '' '' null '' '' null 'left' 'top' null默认值主标题文本,'\n'指定换行 主标题文本超链接描述指定窗口打开主标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口) 副标题文本,'\n'指定换行 副标题文本超链接 指定窗口打开副标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口) 水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x 坐标,单位 px) 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y 坐标,单位 px) 水平对齐方式,默认根据 x 设置自动调整,可选为: left' | 'right' | 'center 标题背景颜色,默认透明 标题边框颜色 标题边框线宽,单位 px,默认为 0(无边框) 标题内边距,单位 px,默认各方向内边距为 5,接受数组分别设定上右下左边距,同 css,见下图 主副标题纵向间隔,单位 px,默认为 10'rgba(0,0,0,0)' '#ccc' 0 5 5 { fontSize: 18, fontWeight: 'bolder', color: '#333'{Object} textStyle主标题文本样式(详见 textStyle) } {Object} subtextStyle {color: '#aaa'} 副标题文本样式(详见 textStyle)toolbox工具箱,每个图表最多仅有一个工具箱。try this ?名称{boolean} show {string} orient {string | number} x false 'horizontal' 'right'默认值描述显示策略,可选为:true(显示) | false(隐藏) 布局方式,默认为水平布局,可选为:'horizontal' | 'vertical' 水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x 坐标,单 位 px) 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y 坐标, 单位 px) 工具箱背景颜色,默认透明 工具箱边框颜色 工具箱边框线宽,单位 px,默认为 0(无边框) 工具箱内边距,单位 px,默认各方向内边距为 5,接受数组分别设定上右下左边距,同 css,见下图 各个 item 之间的间隔,单位 px,默认为 10,横向布局时为水平间隔,纵向布局时为纵 向间隔,见下图 工具箱 icon 大小,单位(px){string | number} y'top'{color}backgroundColor 'rgba(0,0,0,0)' {string}borderColor {number}borderWidth {number | Array} padding {number}itemGap {number}itemSize '#ccc' 0 510 16 {Array &color&}color {boolean}showTitle {Object}textStyle['#1e90ff','#22bb22','#4b0082','#d2691e'] true {}{ mark : { show : false, title : { mark : '辅助线开关', markUndo : '删除辅助线', markClear : '清空辅助线' }, lineStyle : { width : 2, color : '#1e90ff', type : 'dashed' } },工具箱 icon 颜色序列,循环使用,同时支持在具体 feature 内指定 color 是否显示工具箱文字提示,默认启用 工具箱提示文字样式,(详见 textStyle) 启用功能,目前支持 feature 见下,工具箱自定义功能回调处理,见 try this ??mark,辅助线标志,上图 icon 左数 1/2/3,分别是启用,删除上一条,删除全部, 可设置更多属性 o 可传入 lineStyle(详见 lineStyle)控制线条样式{Object} feature? show : false, title : { dataZoom : '区域缩放', dataZoomReset : '区域缩放后dataZoom : {dataZoom,框选区域缩放,自动与存在的 dataZoom 控件同步,上图 icon 左数 4/5,分别是启用,缩放后退退' } }, dataView : { show : false, title : '数据视图', readOnly: false, lang : ['Data View', 'close', 'refresh'] },?magicType,动态类型切换,支持直角系下的折线图、柱状图、堆积、平铺转换, 上图 icon 左数 6/7/8/9,分别是切换折线图,切换柱形图,切换为堆积,切换为 平铺 o {Array} type ['line', 'bar', 'stack', 'tiled']?dataView,数据视图,上图 icon 左数 10,打开数据视图,可设置更多属性 o {boolean=} readOnly 默认数据视图为只读,可指定 readOnly 为 false magicType: { show : false, title : { line : '折线图切换', bar : '柱形图切换', stack : '堆积', tiled : '平铺' }, type : [] }, restore : { show : false, title : '还原' }, saveAsImage : { show : false, title : '保存为图片', type : 'png', lang : ['点击保存'] } } ? ? o o o打开编辑功能 {Function=} optionToContent 自主编排数据视图的显示内容 {Function=} contentToOption 当数据视图 readOnly 为 false 时, 会出现 刷新按钮,如果是自主编排的显示内容,如何翻转也请自理 {Array=} lang 数据视图上有三个话术,默认是['Data View', 'close', 'refresh'],如需改写,可自定义restore,还原,复位原始图表,上图 icon 左数 11saveAsImage,保存图片(IE8-不支持),上图 icon 左数 12,可设置更多属性 o {string=} type 默认保存图片类型为'png',需改为'jpeg' o {string=} name 指定图片名称, 如不指定, 则用图表 title 标题, 如无 title 标题则图片名称默认为“ECharts” o {string=} lang 非 IE 浏览器支持点击下载,有保存话术,默认是“点击保 存”,可修改tooltip提示框,鼠标悬浮交互时的信息提示。try this ?名称{boolean} show true默认值描述显示策略,可选为:true(显示) | false(隐藏) tooltip 主体内容显示策略,只需 tooltip 触发事件或显示 axisPointer 而不需要显示内容时可配置 该项为 falase, 可选为:true(显示) | false(隐藏) 触发类型,默认数据触发,见下图,可选为:'item' | 'axis' 位置指定,传入{Array},如[x, y], 固定位置[x, y];传入{Function},如 function([x, y]) {return{boolean}showContenttrue{string} trigger {Array | Function}position'item' null [newX,newY]},默认显示坐标为输入参数,用户指定的新坐标为输出返回。 {string | Function}formatter {string | Function}islandFormatter {number} showDelay {number} hideDelay {number}transitionDuration {color}backgroundColor {string} borderColor {number}borderRadius {number} borderWidth {number | Array}padding null '{a} & br/&{b} : {c}' 20 100 0.4 'rgba(0,0,0,0.7)' '#333' 4 0 5 { type : 'line', lineStyle : { color: '#48b', width: 2, type: 'solid' }, crossStyle : { color: '#1e90ff', width: 1, type: 'dashed' }, shadowStyle : { size: 'auto', color: 'rgba(150,150,150,0.3)' 内容格式器:{string}(Template) | {Function},支持异步回调见表格下方 拖拽重计算独有,数据孤岛内容格式器:{string}(Template) | {Function},见表格下方 显示延迟,添加显示延迟可以避免频繁切换,特别是在详情内容需要异步获取的场景,单位 ms 隐藏延迟,单位 ms 动画变换时长,单位 s,如果你希望 tooltip 的跟随实时响应,showDelay 设置为 0 是关键,同 时 transitionDuration 设 0 也会有交互体验上的差别。 提示背景颜色,默认为透明度为 0.7 的黑色 提示边框颜色 提示边框圆角,单位 px,默认为 4 提示边框线宽,单位 px,默认为 0(无边框) 提示内边距,单位 px,默认各方向内边距为 5,接受数组分别设定上右下左边距,同 css{Object} axisPointer坐标轴指示器, 坐标轴触发有效, 默认 type 为 line, 可选为: 'line' | 'cross' | 'shadow' | 'none'(无), 指定 type 后对应 style 生效,见下 lineStyle 设置直线指示器(详见 lineStyle), crossStyle 设置十字准星指示器(详见 lineStyle), shadowStyle 设置阴影指示器(详见 areaStyle),areaStyle.size 默认为'auto'自动计算,可指 定具体宽度 } } {Object} textStyle { color:'#fff' } 文本样式,默认为白色字体(详见 textStyle)内容格式器 formatter:try this ???{string},模板(Template),其变量为: o {a} | {a0} o {b} | {b0} o {c} | {c0} o {d} | {d0} (部分图表类型无此项) o 多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ... o 其中变量 a、b、c、d 在不同图表类型下代表数据含义为: ? 折线(区域)图、柱状(条形)图、K 线图 : a(系列名称),b(类目值),c(数值), d(无) ? 散点图(气泡)图 : a(系列名称),b(数据名称),c(数值数组), d(无) ? 地图 : a(系列名称),b(区域名称),c(合并数值), d(无) ? 饼图、雷达图、仪表盘、漏斗图: a(系列名称),b(数据项名称),c(数值), d(饼图:百分比 | 雷达图:指标名称) ? 弦图 : a(系列名称),b(项 1 名称),c(项 1-项 2 值),d(项 2 名称), e(项 2-项 1 值) ? 力导向图 : ? 节点 : a(类目名称),b(节点名称),c(节点值) ? 边 : a(系列名称),b(源名称-目标名称),c(边权重), d(如果为 true 的话则数据来源是边) {Function},传递参数列表如下: o &Array& params : 数组内容同模板变量,[[a, b, c, d], [a1, b1, c1, d1], ...] o &String& ticket : 异步回调标识 o &Function& callback : 异步回调,回调时需要两个参数,第一个为前面提到的 ticket,第二个为填充内容 html触发类型:item 触发axis 触发 legend图例,每个图表最多仅有一个图例。try this ?名称{string} orient {string | number} x {string | number} y {color} backgroundColor {string} borderColor {number} borderWidth {number | Array} padding {number} itemGap {Object} textStyle默认值'horizontal' 'center' 'top'描述布局方式,默认为水平布局,可选为:'horizontal' | 'vertical' 水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x 坐标,单位 px) 垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y 坐标,单位 px)'rgba(0,0,0,0)' 图例背景颜色,默认透明 '#ccc' 0 5 10 {color: '#333'} 图例边框颜色 图例边框线宽,单位 px,默认为 0(无边框) 图例内边距,单位 px,默认各方向内边距为 5,接受数组分别设定上右下左边距,同 css,见下图 各个 item 之间的间隔,单位 px,默认为 10,横向布局时为水平间隔,纵向布局时为纵向间隔,见下图 默认只设定了图例文字颜色(详见 textStyle) ,更个性化的是,要指定文字颜色跟随图例,可设 color 为'auto' 选择模式,默认开启图例开关,可选 single,multiple 配置默认选中状态,可配合 LEGEND.SELECTED 事件做动态数据载入,try this ? 图例内容数组,数组项通常为{string},每一项代表一个系列的 name。 使用根据该值索引 series 中同名系列所用的图表类型和 itemStyle,如果索引不到,该 item 将默认为没 启用状态。 如需个性化图例文字样式,可把数组项改为{Object},知道文本样式和个性化图例 icon,格式为 {{boolean | string} selectedMode true {Object} selected null{Array} data[] name : {string}, textStyle : {Object}, icon : {string} }dataRange值域选择,每个图表最多仅有一个值域控件。try this ?名称{string} orient {string | number} x默认值'vertical' 'left'描述布局方式,默认为垂直布局,可选为:'horizontal' | 'vertical' 水平安放位置,默认为全图左对齐,可选为:'center' | 'left' | 'right' | {number}(x 坐标,单位 px) 垂直安放位置,默认为全图底部,可选为:'top' | 'bottom' | 'center' | {number}(y 坐标,单位 px) 值域控件背景颜色,默认透明 值域控件边框颜色 值域控件边框线宽,单位 px,默认为 0(无边框) 值域控件内边距,单位 px,默认各方向内边距为 5,接受数组分别设定上右下左边距,同 css, 见下图 各个 item 之间的间隔,单位 px,默认为 10,横向布局时为水平间隔,纵向布局时为纵向间隔, 见下图 值域控件图形宽度 值域控件图形高度 指定的最小值,eg: 0,默认无,必须参数{string | number} y {color}backgroundColor {string} borderColor {number} borderWidth {number | Array}padding'bottom' 'rgba(0,0,0,0)' '#ccc' 0 5{number} itemGap {number} itemWidth {number} itemHeight {number} min10 20 14 null {number} max {number} precision {number} splitNumber {boolean} calculable {boolean} realtime {Array} colornull 0 5 false true ['#1e90ff','#f0ffff']指定的最大值,eg: 100,默认无,必须参数 小数精度,默认为 0,无小数点,当 min ~ max 间在当前精度下无法整除 splitNumber 份时, 精度会自动提高以满足均分,不支持不等划分 分割段数,默认为 5,为 0 时为线性渐变,calculable 为 true 是默认均分 100 份 是否启用值域漫游,启用后无视 splitNumber,值域显示为线性渐变 值域漫游是否实时显示 值域颜色标识,颜色数组长度必须&=2,颜色代表从数值高到低的变化,即颜色数组低位代表 数值高的颜色标识 内容格式器:{string}(Template) | {Function},模板变量为'{value}'和'{value2}',代表数值起 始值和结束值,函数参数两个,含义同模板变量,try this ? 值域文字显示,splitNumber 生效时默认以计算所得数值作为值域文字显示,可指定长度为 2 的文本数组显示简介的值域文本,如['高', '低'],'\n'指定换行 默认只设定了值域控件文字颜色(详见 textStyle){string | Function}formatternull{Array} text {Object} textStylenull {color: '#333'}dataZoom数据区域缩放。与 toolbox.feature.dataZoom 同步,仅对直角坐标系图表有效。try this ?名称默认值描述 {boolean} show {string} orient {number} xfalse 'horizontal' 自适应 自适应 自适应 | 30 自适应 | 30 'rgba(0,0,0,0)'是否显示, 当 show 为 true 时则接管使用指定类目轴的全部系列数据, 如不指定则接管全部直角坐 标系数据。 布局方式,默认为水平布局,可选为:'horizontal' | 'vertical' 水平安放位置,默认为根据 grid 参数适配,纵向布局默认左侧,可指定 {number}(左上角 x 坐标, 单位 px) 垂直安放位置,默认为根据 grid 参数适配,纵向布局默认下方,可指定 {number}(左上角 y 坐标, 单位 px) 指定宽度,横向布局时默认为根据 grid 参数适配, 纵向布局是默认为 30,可指定 {number} (宽度, 单位 px) 指定高度,纵向布局时默认为根据 grid 参数适配, 横向布局是默认为 30,可指定 {number} (高度, 单位 px) 背景颜色,默认透明 数据缩略背景颜色{number} y{number} width{number} height {color} backgroundColor{color}dataBackgroundColor '#ccc' {color} fillerColor {color} handleColor {Array | number}xAxisIndex'rgba(144,197,237,0.2)' 选择区域填充颜色 'rgba(70,130,180,0.8)' null 控制手柄颜色 当不指定时默认控制所有横向类目,可通过数组指定多个需要控制的横向类目坐标轴 Index,仅一 个时可直接为数字 当不指定时默认控制所有纵向类目,可通过数组指定多个需要控制的纵向类目坐标轴 Index,仅一 个时可直接为数字 数据缩放,选择起始比例,默认为 0(%),从首个数据起选择。 数据缩放,选择结束比例,默认为 100(%),到最后一个数据选择结束。 缩放变化是否实时显示,建议性能较低的浏览器或数据量巨大时不启动实时效果。 数据缩放锁,默认为 false,当设置为 true 时选择区域不能伸缩,即(end - start)值保持不变,仅能 做数据漫游。{Array | number}yAxisIndex {number} start {number} end {boolean} realtime {boolean} zoomLocknull 0 100 false false grid直角坐标系内绘图网格名称{number | string} x {number | string} y {number | string} x2 {number | string} y2 80 60 80 60默认值描述直角坐标系内绘图网格左上角横坐标,数值单位 px,支持百分比(字符串),如'50%'(显示区域横向中心) 直角坐标系内绘图网格左上角纵坐标,数值单位 px,支持百分比(字符串),如'50%'(显示区域纵向中心) 直角坐标系内绘图网格右下角横坐标,数值单位 px,支持百分比(字符串),如'50%'(显示区域横向中心) 直角坐标系内绘图网格右下角纵坐标,数值单位 px,支持百分比(字符串),如'50%'(显示区域纵向中心) 直角坐标系内绘图网格(不含坐标轴)宽度,默认为总宽度 - x - x2,数值单位 px,指定 width 后将忽略 x2, 见下图。 支持百分比(字符串),如'50%'(显示区域一半的宽度) 直角坐标系内绘图网格(不含坐标轴)高度,默认为总宽度 - y - y2,数值单位 px,指定 height 后将忽略 y2, 见下图。 支持百分比(字符串),如'50%'(显示区域一半的高度){number} width自适应{number} height自适应{color} backgroundColor 'rgba(0,0,0,0)' 背景颜色,默认透明。 {number} borderWidth {color} borderColor 1 '#ccc' 边框线宽 边框颜色。 xAxis直角坐标系中横轴数组,数组中每一项代表一条横轴坐标轴,仅有一条时可省略数值。最多同时存在 2 条横轴,单条横轴时可指定安放于 grid 的底部(默 认)或顶部,2 条同时存在时位置互斥,默认第一条安放于底部,第二条安放于顶部。 坐标轴有两种类型,类目型和数值型(区别详见 axis),横轴通常为类目型,但条形图时则横轴为数值型,散点图时则横纵均为数值型,具体参数详见 axis。yAxis直角坐标系中纵轴数组,数组中每一项代表一条纵轴坐标轴,仅有一条时可省略数值。最多同时存在 2 条纵轴,单条纵轴时可指定安放于 grid 的左侧(默 认)或右侧,2 条同时存在时位置互斥,默认第一条安放于左侧,第二条安放于右侧。 坐标轴有两种类型,类目型和数值型(区别详见 axis),纵轴通常为数值型,但条形图时则纵轴为类目型,具体参数详见 axis。axis坐标轴有两种类型,类目型和数值型,他们的区别在于:? ?类目型:需要指定类目列表,坐标轴内有且仅有这些指定类目坐标 数值型:需要指定数值区间,坐标轴内包含数值区间内容全部坐标下面是坐标轴的全部选项,其中个别选项仅在类目型或数值型时有效,请注意适用类型。try this ?名称{string} type默认值'category' | 'value'适用类型通用描述坐标轴类型,横轴默认为类目型'category',纵轴默认为数值型'value' {string} position {string} name {string}nameLocation {Object}nameTextStyle {boolean}boundaryGap {Array}boundaryGap {number} min {number} max {boolean} scale {number} precision {number} power {number}splitNumber {Object} axisLine'bottom' | 'left' '' 'end' {} true [0, 0] null null false 0 100 5 {show : true}通用 数值型 数值型 数值型 类目型 数值型 数值型 数值型 数值型 数值型 数值型 数值型 通用 通用 通用 通用 通用 类目型坐标轴类型, 横轴默认为类目型'bottom', 纵轴默认为数值型'left', 可选为: 'bottom' | 'top' | 'left' | 'right' 坐标轴名称,默认为空 坐标轴名称位置,默认为'end',可选为:'start' | 'end' 坐标轴名称文字样式,默认取全局配置,颜色跟随 axisLine 主色,可设 类目起始和结束两端空白策略,见下图,默认为 true 留空,false 则顶头 数值轴两端空白策略,数组内数值代表百分比,[原始数据最小值与最终最小值之间的差 额,原始数据最大值与最终最大值之间的差额] 指定的最小值, eg: 0, 默认无, 会自动根据具体数值调整, 指定后将忽略 boundaryGap[0] 指定的最大值,eg: 100,默认无,会自动根据具体数值调整,指定后将忽略 boundaryGap[1] 脱离 0 值比例,放大聚焦到最终_min,_max 区间 小数精度,默认为 0,无小数点 整数精度,默认为 100,个位和百位为 0 分割段数,默认为 5 坐标轴线,默认显示,属性 show 控制显示与否,属性 lineStyle(详见 lineStyle)控制 线条样式 坐标轴小标记,默认不显示,属性 show 控制显示与否,属性 length 控制线长,属性 lineStyle(详见 lineStyle)控制线条样式 坐标轴文本标签,详见 axis.axisLabel 分隔线,默认显示,属性 show 控制显示与否,属性 lineStyle(详见 lineStyle)控制线 条样式 分隔区域,默认不显示,属性 show 控制显示与否,属性 areaStyle(详见 areaStyle)控 制区域样式 类目列表,同时也是 label 内容,详见 axis.data{Object} axisTick {Object} axisLabel {Object} splitLine{show : false} {show : true} {show : true}{Object} splitArea {Array} data boundaryGap 端空白策略{show : false} [] 设置 boundaryGap: trueboundaryGap: false效果scale 策略 设置 scale: false scale: true效果axis 属性说明 axis.axisLine 坐标轴线,默认显示且带如下样式:名称{boolean} show {boolean} onZero {Object} lineStyle axis.axisTick true true默认值适用类型通用 通用 通用描述是否显示,默认为 true,设为 false 后下面都没意义了 定位到垂直方向的 0 值坐标上 属性 lineStyle 控制线条样式,(详见 lineStyle){color: '#48b', width: 2, type: 'solid'}坐标轴小标记,默认不显示,默认样式见下:名称{boolean} show {string | number} interval {boolean} onGap {boolean} inside false 'auto' null false默认值适用类型通用 类目型 类目型 通用描述是否显示,默认为 false,设为 true 后下面为默认样式 小标记显示挑选间隔,默认为'auto',可选为: 'auto'(自动隐藏显示不下的) | 0(全部显示) | {number}(用户指定选择间隔) 小标记是否显示为间隔,默认等于 boundaryGap 小标记是否显示为在 grid 内部,默认在外部 {number} length {Object} lineStyle axis.axisLabel 坐标轴文本标签选项5 {color: '#333', width: 1}通用 通用属性 length 控制线长 属性 lineStyle 控制线条样式,(详见 lineStyle)名称{boolean} show {string | number}interval {number} rotate {number} margin {boolean} clickable {string | Function}formatter {Object} textStyle默认值true 'auto' 0 8 false null {color: '#333'}适用类型通用 类目型 通用 通用 通用 通用 通用描述是否显示,默认为 true,设为 false 后下面都没意义了 标签显示挑选间隔, 默认为'auto', 可选为: 'auto' (自动隐藏显示不下的) | 0 (全部显示) | {number} (用户指定选择间隔) 标签旋转角度,默认为 0,不旋转,正值为逆时针,负值为顺时针,可选为:-90 ~ 90 坐标轴文本标签与坐标轴的间距,默认为 8,单位 px 坐标轴文本标签是否可点击 间隔名称格式器:{string}(Template) | {Function} 文本样式(详见 textStyle),其中当坐标轴为数值型时,color 接受方法回调,实现个性化的颜色定 义,support#226 ?间隔名称格式器 formatter:? ?{string},模板(Template),其变量为: o {value}: 内容或值 {Function},传递参数同模板变量: o eg:function (value){return &星期& + &日一二三四五六&.charAt(value);'}axis.splitLine 分隔线,默认显示且带如下样式:名称{boolean} show {boolean} onGap true null默认值适用类型通用 类目型描述是否显示,默认为 true,设为 false 后下面都没意义了 分隔线是否显示为间隔,默认等于 boundaryGap {Object} lineStyle axis.splitArea{color: ['#ccc'], width: 1, type: 'solid'}通用属性 lineStyle 控制线条样式,(详见 lineStyle)分隔区域,默认不显示:名称{boolean} show false默认值适用类型通用 类目型描述是否显示,默认为 false,设为 true 后带如下默认样式 分隔区域是否显示为间隔,默认等于 boundaryGap 属性 areaStyle(详见 areaStyle)控制区域样式,颜色数组实 现间隔变换。{boolean} onGap null{Object}areaStyle {color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']} 通用 axis.data 类目型坐标轴文本标签数组,指定 label 内容。 数组项通常为文本,'\n'指定换行,如:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', ..., 'Dec']当需要对个别标签进行个性化定义时,数组项可用对象,接受 textStyle 设置个性化标签,如:[ 'Jav', 'Feb', 'Mar', { value:'Apr', textStyle:{ color : 'red' ... } }, 'May', '...' ] //文本内容,如指定间隔名称格式器 formatter,则这个值将被作为模板变量值或参数传入 //详见 textStylepolar极坐标: 名称{Array} center {number} radius {number}startAngle默认值['50%', '50%'] '75%' 90描述圆心坐标,支持绝对值(px)和百分比,百分比计算 min(width, height) * 50% 半径,支持绝对值(px)和百分比,百分比计算 min(width, height) / 2 * 75%, 开始角度, 有效输入范围:[-180,180] 分割段数,默认为 5{number}splitNumber 5{Object} name{ show:true, formatter:null, 坐标轴名称 textStyle:{color:#333} } 数值轴两端空白策略,数组内数值代表百分比,[原始数据最小值与最终最小值之间的差额,原始数据最大值 与最终最大值之间的差额] 脱离 0 值比例,放大聚焦到最终_min,_max 区间 小数精度,默认为 0,无小数点 整数精度,默认为 100,个位和百位为 0 坐标轴线,默认显示,属性 show 控制显示与否,属性 lineStyle(详见 lineStyle)控制线条样式 坐标轴文本标签,详见 axis.axisLabel 分隔线,默认显示,属性 show 控制显示与否,属性 lineStyle(详见 lineStyle)控制线条样式 分隔区域,默认不显示,属性 show 控制显示与否,属性 areaStyle(详见 areaStyle)控制区域样式 雷达指标列表,同时也是 label 内容,例子见下{Array}boundaryGap [0, 0] {boolean} scale {number} precision {number} power {Object} axisLine {Object} axisLabel {Object} splitLine {Object} splitArea {Array} indicatorindicator : [ {name : '外观'}, {name : '拍照', min : 0},false 0 100 {show : true} {show : false} {show : true} {show : true} []{name : '系统', min : 0, max : 100}, {name : '性能', axisLabel: {...}}, {name : '屏幕'} ] series(通用)驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据,其中个别选项仅在部分图表类型中有效,请注意适用类型:名称{string} name {Object} tooltip默认值 适用类型null null 通用 通用 通用 通用 通用 通用 通用描述系列名称,如启用 legend,该值将被 legend.data 索引相关 提示框样式,仅对本系列有效,如不设则用 option.tooltip(详见 tooltip),鼠标悬浮交互时的信息提示 图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示。可选为: 'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K 线图) 'pie'(饼图) | 'radar'(雷达图) | 'chord'(和弦图) | 'force'(力导向布局图) | 'map'(地图) 图形样式(详见 itemStyle) 数据(详见 series.data) 标注(详见 series.markPoint) 标线(详见 series.markLine){string} typenull{Object} itemStyle {Array} data {Array} markPoint {Array} markLine series(直角系)null [] {} {}驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据,其中个别选项仅在部分图表类型中有效,请注意适用类型:名称{string} stack默认值null适用类型折线图,柱状图描述组合名称,多组数据的堆积图时使用,eg:stack:'group1',则 series 数组中 stack 值 等于'group1'的数据做堆积计算{number}xAxisIndex0折线图,柱状图,散点图 ,K xAxis 坐标轴数组的索引,指定该系列数据所用的横坐标轴 线图 折线图,柱状图,散点图,K yAxis 坐标轴数组的索引,指定该系列数据所用的纵坐标轴 线图 柱状图 柱状图 柱状图 柱间距离,默认为柱形宽度的 30%,可设固定值 类目间柱形距离,默认为类目间距的 20%,可设固定值 柱条最小高度,可用于防止某 item 的值过小而影响交互{number}yAxisIndex0{number | string} barGap '30%' {number | string}barCategoryGap {number}barMinHeight '20%' 0 {number}barWidth {number}barMaxWidth自适应 自适应柱状图 ,K 线图 K 线图柱条(K 线蜡烛)宽度,不设时自适应 K 线蜡烛最大宽度,不设时自适应 标志图形类型,默认自动选择(8 种类型循环使用,不显示标志图形可设为'none'), 默认循环选择类型有: 'circle' | 'rectangle' | 'triangle' | 'diamond' | 'emptyCircle' | 'emptyRectangle' | 'emptyTriangle' | 'emptyDiamond' 另外,还支持五种更特别的标志图形'heart'(心形)、'droplet'(水滴)、'pin'(标注)、 'arrow'(箭头)和'star'(五角星),这并不出现在常规的 8 类图形中,但无论是在系 列级还是数据级上你都可以指定使用,同时,'star' + n(n&=3)可变化出 N 角星,如指 定为'star6'则可以显示 6 角星 自 1.3.5 起支持 symbol 为自定义图片,格式为'image://' + '图片路径', 如 'image://../asset/ico/favicon.png' 详见例子 this 》 标志图形大小,可计算特性启用情况建议增大以提高交互体验。实现气泡图时 symbolSize 需为 Function,气泡大小取决于该方法返回值,传入参数为当前数据项 (value 数组) 标志图形旋转角度[-180,180] 标志图形默认只有主轴显示(随主轴标签间隔隐藏策略),如需全部显示可把 showAllSymbol 设为 true 平滑曲线显示 启动大规模散点图 大规模散点图自动切换阀值,large 为 true 下有效{string} symbolnull折线图,散点图{number | Function}symbolSize {number}symbolRotate2|4折线图 (2),散点图(4) 折线图 ,散点图 折线图 折线图 散点图 散点图null{boolean}showAllSymbol false {boolean}smooth {boolean} large false false{number}largeThreshold 2000 series(饼图)驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:名称{Array} center {number | Array} radius默认值描述['50%', '50%'] 圆心坐标,支持绝对值(px)和百分比,百分比计算 min(width, height) * 50% [0, '75%'] 半径,支持绝对值(px)和百分比,百分比计算比,min(width, height) / 2 * 75%, 传数组实现环形图, [内半径,外半径] {number} startAngle {number} minAngle {boolean} clockWise {string} roseType {number} selectedOffset90 0 true null 10开始角度, 饼图(90)、仪表盘(225),有效输入范围:[-360,360] 最小角度,可用于防止某 item 的值过小而影响交互 显示是否顺时针 南丁格尔玫瑰图模式,'radius'(半径) | 'area'(面积) 选中是扇区偏移量 选中模式,默认关闭,可选 single,multiple{boolean | string}selectedMode null series(雷达图)驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:名称{number} polarIndex {string} symbol {number | Function} symbolSize {number} symbolRotate series(地图) 驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据: 0 null 2 null默认值极坐标索引描述同 series(直角系) 同 series(直角系) 同 series(直角系)名称{boolean | string}selectedMode null默认值选中模式,默认关闭,可选 single,multiple描述{string} mapType'china'地图类型,支持 world,china 及全国 34 个省市自治区。省市自治区的 mapType 直接使用简体中 文: 新疆, 西藏, 内蒙古, 青海, 四川, 黑龙江, 甘肃, 云南, 广西, 湖南, 陕西, 广东,吉林, 河北, 湖北, 贵州, 山东, 江西, 河南, 辽宁, 山西, 安徽, 福建, 浙江, 江苏,重庆, 宁夏, 海南, 台湾, 北京, 天津, 上海, 香港, 澳门' 支持子区域模式,通过主地图类型扩展出所包含的子区域地图,格式为'主地图类型|子区域名称', 如 'world|Brazil','china|广东',详见例子 this 》 {boolean} hoverable {Object} mapLocation {string}mapValueCalculation {number}mapValuePrecision {boolean}showLegendSymbol {boolean} roam {Object} scaleLimit {Object} nameMap {Object} textFixed {Object} geoCoord series(力导向布局图)true {x:'center',y:'center'} 'sum' 0 true false null null null null非数值显示(如仅用于显示标注标线时),可以通过 hoverable:false 关闭区域悬浮高亮 地图位置设置,默认只适应上下左右居中可配 x,y,width,height,任意参数为空都将根据其他 参数自适应 地图数值计算方式,默认为加和,可选为:'sum'(总数) | 'average'(均值) 地图数值计算结果小数精度,mapValueCalculation 为 average 时有效,默认为取整,需要小数精 度时设置大于 0 的整数 显示图例颜色标识(系列标识的小圆点),存在 legend 时生效 是否开启滚轮缩放和拖拽漫游 滚轮缩放的极限控制,可指定{max:number, min:number},其中 max 为放大系数,有效值应大于 1,min 为缩小系数,有效值应小于 1 自定义地区的名称映射,如{'China' : '中国'} 地区的名称文本位置修正, 数值单位为 px, 正值为左下偏移, 负值为右上偏移, 如{'China' : [10, -10]} 通过绝对经纬度指定地区的名称文本位置,如{'Islands':[113.95, 22.26]},香港离岛区名称显示定 位到东经 113.95,北纬 22.26 上驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:名称{Array} categories {Array} nodes默认值[] []描述力导向图中节点的分类, 每一项有 name 和 itemStyle 两个属性,itemStyle 配置详见 itemStyle 力导向图的顶点数据, 每一项都有 name, value, category 三个属性,分别表示节点的名称, 节点的值和节点的分 类 力导向图的边数据, 每一项都有 source, target, weight 三个属性, source 和 target 是顶点的索引值,边的权重(weight)越大则两个顶点之间的联系越大(最后稳定之后的距离越小) 力导向图的边两端图形样式,可指定为'arrow'{Array} links {string} linkSymbol {Array} linkSymbolSize {number} minRadius {number} maxRadius[] 'none'[10, 15] 力导向图的边两端图形大小 10 20 顶点数据映射成圆半径后的最小半径 顶点数据映射成圆半径后的最大半径 {number} density {number} attractiveness series(和弦图)1 1顶点的密度,影响布局时顶点运动的速度,值越大速度越慢 顶点之间的引力系数,影响到布局稳定之后的大小,值越大则稳定之后顶点之间的距离越小驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:名称{number} padding {string} sort {string} sortSub {boolean} showScale {boolean} showScaleText {boolean} clockWise {Array} matrix series(仪表盘) 2默认值每个 sector 之间的间距(用角度表示)描述'none' 'none' false false false [[]]数据排序, 可以取 none, ascending, descending 数据排序(弦), 可以取 none, ascending, descending 是否显示刻度 是否显示刻度文字 显示是否顺时针 关系数据,用二维数组表示,项 [i][j] 的数值表示 i 到 j 的关系数据驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:名称{Array} center {number | Array}radius {number} startAngle {number} endAngle {number} min {number} max {number} precision {number} splitNumber ['50%', '50%'] [0, '75%'] 225 -45 0 100 0 10默认值描述圆心坐标,支持绝对值(px)和百分比,百分比计算 min(width, height) * 50% 半径,支持绝对值(px)和百分比,百分比计算比,min(width, height) / 2 * 75%, 传数组实现环形图,[内半径,外半径] 开始角度, 饼图(90)、仪表盘(225),有效输入范围:[-360,360] 结束角度,有效输入范围:[-360,360],保证 startAngle - endAngle 为正值 指定的最小值 指定的最大值 小数精度,默认为 0,无小数点 分割段数,默认为 5,为 0 时为线性渐变,calculable 为 true 是默认均分 100 份 { show: true, lineStyle: { color: [ [0.2, '#228b22'], [0.8, '#48b'], [1, '#ff4500'] ], width: 30 } } 坐标轴线,默认显示 属性 show 控制显示与否, 属性 lineStyle(详见 lineStyle)控制线条样式, 比较特殊的是这里的 lineStyle.color 是一个二维数组, 用于把仪表盘轴线分成若干份, 并且可以给每一份指定具体的颜色,格式为:[[百分比, 颜色值], [...]]{Object} axisLine{ show: true, splitNumber: 5, length :8, lineStyle: { color: '#eee', width: 1, type: 'solid' } }坐标轴小标记,默认显示 属性 show 控制显示与否, 属性 lineStyle(详见 lineStyle)控制线条样式, 属性 splitNumber 控制每份 split 细分多少段 属性 length 控制线长{Object} axisTick{ show: true, formatter: null, textStyle: { color: 'auto' } } {Object} splitLine 主分隔线,默认显示 坐标轴文本标签(详见 axis.axislabel) 属性 formatter 可以格式化文本标签, 属性 textStyle(详见 textStyle)控制文本样式{Object} axisLabel{ show: true, length :30, lineStyle: { color: '#eee', width: 2, type: 'solid' } }属性 show 控制显示与否, 属性 length 控制线长 属性 lineStyle(详见 lineStyle)控制线条样式,{ {Object} pointer } length : '80%', width : 8, color : 'auto'指针样式 属性 length 控制线长,百分比相对的是仪表盘的外半径 属性 width 控制指针最宽处, 属性 color 控制指针颜色{ show : true, offsetCenter: [0, '-40%'], textStyle: { color: '#333', fontSize : 15 } }仪表盘标题 属性 show 控制显示与否, 属性 offsetCenter 用于标题定位,数组为横纵相对仪表盘圆心坐标偏移,支持百分比 (相对外半径), 属性 textStyle(详见 textStyle)控制文本样式 仪表盘详情{Object} title{ show : true, backgroundColor: 'rgba(0,0,0,0)', borderWidth: 0, borderColor: '#ccc', width: 100, height: 40, offsetCenter: [0, '40%'], 属性 show 控制显示与否, 属性 backgroundColor 控制边框颜色, 属性 borderWidth 控制边框线宽, 属性 borderColor 控制边框颜色, 属性 width 控制详情宽度, 属性 height 控制详情高度, 属性 offsetCenter 用于详情定位,数组为横纵相对仪表盘圆心坐标偏移,支持百分比{Object} detail formatter: null, textStyle: { color: 'auto', fontSize : 30 } } series(漏斗图)(相对外半径), 属性 formatter 可以格式化文本, 属性 textStyle(详见 textStyle)控制文本样式驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据:名称{number | string} x {number | string} y {number | string} x2 {number | string} y2 {number | string}width 80 60 80 60默认值描述左上角横坐标,数值单位 px,支持百分比(字符串),如'50%'(显示区域横向中心) 左上角纵坐标,数值单位 px,支持百分比(字符串),如'50%'(显示区域纵向中心) 右下角横坐标,数值单位 px,支持百分比(字符串),如'50%'(显示区域横向中心) 右下角纵坐标,数值单位 px,支持百分比(字符串),如'50%'(显示区域纵向中心) 总宽度,默认为绘图区总宽度 - x - x2,数值单位 px,指定 width 后将忽略 x2,支持百分比(字符串),如'50%'(显 示区域一半的宽度) 总宽度,默认为绘图区总高度 - y - y2,数值单位 px,指定 width 后将忽略 x2,支持百分比(字符串),如'50%'(显 示区域一半的高度) 指定的最小值 指定的最大值 最小值 min 映射到总宽度的比例,如果需要最小值的图形并不是尖端三角,可设置 minSize 实现 最大值 max 映射到总宽度的比例null{number | string}height null {number} min {number} max {string} minSize {string} maxSize {string} sort {number} gap series.data 0 100 '0%' '100%''descending' 数据排序, 可以取 ascending, descending 0 数据图形间距系列中的数据内容数组,折线图以及柱状图时数组长度等于所使用类目轴文本标签数组 axis.data 的长度,并且他们间是一一对应的。数组项通常为数值, 如: [12, 34, 56, ..., 10, 23]当某类目对应数据不存在时(ps:'不存在' 不代表值为 0),可用'-'表示,无数据在折线图中表现为折线在该点断开,在柱状图中表现为该点无柱形,如:[12, '-', 56, ..., 10, 23]当需要对个别内容进行个性化定义时,数组项可用对象,如:[ 12, 34, { value : 56, tooltip:{}, itemStyle:{} }, ..., 10, 23 ] //自定义特殊 tooltip,仅对该 item 有效,详见 tooltip //自定义特殊 itemStyle,仅对该 item 有效,详见 itemStyle当图表类型为 scatter(散点图或气泡图)时,其数值设置比较特殊,他的横纵坐标轴都可能为数值型,并且气泡图时需要指定气泡大小,所以 scatter 型 图表设置为:[ { value : [10, 25, 5] }, [12, 15, 1] ... ] //[xValue, yValue, rValue] ,数组内依次为横值,纵值,大小(可选)当图表类型为 K 线图时,其数值设置比较特殊,他的数值内容为长度为 4 的数组,分别代表[开盘价,收盘价,最低值,最高值][ { value : [48.35, 90.1] // // 开盘,收盘,最低,最高 }, [10.9, 50.63], ... ]当图表类型为饼图时,需要说明每部分数据的名称 name,可设置选中状态,所以设置为:[ { value : 12, name : 'apple' }, ... ] //每部分数据的名称当图表类型为地图时,需要说明每部分数据对应的省份,可设置选中状态,所以设置为:[ { name: '北京', value: 1234, selected: true }, { name: '天津', value: 321 }, ... ]series.markPoint 系列中的数据标注内容名称默认值描述 {string} symbol {number | Function} symbolSize {number} symbolRotate {boolean} large'pin' 10 null false { show: false, period: 15, scaleSize : 2, color : null, shadowColor : null, shadowBlur : 0 } {...} {} []标注类型,同 series 中的 symbol 标注大小,同 series 中的 symbolSize 标注图形旋转角度,同 series 中的 symbolRotate 是否启动大规模标注模式 标注图形炫光特效: show 是否开启,默认关闭 period 运动周期,无单位,值越大越慢,默认为 15 scaleSize 放大倍数,以 markPoint symbolSize 为基准 color 炫光颜色,默认跟随 markPoint itemStyle 定义颜色, shadowColor 光影颜色,默认跟随 color shadowBlur 光影模糊度,默认为 0 百度迁徙(模拟) ? 标注图形样式属性,同 series 中的 itemStyle 地图特有,标注图形定位坐标,同 series 中的 geoCoord 标注图形数据,见下{Object} effect{Object} itemStyle {Object} geoCoord {Array} data series.markPoint.data标注的数据内容数组,最直接的数据项可直接指定标注位置(x,y)以及相关名称(name)和值(value),在饼图、雷达图、力导、和弦图中基本如下:data : [ {name: '标注 1', value: 100, x: 50, y: 20}, {name: '标注 2', value: 200, x: 150, y: 120}, ... ]在存在直角坐标系的图表如折线、柱形、K 线、散点图中,除了通过直接指定位置外,如果希望标注基于直角系的定位,可以通过 xAxis,yAxis 实现, 这两个值都会根据坐标轴类型以及传入参数的不同自动换算如下:data : [ {name: '标注 1', value: 100, xAxis: 1, yAxis: 20}, // 当 xAxis 为类目轴时,数值 1 会被理解为类目轴的 index {name: '标注 2', value: 100, xAxis: '周三', yAxis: 20}, // 当 xAxis 为类目轴时,字符串'周三'会被理解为与类目轴的文本进行匹配 {name: '标注 3', value: 200, xAxis: 10, yAxis: 20}, 算 ... ]// 当 xAxis 或 yAxis 为数值轴时,不管传入是什么,都被理解为数值后做空间位置换更为实用的,在折线、柱形、散点图中,可以直接使用如下几个开箱即用的特殊点标注data : [ {type : 'max', name: '自定义名字'}, {type : 'min', name: '自定义名字'} ] // 最大值 // 最小值标注数据比较特殊也最为常用的地图上,除了直接位置定位外,如果希望基于地理坐标标注,并且能够随地图漫游缩放,需要为 markPoint 提供一份 geoCoord,如下data : [ {name: '北京', value: 100}, {name: '上海', value: 200}, ... ], geoCoord : { &北京&:[116.46,39.92], &上海&: {x: 121.48, y: 31.22}, ... } // 支持数组[经度,维度] // 支持对象{x:经度,y:纬度}series.markLine 系列中的数据标线内容名称{Array | string} symbol {Array | number | Function}symbolSize默认值['circle', 'arrow'] [2, 4]描述标线起始和结束的 symbol 介绍类型,如果都一样,可以直接传 string,同 series 中的 symbol 标线起始和结束的 symbol 大小, 半宽 (半径) 参数, 如果都一样, 可以直接传 number 或 function, 同 series 中的 symbolSize {Array | number} symbolRotatenull { show: false, period: 15, scaleSize : 2, color : null, shadowColor : null, shadowBlur : null } {...} {} []标线起始和结束的 symbol 旋转控制,同 series 中的 symbolRotate 标线图形炫光特效: show 是否开启,默认关闭 period 运动周期,无单位,值越大越慢,默认为 15 scaleSize 放大倍数,以 markLine lineWidth 为基准 color 炫光颜色,默认跟随 markLine itemStyle 定义颜色, shadowColor 光影颜色,默认跟随 color shadowBlur 光影模糊度,默认根据 scaleSize 计算 百度迁徙(模拟) ? 标线图形样式属性,同 series 中的 itemStyle 地图特有,标线图形定位坐标,同 series 中的 geoCoord 标线图形数据,见下{Object} effect{Object} itemStyle {Object} geoCoord {Array} data series.markLine.data标线的数据内容数组,最直接的数据项可直接指定标线起始和结束位置(x,y)以及相关名称(name)和值(value),在饼图、雷达图、力导、和弦图 中基本如下:data : [ [ {name: '标线 1 起点', value: 100, x: 50, y: 20}, {name: '标线 1 终点', x: 150, y: 120} ], [ {name: '标线 2 起点', value: 200, x: 30, y: 80}, {name: '标线 2 终点', x: 270, y: 190} ], ... ]在存在直角坐标系的图表如折线、柱形、K 线、散点图中,除了通过直接指定位置外,如果希望标线基于直角系的定位,可以通过 xAxis,yAxis 实现, 这两个值都会根据坐标轴类型以及传入参数的不同自动换算如下: data : [ [ {name: '标线 1 起点', value: 100, xAxis: 1, yAxis: 20}, 1|MAXNUMBER 可以让线到达 grid 边缘 {name: '标线 1 终点', xAxis: '周三', yAxis: 20}, ], [ {name: '标线 2 起点', value: 200, xAxis: 10, yAxis: 20}, 间位置换算 {name: '标线 2 终点', xAxis: 270, yAxis: 190} ], ... ] // 当 xAxis 或 yAxis 为数值轴时,不管传入是什么,都被理解为数值后做空 // 当 xAxis 为类目轴时,字符串'周三'会被理解为与类目轴的文本进行匹配 // 当 xAxis 为类目轴时,数值 1 会被理解为类目轴的 index,通过 xAxis:-更为实用的,在折线、柱形、散点图中,可以直接使用如下几个开箱即用的特殊点作为标线类型data : [ {type : 'max', name: '自定义名字'}, {type : 'min', name: '自定义名字'}, // 最大值水平线或垂直线 // 最小值水平线或垂直线{type : 'average', name: '自定义名字'},// 平均值水平线或垂直线 // 最小值指向最大值的连线 [ {type : 'min', name: '自定义名字'}, {type : 'max', name: '自定义名字'} ], // 散点图中存在两个数值型坐标,默认用纵轴值计算特殊点,可以通过 valueIndex:0 指定为横轴特殊点 {type : 'max', name: '自定义名字', valueIndex:0} ]标线数据比较特殊也最为常用的地图上,除了直接位置定位外,如果希望基于地理坐标标线,并且能够随地图漫游缩放,需要为 markLine 提供一份 geoCoord,如下 data : [ [ {name: '北京', value: 100}, {name:'上海'} ], [ {name: '北京', value: 100}, {name:'广州'} ], ... ], geoCoord : { &北京&:[116.46,39.92], &广州&:[113.23,23.16], &上海&: {x: 121.48, y: 31.22}, ... } // 支持对象{x:经度,y:纬度} // 支持数组[经度,维度]itemStyle图形样式,可设置图表内图形的默认样式和强调样式(悬浮时样式):itemStyle: { normal: { ... }, emphasis: { ... } }其中 normal 和 emphasis 属性为对象,其包含:名称默认值适用类型描述 {color} color {Object}lineStyle {Object}areaStyle {Object}chordStyle {string}borderColor图表各异 图表各异 图表各异 图表各异 '#fff'通用 折线图,K 线图 ,地图,markLine 堆积折线图,地图 和弦图颜色,主色 线条样式,详见 lineStyle 区域样式,详见 areaStyle 弦样式,详见 chordStyle柱形图,折线图(symbol),散点图(symbole),饼图, 柱形边框颜色 markPoint 柱形图 柱形边框圆角,单位 px,默认为 0{number}borderRadius 0 {number}borderWidth 1柱形图,折线图(symbol),散点图(symbole),饼图, 柱形边框线宽,单位 px,默认为 1 markPoint 标签,饼图默认显示在外部,离饼图距离由 折线图,柱形图,K 线图,散点图,饼图 ,地图,力导向,labelLine.length 决定,地图标签不可指定位置 markPoint,markLine 折线图, 柱形图, K 线图, 散点图可指定 position 见下 饼图 饼图标签视觉引导线,默认显示{Object} label{show: true, position:'outer'}{Object}labelLine{show: true}其中标签 label 属性为对象,其包含:名称{boolean} show默认值true描述标签显示策略,可选为:true(显示) | false(隐藏) 标签显示位置,地图标签不可指定位置 饼图可选为:'outer'(外部) | 'inner'(内部), 折线图,柱形图,K 线图,散点图默认根据布局自适应为'top'或者'right',可选的还有:'inside' | 'left' | 'bottom' 柱形图可选的还有,'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' 和弦图有效,文本标签自动旋转 和弦图有效,文本标签旋转后于弦的间隔 标签文本格式器,通用,同 Tooltip.formatter,支持模板、方法回调,不支持异步回调 标签的文本样式(详见 textStyle){string} position'outer' | null{boolean} rotate {number} distance {string | Function} formatter {Object} textStylefalse 10 null null其中饼图标签视觉引导线 labelLine 属性为对象,其包含: 名称{boolean} show {number} length {Object} lineStyle默认值true 40 各异描述饼图标签视觉引导线显示策略,可选为:true(显示) | false(隐藏) 线长 ,从外圆边缘起计算,可为负值 线条样式,详见 lineStyle通过有效设置 itemStyle 的 normal 和 emphasis 选项可实现个性化的显示策略, 比如希望饼图文字标签默认隐藏, 并在鼠标悬浮时通过一条红色的视觉引 导线显示在饼图外部区域,可以如下设置:itemStyle: { normal: { label: { show: false } labelLine: { show: false } } , emphasis: { label: { show: true, position: 'outer' } labelLine: { show: true, lineStyle: { color: 'red' } } } }高度个性化: 折线图 try this ? , 柱状图 try this ? , K 线图 try this ?, 散点图 try this ? , 饼图 try this ?, 和弦图 try this ?, 力导向布局 try this ? , 地图 try this ? , 仪表盘 try this ?, 漏斗图 try this ?lineStyle线条(线段)样式名称{color} color {string} type {number} width {color=} shadowColor {number=} shadowBlur {number=} shadowOffsetX {number=} shadowOffsetY 各异 'solid' 各异默认值颜色描述线条样式,可选为:'solid' | 'dotted' | 'dashed' 线宽 折线主线(IE8+)有效,阴影色彩,支持 rgba 折线主线(IE8+)有效,阴影模糊度,大于 0 有效 折线主线(IE8+)有效,阴影横向偏移,正值往右,负值往左 折线主线(IE8+)有效,阴影纵向偏移,正值往下,负值往上rgba(0,0,0,0) 5 3 3areaStyle区域填充样式名称{color} color {string} type 各异 'default'默认值颜色 填充样式,目前仅支持'default'(实填充)描述textStyle文字样式名称{color} color {string} decoration {string} align {string} baseline 各异 'none' 各异 各异默认值颜色 修饰,仅对 tooltip.textStyle 生效描述水平对齐方式,可选为:'left' | 'right' | 'center' 垂直对齐方式,可选为:'top' | 'bottom' | 'middle' {string} fontFamily {number} fontSize {string} fontStyle {string | number} fontWeight'Arial, Verdana, sans-serif' 12 'normal' 'normal'字体系列 字号 ,单位 px 样式,可选为:'normal' | 'italic' | 'oblique' 粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900loadingOption过渡显示,loading(读取中)的选项。try this ?名称{string} text {string | number} x {string | number} y {Object} textStyle {string | Function} effect {Object} effectOption {number} progress默认值'Loading...' 'center' 'center' null 'spin' null null 显示话术 ,'\n'指定换行描述水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x 坐标,单位 px) 垂直安放位置,默认为全图居中,可选为:'center' | 'bottom' | 'top' | {number}(y 坐标,单位 px) 显示话术的文本样式(详见 textStyle) loading 效果,可选为:'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble',支持外部装载 loading 效果选项,详见 zrender 指定当前进度[0~1],个别效果有效。backgroundColor{color} null,全图默认背景,默认为 null,同'rgba(0,0,0,0)'color{Array} [ '#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0', '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700', '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0' ],默认颜色序列,循环使用symbolList {Array} [ 'circle', 'rectangle', 'triangle', 'diamond', 'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond' ],默认标志图形类型列表,循环使用renderAsImage{boolean | string} false,非 IE8-支持渲染为图片,可设为 true 或指定图片格式(png | jpeg),渲染为图片后实例依然可用(如 setOption,resize 等), 但各种交互失效calculable{boolean} false,是否启用拖拽重计算特性,默认关闭calculableColor{color} 'rgba(255,165,0,0.6)',拖拽重计算提示边框颜色calculableHolderColor{color} '#ccc',可计算占位提示颜色nameConnector{string} ' & ',数据合并名字间连接符valueConnector{string} ' : ',数据合并名字与数值间连接符animation{boolean} true,是否启用图表初始化动画,默认开启,建议 IE8-关闭addDataAnimation{boolean} true,是否启用动态数据接口动画效果,默认开启,建议 IE8-关闭animationThreshold{number} 2500,动画元素阀值,产生的图形原素超过 2500 不出动画,建议 IE8-关闭animationDuration {number} 2000,动画时长,单位 ms,支持多级控制animationEasing{string} 'BounceOut',主元素的缓动效果,支持多级控制,详见 zrender.animation.easing,可选有: 'Linear', 'QuadraticIn', 'QuadraticOut', 'QuadraticInOut', 'CubicIn', 'CubicOut', 'CubicInOut', 'QuarticIn', 'QuarticOut', 'QuarticInOut', 'QuinticIn', 'QuinticOut', 'QuinticInOut', 'SinusoidalIn', 'SinusoidalOut', 'SinusoidalInOut', 'ExponentialIn', 'ExponentialOut', 'ExponentialInOut', 'CircularIn', 'CircularOut', 'CircularInOut', 'ElasticIn', 'ElasticOut', 'ElasticInOut', 'BackIn', 'BackOut', 'BackInOut', 'BounceIn', 'BounceOut', 'BounceInOut'多级控制设计简单的说,你可以通过这三级满足不同 level 的定制和个性化需求:? ? ?通过 option.* 设置全局统一配置; 通过 option.series.* 设置特定系列特殊配置,其优先级高于 option 内的同名配置; 通过 option.series.data.* 设置特定数据项的特殊配置,最高优先级; 附录:地图扩展支持标准 GeoJson 动态扩展地图类型,try HK 》 USA 》// step1: 找到目标地区的 geoJson 数据文件,如 HK_geo.json // step2: 在 require('echarts/util/mapData/params').params 中命名你的地图类型,如 HK // step3: 命名赋值为对象{}, 实现接口方法 getGeoJson,通过 callback 返回目标地区 geoJson 数据文件 require('echarts/util/mapData/params').params.HK = { getGeoJson: function (cal

我要回帖

更多关于 echarts有哪些图表 的文章

 

随机推荐