echarts 叠加支持图形叠加吗

14:43 提问
echarts地图怎么动态切换主题啊,就这种效果
按赞数排序
你都有截图了,为什么不直接用调试器调试下,并且直接拿它的js代码
setTheme方法,具体看连接:
{string | Object} theme
设置主题,内置主题('macarons', 'infographic')直接传入名称,自定义扩展主题可传入主题对象
恩,我是想实现它列子的切换效果,点击下拉框时可以切换主题,但是我这个点击的时候没有效果,也不能刷新,不知道怎么回事
&!DOCTYPE html&
&meta charset="utf-8"&
&title&ECharts&/title&
function changeTheme(self){
//var te = require('echarts/theme/macarons');
var te = require('echarts/theme/infographic');
myChart.setTheme(te);
&!-- 为ECharts准备一个具备大小(宽高)的Dom --&
&div id="main" style="height:400px"&&/div&
&select onchange='changeTheme(this)'&
&option value='1'&主题1&/option&
&option value='2'&主题2&/option&
&!-- ECharts单文件引入 --&
&script src="/build/dist/echarts.js"&&/script&
&script type="text/javascript"&
// 路径配置
require.config({
echarts: '/build/dist'
'echarts',
'echarts/chart/map',
'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
function (ec,te) {
// 基于准备好的dom,初始化echarts图表
myChart = ec.init(document.getElementById('main'),te);
option = {
text: 'iphone销量',
subtext: '纯属虚构',
x:'center'
tooltip : {
trigger: 'item'
orient: 'vertical',
data:['iphone3','iphone4','iphone5']
dataRange: {
max: 2500,
x: 'left',
y: 'bottom',
text:['高','低'],
// 文本,默认为数值文本
calculable : true
toolbox: {
show: true,
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
series : [
name: 'iphone3',
type: 'map',
mapType: 'china',
roam: false,
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '河南',value: Math.round(Math.random()*1000)},
{name: '云南',value: Math.round(Math.random()*1000)},
{name: '辽宁',value: Math.round(Math.random()*1000)},
{name: '黑龙江',value: Math.round(Math.random()*1000)},
{name: '湖南',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '山东',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '江苏',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '湖北',value: Math.round(Math.random()*1000)},
{name: '广西',value: Math.round(Math.random()*1000)},
{name: '甘肃',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '陕西',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '贵州',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '青海',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '海南',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
name: 'iphone4',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '重庆',value: Math.round(Math.random()*1000)},
{name: '河北',value: Math.round(Math.random()*1000)},
{name: '安徽',value: Math.round(Math.random()*1000)},
{name: '新疆',value: Math.round(Math.random()*1000)},
{name: '浙江',value: Math.round(Math.random()*1000)},
{name: '江西',value: Math.round(Math.random()*1000)},
{name: '山西',value: Math.round(Math.random()*1000)},
{name: '内蒙古',value: Math.round(Math.random()*1000)},
{name: '吉林',value: Math.round(Math.random()*1000)},
{name: '福建',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '西藏',value: Math.round(Math.random()*1000)},
{name: '四川',value: Math.round(Math.random()*1000)},
{name: '宁夏',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
name: 'iphone5',
type: 'map',
mapType: 'china',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
{name: '北京',value: Math.round(Math.random()*1000)},
{name: '天津',value: Math.round(Math.random()*1000)},
{name: '上海',value: Math.round(Math.random()*1000)},
{name: '广东',value: Math.round(Math.random()*1000)},
{name: '台湾',value: Math.round(Math.random()*1000)},
{name: '香港',value: Math.round(Math.random()*1000)},
{name: '澳门',value: Math.round(Math.random()*1000)}
// 为echarts对象加载数据
myChart.setOption(option);
其他相似问题ECharts,纯Javascript图表库,基于Canvas,底层依赖,商业产品常用图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘、整合的能力。图表类型支持折线图(区域图)、柱状图(条状图)、散点图(气泡图)、K线图、饼图(环形图)、雷达图(填充雷达图)、和弦图、力导向布局图、地图,同时支持任意维度的堆积和多图表混合展现。
是指一个完整的图表,如折线图,饼图等“基本”图表类型或由基本图表组合而成的“混搭”图表,可能包括坐标轴、图例等
直角坐标系中的一个坐标轴,坐标轴可分为类目轴和数值轴
直角坐标系中的横轴,通常并默认为类目轴
直角坐标系中的纵轴,通常并默认为数值轴
直角坐标系中除坐标轴外的绘图网格
值域选择,常用于展现地域数据时选择值域范围
辅助工具箱
气泡提示框,用于展现更详细的数据
数据区域缩放,常用于展现大数据时选择可视范围
折线图,堆积折线图,区域图,堆积区域图
柱形图(纵向),堆积柱形图,条形图(横向),堆积条形图
散点图,气泡图,大规模散点图
K线图,蜡烛图,
饼图,圆环图
雷达图,填充雷达图
力导布局图
地图(支持中国及全国34个省市自治区地图)
图表库标准包含单图表类型的标准图表以及多图表类型混合的混搭图表:
单图表类型:line
堆积折线图
堆积区域图
单图表类型:bar
堆积柱形图
堆积条形图
单图表类型:scatter
单图表类型:k
单图表类型:pie
南丁格尔玫瑰图
单图表类型:radar
填充雷达图
单图表类型:chord
多维度选择和弦图
单图表类型:force
力导向布局图。
单图表类型:map
全国34个省市自治区
子区域模式
引入ECharts
echarts提供多种引入方式,请根据你的项目类型选择合适的方式:
模块化包引入
如果你的项目本身就是模块化的,那引入echarts将很简单,只需要配置好packet路径指向src即可,而且你还可以实现图表的按需加载,由于echarts依赖底层zrender,建议你同时下载到本地,可参考,你需要配置如下。
需要注意的时,包引入提供了开发阶段最大的灵活性,但并不适合直接上线,减少请求的文件数量是前端性能优化中很基本也是很重要的规则,务必在上线时做文件的连接压缩。
//from echarts example
require.config({
packages: [
name: 'echarts',
location: '../../src',
main: 'echarts'
name: 'zrender',
location: '../../../zrender/src', // zrender与echarts在同一级目录
main: 'zrender'
模块化单文件引入(推荐)
我们建议你使用单一文件引入,如你所发现的,build文件夹下已经生成了多个单文件见下,根据你的需求使用:
echarts.js : 经过压缩,包含除地图外的全部图表
echarts-original.js : 未压缩,可用于调试,包含除地图外的全部图表
echarts-map.js : 经过压缩,全图表,包含world,china以及34个省市级地图数据
echarts-original-map.js : 未压缩,可用于调试,全图表,包含world,china以及34个省市级地图数据
如果需要更加定制的打包文件,建议在node环境下安装,build文件夹内为你准备好配置项,可根据你的项目需求,修改config-tpl.js以构建你的最佳配置。
采用单一文件使用例子见,存放在example/www下,你需要配置如下:
//from echarts example
require.config({
'echarts':'./js/echarts',
'echarts/chart/bar' : './js/echarts',
// 把所需图表指向单文件
'echarts/chart/line': './js/echarts'
require.config配置后后就可以通过动态加载使用echarts
//from echarts example
'echarts',
'echarts/chart/line',
// 按需加载所需图表
'echarts/chart/bar'
function (ec) {
var myChart = ec.init(domMain);
var option = {
myChart.setOption(option);
总结来说,模块化如何引入ECharts,你都需要如下4步:
引入一个模块加载器,如或者
为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,可参考
//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.js 运行构建脚本了,具体示例:
node build.js optimize=true exclude=map,force,line output=echarts.js plain=true
是否压缩, 默认false
不打包的图表,多个图表使用逗号分割, 默认使用所有图表
输出打包地址,默认为echarts.js
是否打包esl, 打包的话可以直接使用scripts标签引入, 默认false
更详细的配置在build/config-tpl.js目录下,具体的配置项使用可以参考requirejs optimizer的,要注意的的是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后的的初始化代码如下:
// 作为入口
'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加载后保存起来作为命名空间使用
实例指的就是接口init()返回的对象,即上述代码中的“myChart”,非get接口均返回自身self支持链式调用
{self} setOption
{Object} option, {boolean=} notMerge
万能接口,配置图表实例任何可配置选项(详见),多次调用时option选项是默认是合并(merge)的,如果不需求,可以通过notMerger参数为true阻止与上次option的合并。
{Object} getOption
返回内部持有的当前显示option克隆
{self} setSeries
{Array} series, {boolean=} notMerge
数据接口,驱动图表生成的数据内容(详见),效果等同调用setOption({series:{...}})
{Object} getSeries
返回内部持有的当前显示series克隆,效果同return getOption().series
{self} addData
单组数据:
{number} seriesIdx
{number | Object} data
{boolean=} isHead
{boolean=} dataGrow
{string=} additionData
多组数据添加:
{Array} params
动态数据接口,
seriesIdx 系列索引
data 增加数据
isHead 是否队头加入,默认,不指定或false时为队尾插入
dataGrow 是否增长数据队列长度,默认,不指定或false时移出目标数组对位数据
additionData 是否增加类目轴(饼图为图例)数据,附加操作同isHead和dataGrow
多组数据添加时参数为:
params == [[seriesIdx, data, isHead, dataGrow, additionData], [...]]
{string} eventName, {Function} eventListener
事件绑定,支持事件有:
REFRESH,RESTORE,RESIZE,CLICK,HOVER,
DATA_CHANGED,MAGIC_TYPE_CHANGED,DATA_VIEW_CHANGED,
DATA_ZOOM,DATA_RANGE,MAP_ROAM,
LEGEND_SELECTED,MAP_SELECTED,PIE_SELECTED,
事件命名统一挂载到require('echarts/config').EVENT(非模块化为echarts.config.EVENT)命名空间下,建议使用此命名空间作为事件名引用。
{string} eventName, {Function} eventListener
事件解绑定
{self} connect
{ECharts | Array &ECharts&} connectTarget
多图联动,传入联动目标为EChart实例,支持数组。多图联动支持直角系下tooltip联动,保存图片的自动拼接,同时支持的联动事件有:
REFRESH,RESTORE,MAGIC_TYPE_CHANGED
DATA_ZOOM,DATA_RANGE,LEGEND_SELECTED
{self} disConnect
{ECharts | Array &ECharts&} connectTarget
解除已连结的多图联动
{self} showLoading
{Object} loadingOption
过渡控制(详见),显示loading(读取中)
{self} hideLoading
过渡控制,隐藏loading(读取中)
{ZRender} getZrender
获取当前图表所用ZRender实例,可用于添加额外图形或进行深度定制,zrender接口详见
{string} getDataURL
{string=} imgType
获取当前图表的Base64图片dataURL,imgType 图片类型,支持png|jpeg,默认为png
{Dom} getImage
{string=} imgType
获取一个当前图表的img,imgType 图片类型,支持png|jpeg,默认为png
{self} resize
ECharts没有绑定resize事件,显示区域大小发生改变内部并不知道,使用方可以根据自己的需求绑定关心的事件,主动调用resize达到区域更新的效果。
{self} refresh
刷新图表,图例选择、数据区域缩放,拖拽状态均保持。
{self} restore
还原图表,各种状态均被清除,还原为最初展现时的状态。
{self} clear
清空绘画内容,清空后实例可用
{void} dispose
释放图表实例,释放后实例不再可用
图表选项,包含图表实例任何可配置选项: 公共选项 , 组件选项 , 数据选项
{color} backgroundColor
全图默认背景,(详见),默认为无,透明
{Array} color
数值系列的颜色列表,(详见),可配数组,eg:['#87cefa', 'rgba(123,123,123,0.5)','...'],当系列数量个数比颜色列表长度大时将循环选取
{boolean} renderAsImage
非IE8-支持渲染为图片,(详见)
{boolean} calculable
是否启用拖拽重计算特性,默认关闭,(详见,相关的还有
{boolean} animation
是否开启动画,默认开启,(详见
,相关的还有
{Object} title
标题(详见),每个图表最多仅有一个标题控件
{Object} legend
图例(详见),每个图表最多仅有一个图例,混搭图表共享
{Object} dataRange
值域选择(详见),值域范围
{Object} toolbox
工具箱(详见),每个图表最多仅有一个工具箱
{Object} tooltip
提示框(详见),鼠标悬浮交互时的信息提示
{Object} dataZoom
数据区域缩放(详见),数据展现范围选择
{Object} grid
直角坐标系内绘图网格(详见)
{Array | Object} xAxis
直角坐标系中横轴数组(详见),数组中每一项代表一条横轴坐标轴,标准(1.0)中规定最多同时存在2条横轴
{Array | Object} yAxis
直角坐标系中纵轴数组(详见),数组中每一项代表一条纵轴坐标轴,标准(1.0)中规定最多同时存在2条纵轴
{Array} series
驱动图表生成的数据内容(详见),数组中每一项代表一个系列的特殊选项及数据
标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题。
{string} text
主标题文本,'\n'指定换行
{string} link
主标题文本超链接
{string} subtext
副标题文本,'\n'指定换行
{string} sublink
副标题文本超链接
{string | number} x
水平安放位置,默认为左侧,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
{string | number} y
垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
{string} textAlign
水平对齐方式,默认根据x设置自动调整,可选为: left' | 'right' | 'center
{color} backgroundColor
'rgba(0,0,0,0)'
标题背景颜色,默认透明
{string} borderColor
标题边框颜色
{number} borderWidth
标题边框线宽,单位px,默认为0(无边框)
{number | Array} padding
标题内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图
{number} itemGap
主副标题纵向间隔,单位px,默认为10
{Object} textStyle
{fontSize: 18, fontWeight: 'bolder', color: '#333'}
主标题文本样式(详见)
{Object} subtextStyle
{color: '#aaa'}
副标题文本样式(详见)
图例,每个图表最多仅有一个图例。
{string} orient
'horizontal'
布局方式,默认为水平布局,可选为:'horizontal' | 'vertical'
{string | number} x
水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
{string | number} y
垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
{color} backgroundColor
'rgba(0,0,0,0)'
图例背景颜色,默认透明
{string} borderColor
图例边框颜色
{number} borderWidth
图例边框线宽,单位px,默认为0(无边框)
{number | Array} padding
图例内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图
{number} itemGap
各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔,见下图
{Object} textStyle
{color: '#333'}
默认只设定了图例文字颜色(详见) ,更个性化的是,要指定文字颜色跟随图例,可设color为'auto'
{boolean | string} selectedMode
选择模式,默认开启图例开关,可选single,multiple
{Object} selected
配置默认选中状态,可配合LEGEND.SELECTED事件做动态数据载入,
{Array &string&} data
图例内容数组,数组项通常为{string},每一项代表一个系列的name。
使用根据该值索引中同名系列所用的图表类型和itemStyle,如果索引不到,该item将默认为没启用状态。
如需个性化图例文字样式,可把数组项改为{Object},格式为{name: {string}, textStyle: {Object}}
值域选择,每个图表最多仅有一个值域控件。
{string} orient
'vertical'
布局方式,默认为垂直布局,可选为:'horizontal' | 'vertical'
{string | number} x
水平安放位置,默认为全图左对齐,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
{string | number} y
垂直安放位置,默认为全图底部,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
{color} backgroundColor
'rgba(0,0,0,0)'
值域控件背景颜色,默认透明
{string} borderColor
值域控件边框颜色
{number} borderWidth
值域控件边框线宽,单位px,默认为0(无边框)
{number | Array} padding
值域控件内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图
{number} itemGap
各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔,见下图
{number} min
指定的最小值,eg: 0,默认无,必须参数
{number} max
指定的最大值,eg: 100,默认无,必须参数
{number} precision
小数精度,默认为0,无小数点
{number} splitNumber
分割段数,默认为5,为0时为线性渐变
{boolean} calculable
是否启用值域漫游,启用后无视splitNumber,值域显示为线性渐变
{boolean} realtime
值域漫游是否实时显示
{Array} color
['#1e90ff','#f0ffff']
值域颜色标识,颜色数组长度必须>=2,颜色代表从数值高到低的变化,即颜色数组低位代表数值高的颜色标识
{Array} text
值域文字显示,splitNumber生效时默认以计算所得数值作为值域文字显示,可指定长度为2的文本数组显示简介的值域文本,如['高', '低'],'\n'指定换行
{Object} textStyle
{color: '#333'}
默认只设定了值域控件文字颜色(详见)
工具箱,每个图表最多仅有一个工具箱。
{boolean} show
显示策略,可选为:true(显示) | false(隐藏)
{string} orient
'horizontal'
布局方式,默认为水平布局,可选为:'horizontal' | 'vertical'
{string | number} x
水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
{string | number} y
垂直安放位置,默认为全图顶端,可选为:'top' | 'bottom' | 'center' | {number}(y坐标,单位px)
{color} backgroundColor
'rgba(0,0,0,0)'
工具箱背景颜色,默认透明
{string} borderColor
工具箱边框颜色
{number} borderWidth
工具箱边框线宽,单位px,默认为0(无边框)
{number | Array} padding
工具箱内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css,见下图
{number} itemGap
各个item之间的间隔,单位px,默认为10,横向布局时为水平间隔,纵向布局时为纵向间隔,见下图
{number} itemSize
工具箱icon大小,单位(px)
{Array &color&} color
['#1e90ff','#22bb22','#4b0082','#d2691e']
工具箱icon颜色序列,循环使用
{boolean} showTitle
是否显示工具箱文字提示,默认启用
{Object} textStyle
工具箱提示文字样式,(详见)
{Object} feature
show : false,
mark : '辅助线开关',
markUndo : '删除辅助线',
markClear : '清空辅助线'
lineStyle : {
width : 2,
color : '#1e90ff',
type : 'dashed'
dataZoom : {
show : false,
dataZoom : '区域缩放',
dataZoomReset : '区域缩放后退'
dataView : {
show : false,
title : '数据视图',
readOnly: false,
lang : ['Data View', 'close', 'refresh']
magicType: {
show : false,
line : '折线图切换',
bar : '柱形图切换',
stack : '堆叠',
tiled : '平铺'
restore : {
show : false,
title : '还原'
saveAsImage : {
show : false,
title : '保存为图片',
type : 'png',
lang : ['点击保存']
启用功能,目前支持feature见下,工具箱自定义功能回调处理,见
feature : {
mark : {show : true},
// 辅助线标志,上图icon左数1/2/3,分别是启用,删除上一条,删除全部
dataZoom : {show : true},
// 框选区域缩放,自动与存在的dataZoom控件同步,上图icon左数4/5,分别是启用,缩放后退
// 动态类型切换,支持直角系下的折线图、柱状图、堆叠、平铺转换,上图icon左数6/7/8/9,分别是切换折线图,切换柱形图,切换为堆叠,切换为平铺
magicType : {
show : true,
type : ['line', 'bar', 'stack', 'tiled']
dataView : {show : true},
// 数据视图,上图icon左数10,打开数据视图
restore : {show : true},
// 还原,复位原始图表,上图icon左数11,还原
saveAsImage : {show : true}
// 保存为图片,上图icon左数12,保存
feature选项
mark,辅助线标志
可传入lineStyle(详见)控制线条样式
dataView,数据视图,可设置更多属性
{boolean=} readOnly 默认数据视图为只读,可指定readOnly为false打开编辑功能
{Function=} optionToContent 自主编排数据视图的显示内容
{Function=} contentToOption 当数据视图readOnly为false时,会出现刷新按钮,如果是自主编排的显示内容,如何翻转也请自理
{Array=} lang 数据视图上有三个话术,默认是['Data View', 'close', 'refresh'],如需改写,可自定义
magicType,图表类型切换,支持直角系下的折线图、柱状图、堆叠、平铺转换
{Array} type ['line', 'bar', 'stack', 'tiled']
saveAsImage,保存图片(IE8-不支持),可设置更多属性
{string=} type 默认保存图片类型为'png',需改为'jpeg'
{string=} name 指定图片名称,如不指定,则用图表title标题,如无title标题则图片名称默认为“ECharts”
{string=} lang 非IE浏览器支持点击下载,有保存话术,默认是“点击保存”,可修改
提示框,鼠标悬浮交互时的信息提示。
{boolean} show
显示策略,可选为:true(显示) | false(隐藏)
{boolean} showContent
tooltip主体内容显示策略,只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为falase,可选为:true(显示) | false(隐藏)
{string} trigger
触发类型,默认数据触发,见下图,可选为:'item' | 'axis'
{string | Function} formatter
内容格式器:{string}(Template) | {Function},支持异步回调见表格下方
{string | Function} islandFormatter
'{a} & br/&{b} : {c}'
拖拽重计算独有,数据孤岛内容格式器:{string}(Template) | {Function},见表格下方
{number} showDelay
显示延迟,添加显示延迟可以避免频繁切换,单位ms
{number} hideDelay
隐藏延迟,单位ms
{number} transitionDuration
动画变换时长,单位s
{color} backgroundColor
'rgba(0,0,0,0.7)'
提示背景颜色,默认为透明度为0.7的黑色
{string} borderColor
提示边框颜色
{number} borderRadius
提示边框圆角,单位px,默认为4
{number} borderWidth
提示边框线宽,单位px,默认为0(无边框)
{number | Array} padding
提示内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距,同css
{Object} axisPointer
type : 'line',
lineStyle : {&&color: '#48b',&&width: 2,&&type: 'solid'},
areaStyle : {&&size: 'auto',&&color: 'rgba(150,150,150,0.3)'}
坐标轴指示器,坐标轴触发有效,默认type为line,可选为:'line' | 'shadow' | 'none'(无),lineStyle设置直线指示器(详见),areaStyle设置阴影指示器(详见),areaStyle.size默认为'auto'自动计算,可指定具体宽度
{Object} textStyle
{ color:'#fff' }
文本样式,默认为白色字体(详见)
内容格式器formatter:
{string},模板(Template),其变量为:
{a} | {a0}
{b} | {b0}
{c} | {c0}
{d} | {d0} (部分图表类型无此项)
多值下则存在多套{a1}, {b1}, {c1}, {d1}, {a2}, {b2}, {c2}, {d2}, ...
其中变量a、b、c在不同图表类型下代表数据含义为:
折线(区域)图、柱状(条形)图: 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},传递参数列表如下:
&Array& params : 数组内容同模板变量,[[a, b, c, d], [a1, b1, c1, d1], ...]
&String& ticket : 异步回调标识
&Function& callback : 异步回调,回调时需要两个参数,第一个为前面提到的ticket,第二个为填充内容html
触发类型:
数据区域缩放。与toolbox.feature.dataZoom同步,仅对直角坐标系图表有效。
{boolean} show
是否显示,当show为true时则接管使用指定类目轴的全部系列数据,如不指定则接管全部直角坐标系数据。
{string} orient
'horizontal'
布局方式,默认为水平布局,可选为:'horizontal' | 'vertical'
{number} x
水平安放位置,默认为根据grid参数适配,纵向布局默认左侧,可指定 {number}(左上角x坐标,单位px)
{number} y
垂直安放位置,默认为根据grid参数适配,纵向布局默认下方,可指定 {number}(左上角y坐标,单位px)
{number} width
自适应 | 30
指定宽度,横向布局时默认为根据grid参数适配,纵向布局是默认为30,可指定 {number}(宽度,单位px)
{number} height
指定高度,纵向布局时默认为根据grid参数适配,横向布局是默认为30,可指定 {number}(高度,单位px)
{color} backgroundColor
{color} dataBackgroundColor
数据缩略背景颜色
{color} fillerColor
'rgba(50,205,50,0.4)'
选择区域填充颜色
{color} handleColor
'rgba(70,130,180,0.8)'
控制手柄颜色
{Array | number} xAxisIndex
当不指定时默认控制所有横向类目,可通过数组指定多个需要控制的横向类目坐标轴Index,仅一个时可直接为数字
{Array | number} yAxisIndex
当不指定时默认控制所有纵向类目,可通过数组指定多个需要控制的纵向类目坐标轴Index,仅一个时可直接为数字
{number} start
数据缩放,选择起始比例,默认为0,从首个数据起选择。
{number} end
数据缩放,选择结束比例,默认为100(%),到最后一个数据选择结束。
{boolean} realtime
缩放变化是否实时显示,建议性能较低的浏览器或数据量巨大时不启动实时效果。
{boolean} zoomLock
数据缩放锁,默认为false,当设置为true时选择区域不能伸缩,即(end - start)值保持不变,仅能做数据漫游。
直角坐标系内绘图网格
{number} x
直角坐标系内绘图网格左上角横坐标,数值单位px
{number} y
直角坐标系内绘图网格左上角纵坐标,数值单位px
{number} x2
直角坐标系内绘图网格右下角横坐标,数值单位px
{number} y2
直角坐标系内绘图网格右下角纵坐标,数值单位px
{number} width
直角坐标系内绘图网格(不含坐标轴)宽度,默认为总宽度 - x - x2,数值单位px,指定width后将忽略x2,见下图。
{number} height
直角坐标系内绘图网格(不含坐标轴)高度,默认为总宽度 - y - y2,数值单位px,指定height后将忽略y2,见下图。
{color} backgroundColor
背景颜色。
{number} borderWidth
边框线宽 </td
{color} borderColor
边框颜色。
直角坐标系中横轴数组,数组中每一项代表一条横轴坐标轴,仅有一条时可省略数值。最多同时存在2条横轴,单条横轴时可指定安放于的底部(默认)或顶部,2条同时存在时位置互斥,默认第一条安放于底部,第二条安放于顶部。
坐标轴有两种类型,类目型和数值型(区别详见),横轴通常为类目型,但条形图时则横轴为数值型,散点图时则横纵均为数值型,具体参数详见。
直角坐标系中纵轴数组,数组中每一项代表一条纵轴坐标轴,仅有一条时可省略数值。最多同时存在2条纵轴,单条纵轴时可指定安放于的左侧(默认)或右侧,2条同时存在时位置互斥,默认第一条安放于左侧,第二条安放于右侧。
坐标轴有两种类型,类目型和数值型(区别详见),纵轴通常为数值型,但条形图时则纵轴为类目型,具体参数详见。
坐标轴有两种类型,类目型和数值型,他们的区别在于:
类目型:需要指定类目列表,坐标轴内有且仅有这些指定类目坐标
数值型:需要指定数值区间,坐标轴内包含数值区间内容全部坐标
下面是坐标轴的全部选项,其中个别选项仅在类目型或数值型时有效,请注意适用类型。
{string} type
'category' | 'value'
坐标轴类型,横轴默认为类目型'category',纵轴默认为数值型'value'
{string} position
'bottom' | 'left'
坐标轴类型,横轴默认为类目型'bottom',纵轴默认为数值型'left',可选为:'bottom' | 'top' | 'left' | 'right'
{string} name
坐标轴名称,默认为空
{string} nameLocation
坐标轴名称位置,默认为'end',可选为:'start' | 'end'
{Object} nameTextStyle
坐标轴名称文字样式,默认取全局配置,颜色跟随axisLine主色,可设
{boolean} boundaryGap
类目起始和结束两端空白策略,见下图,默认为true留空,false则顶头
{Array} boundaryGap
数值轴两端空白策略,数组内数值代表百分比,[原始数据最小值与最终最小值之间的差额,原始数据最大值与最终最大值之间的差额]
{number} min
指定的最小值,eg: 0,默认无,会自动根据具体数值调整,指定后将忽略boundaryGap[0]
{number} max
指定的最大值,eg: 100,默认无,会自动根据具体数值调整,指定后将忽略boundaryGap[1]
{boolean} scale
脱离0值比例,放大聚焦到最终_min,_max区间
{number} precision
小数精度,默认为0,无小数点
{number} power
整数精度,默认为100,个位和百位为0
{number} splitNumber
分割段数,默认为5
{Object} axisLine
{show : true}
坐标轴线,默认显示,属性show控制显示与否,属性lineStyle(详见)控制线条样式
{Object} axisTick
{show : false}
坐标轴小标记,默认不显示,属性show控制显示与否,属性length控制线长,属性lineStyle(详见)控制线条样式
{Object} axisLabel
{show : true}
坐标轴文本标签,详见
{Object} splitLine
{show : true}
分隔线,默认显示,属性show控制显示与否,属性lineStyle(详见)控制线条样式
{Object} splitArea
{show : false}
分隔区域,默认不显示,属性show控制显示与否,属性areaStyle(详见)控制区域样式
{Array} data
类目列表,同时也是label内容,详见
boundaryGap端空白策略
boundaryGap: true
boundaryGap: false
scale: false
scale: true
axis属性说明
axis.axisLine
坐标轴线,默认显示且带如下样式:
{boolean} show
是否显示,默认为true,设为false后下面都没意义了
{Object} lineStyle
{color: '#48b', width: 2, type: 'solid'}
属性lineStyle控制线条样式,(详见)
axis.axisTick
坐标轴小标记,默认不显示,默认样式见下:
{boolean} show
是否显示,默认为false,设为true后下面为默认样式
{string | number} interval
小标记显示挑选间隔,默认为'auto',可选为:'auto'(自动隐藏显示不下的) | 0(全部显示) | {number}(用户指定选择间隔)
{boolean} onGap
小标记是否显示为间隔,默认等于boundaryGap
{boolean} inside
小标记是否显示为在grid内部,默认在外部
{number} length
属性length控制线长
{Object} lineStyle
{color: '#ccc', width: 1, type: 'solid'}
属性lineStyle控制线条样式,(详见)
axis.axisLabel
坐标轴文本标签选项
{boolean} show
是否显示,默认为true,设为false后下面都没意义了
{string | number} interval
标签显示挑选间隔,默认为'auto',可选为:'auto'(自动隐藏显示不下的) | 0(全部显示) | {number}(用户指定选择间隔)
{number} rotate
标签旋转角度,默认为0,不旋转,正直为逆时针,负值为顺时针,可选为:-90 ~ 90
{number} margin
坐标轴文本标签与坐标轴的间距,默认为8,单位px
{string | Function} formatter
间隔名称格式器:{string}(Template) | {Function}
{Object} textStyle
{color: '#333'}
文本样式(详见),其中当坐标轴为数值型时,color接受方法回调,实现个性化的颜色定义,support
间隔名称格式器formatter:
{string},模板(Template),其变量为:
{value}: 内容或值
{Function},传递参数同模板变量:
eg:function(value){return "星期" + "日一二三四五六".charAt(value);'}
axis.splitLine
分隔线,默认显示且带如下样式:
{boolean} show
是否显示,默认为true,设为false后下面都没意义了
{boolean} onGap
分隔线是否显示为间隔,默认等于boundaryGap
{Object} lineStyle
{color: ['#ccc'], width: 1, type: 'solid'}
属性lineStyle控制线条样式,(详见)
axis.splitArea
分隔区域,默认不显示:
{boolean} show
是否显示,默认为false,设为true后带如下默认样式
{boolean} onGap
分隔区域是否显示为间隔,默认等于boundaryGap
{Object} areaStyle
{color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']}
属性areaStyle(详见)控制区域样式,颜色数组实现间隔变换。
类目型坐标轴文本标签数组,指定label内容。 数组项通常为文本,'\n'指定换行,如:
[&#39;Jan&#39;, &#39;Feb&#39;, &#39;Mar&#39;, &#39;Apr&#39;, &#39;May&#39;, &#39;Jun&#39;, ..., &#39;Dec&#39;]
当需要对个别标签进行个性化定义时,数组项可用对象,接受textStyle设置个性化标签,如:
&#39;Jav&#39;, &#39;Feb&#39;, &#39;Mar&#39;,
value:&#39;Apr&#39;,
//文本内容,如指定间隔名称格式器formatter,则这个值将被作为模板变量值或参数传入
textStyle:{
//详见textStyle
color : &#39;red&#39;
&#39;May&#39;, &#39;...&#39;
{Array} center
['50%', '50%']
圆心坐标,支持绝对值(px)和百分比,百分比计算min(width, height) * 50%
{number} radius
半径,支持绝对值(px)和百分比,百分比计算min(width, height) / 2 * 75%,
{number} startAngle
开始角度, 有效输入范围:[-180,180]
{number} splitNumber
分割段数,默认为5
{Object} name
{ show:true, formatter:null,textStyle:{color:#333}}
坐标轴名称
{Array} boundaryGap
数值轴两端空白策略,数组内数值代表百分比,[原始数据最小值与最终最小值之间的差额,原始数据最大值与最终最大值之间的差额]
{boolean} scale
脱离0值比例,放大聚焦到最终_min,_max区间
{number} precision
小数精度,默认为0,无小数点
{number} power
整数精度,默认为100,个位和百位为0
{Object} axisLine
{show : true}
坐标轴线,默认显示,属性show控制显示与否,属性lineStyle(详见)控制线条样式
{Object} axisLabel
{show : false}
坐标轴文本标签,详见
{Object} splitLine
{show : true}
分隔线,默认显示,属性show控制显示与否,属性lineStyle(详见)控制线条样式
{Object} splitArea
{show : true}
分隔区域,默认不显示,属性show控制显示与否,属性areaStyle(详见)控制区域样式
{Array} indicator
雷达指标列表,同时也是label内容,例子见下
indicator : [
{name : '外观'},
{name : '拍照', min : 0},
{name : '系统', min : 0, max : 100},
{name : '性能', axisLabel: {...}},
{name : '屏幕'}
驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据,其中个别选项仅在部分图表类型中有效,请注意适用类型:
{string} name
系列名称,如启用legend,该值将被legend.data索引相关
{Object} tooltip
提示框样式,仅对本系列有效,如不设则用option.tooltip(详见),鼠标悬浮交互时的信息提示
{string} type
图表类型,必要参数!如为空或不支持类型,则该系列数据不被显示。可选为:
'line'(折线图) | 'bar'(柱状图) | 'scatter'(散点图) | 'k'(K线图)
'pie'(饼图) | 'radar'(雷达图) | 'chord'(和弦图) | 'force'(力导向布局图) | 'map'(地图)
{Object} itemStyle
图形样式(详见)
{string} stack
折线图,柱状图
组合名称,多组数据的堆积图时使用,eg:stack:'group1',则series数组中stack值等于'group1'的数据做堆积计算
{number} xAxisIndex
折线图,柱状图,散点图 ,K线图
坐标轴数组的索引,指定该系列数据所用的横坐标轴
{number} yAxisIndex
折线图,柱状图,散点图,K线图
坐标轴数组的索引,指定该系列数据所用的纵坐标轴
{number | string} barGap
柱间距离,默认为柱形宽度的30%,可设固定值
{number | string} barCategoryGap
类目间柱形距离,默认为类目间距的20%,可设固定值
{number} barMinHeight
柱条最小高度,可用于防止某item的值过小而影响交互
{number} barWidth
柱状图 ,K线图
柱条(K线蜡烛)宽度,不设时自适应
{number} barMaxWidth
K线蜡烛最大宽度,不设时自适应
{string} symbol
折线图,散点图
标志图形类型,默认自动选择(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'
{number | Function} symbolSize
折线图 (2),散点图(4)
标志图形大小,可计算特性启用情况建议增大以提高交互体验。实现气泡图时symbolSize需为Function,气泡大小取决于该方法返回值,传入参数为当前数据项(value数组)
{number} symbolRotate
折线图 ,散点图
标志图形旋转角度[-180,180]
{boolean} showAllSymbol
标志图形默认只有主轴显示(随主轴标签间隔隐藏策略),如需全部显示可把showAllSymbol设为true
{boolean} smooth
平滑曲线显示
{boolean} large
启动大规模散点图
{number} largeThreshold
大规模散点图自动切换阀值,large为true下有效
{Array} center
['50%', '50%']
圆心坐标,支持绝对值(px)和百分比,百分比计算min(width, height) * 50%
{number | Array} radius
[0, '75%']
半径,支持绝对值(px)和百分比,百分比计算比,min(width, height) / 2 * 75%, 传数组实现环形图,[内半径,外半径]
{number} startAngle
开始角度, 有效输入范围:[-180,180]
{number} minAngle
最小角度,可用于防止某item的值过小而影响交互
{string} roseType
南丁格尔玫瑰图模式,'radius'(半径) | 'area'(面积)
{number} selectedOffset
选中是扇区偏移量
{boolean | string} selectedMode
饼图,地图
选中模式,默认关闭,可选single,multiple
{string} mapType
地图类型,支持world,china及全国34个省市自治区。省市自治区的mapType直接使用简体中文:
新疆, 西藏, 内蒙古, 青海, 四川, 黑龙江, 甘肃, 云南, 广西, 湖南, 陕西,
广东,吉林, 河北, 湖北, 贵州, 山东, 江西, 河南, 辽宁, 山西, 安徽, 福建,
浙江, 江苏,重庆, 宁夏, 海南, 台湾, 北京, 天津, 上海, 香港, 澳门'
支持子区域模式,通过主地图类型扩展出所包含的子区域地图,格式为'主地图类型|子区域名称',如
'world|Brazil','china|广东',详见例子
{boolean} hoverable
非数值显示(如仅用于显示标注标线时),可以通过hoverable:false关闭区域悬浮高亮
{Object} mapLocation
{x:'center',y:'center'}
地图位置设置,默认只适应上下左右居中可配x,y,width,height,任意参数为空都将根据其他参数自适应
{string} mapValueCalculation
地图数值计算方式,默认为加和,可选为:'sum'(总数) | 'average'(均值)
{number} mapValuePrecision
地图数值计算结果小数精度,mapValueCalculation为average时有效,默认为取整,需要小数精度时设置大于0的整数
{boolean} showLegendSymbol
显示图例颜色标识(系列标识的小圆点),存在legend时生效
{Object} roam
是否开启滚轮缩放和拖拽漫游
{Object} nameMap
自定义地区的名称映射,如{'China' : '中国'}
{Object} textFixed
地区的名称文本位置修正,数值单位为px,正直为左下偏移,负值为右上偏移,如{'China' : [10, -10]}
{Object} geoCoord
通过绝对经纬度指定地区的名称文本位置,如{'Islands':[113.95, 22.26]},香港离岛区名称显示定位到东经113.95,北纬22.26上
{Array} categories
力导向图中节点的分类, 每一项有name和itemStyle两个属性,itemStyle配置详见
{Array} nodes
力导向图的顶点数据, 每一项都有 name, value, category三个属性,分别表示节点的名称, 节点的值和节点的分类
{Array} links
力导向图的边数据, 每一项都有 source, target, weight三个属性, source和target是顶点的索引值, 边的权重(weight)越大则两个顶点之间的联系越大(最后稳定之后的距离越小)
{number} minRadius
顶点数据映射成圆半径后的最小半径
{number} maxRadius
顶点数据映射成圆半径后的最大半径
{number} density
顶点的密度,影响布局时顶点运动的速度,值越大速度越慢
{number} attractiveness
顶点之间的引力系数,影响到布局稳定之后的大小,值越大则稳定之后顶点之间的距离越小
{number} padding
每个sector之间的间距(用角度表示)
{string} sort
数据排序, 可以取none, ascending, descending
{string} sortSub
数据排序(弦), 可以取none, ascending, descending
{boolean} showScale
是否显示刻度
{boolean} showScaleText
是否显示刻度文字
{boolean} clockWise
饼图,弦图
显示是否顺时针
{Array} matrix
关系数据,用二维数组表示,项 [i][j] 的数值表示 i 到 j 的关系数据
{Array} data
数据(详见)
{Array} markPoint
标注(详见)
{Array} data
标线(详见)
series.data
系列中的数据内容数组,折线图以及柱状图时数组长度等于所使用类目轴文本标签数组的长度,并且他们间是一一对应的。数组项通常为数值,如:
[12, 34, 56, ..., 10, 23]
当某类目对应数据不存在时(ps:'不存在' 不代表值为 0),可用'-'表示,无数据在折线图中表现为折线在该点断开,在柱状图中表现为该点无柱形,如:
[12, &#39;-&#39;, 56, ..., 10, 23]
当需要对个别内容进行个性化定义时,数组项可用对象,如:
value : 56,
tooltip:{},
//自定义特殊tooltip,仅对该item有效,详见tooltip
itemStyle:{}
//自定义特殊itemStyle,仅对该item有效,详见itemStyle
..., 10, 23
当图表类型为scatter(散点图或气泡图)时,其数值设置比较特殊,他的横纵坐标轴都可能为数值型,并且气泡图时需要指定气泡大小,所以scatter型图表设置为:
value : [10, 25, 5]
//[xValue, yValue, rValue],数组内依次为横值,纵值,大小(可选)
[12, 15, 1]
当图表类型为K线图时,其数值设置比较特殊,他的数值内容为长度为4的数组,分别代表[开盘价,收盘价,最低值,最高值]
value : [48.35, 90.1] // // 开盘,收盘,最低,最高
[10.9, 50.63],
当图表类型为饼图时,需要说明每部分数据的名称name,可设置选中状态,所以设置为:
value : 12,
name : &#39;apple&#39;
//每部分数据的名称
当图表类型为地图时,需要说明每部分数据对应的省份,可设置选中状态,所以设置为:
name: '北京',
value: 1234,
selected: true
name: '天津',
value: 321
series.markPoint
系列中的数据标注内容
{string} symbol
标注类型,同series中的
{number | Function}
symbolSize
标注大小,同series中的
{number} symbolRotate
标注图形旋转角度,同series中的
{Object} effect
show: false,
period: 15,
scaleSize : 2,
color : null,
shadowColor : null,
shadowBlur : 0
标注图形炫光特效:
show 是否开启,默认关闭
period 运动周期,无单位,值越大越慢,默认为15
scaleSize 放大倍数,以markPoint symbolSize为基准
color 炫光颜色,默认跟随markPoint itemStyle定义颜色,
shadowColor 光影颜色,默认跟随color
shadowBlur 光影模糊度,默认为0
{Object} itemStyle
标注图形样式属性,同series中的
{Object} geoCoord
地图特有,标注图形定位坐标,同series中的
{Array} data
标注图形数据,见下
series.markPoint.data
标注的数据内容数组,最直接的数据项可直接指定标注位置(x,y)以及相关名称(name)和值(value),在饼图、雷达图、力导、和弦图中基本如下:
{name: '标注1', value: 100, x: 50, y: 20},
{name: '标注2', value: 200, x: 150, y: 120},
在存在直角坐标系的图表如折线、柱形、K线、散点图中,除了通过直接指定位置外,如果希望标注基于直角系的定位,可以通过xAxis,yAxis实现,这两个值都会根据坐标轴类型以及传入参数的不同自动换算如下:
{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为数值轴时,不管传入是什么,都被理解为数值后做空间位置换算
更为实用的,在折线、柱形、散点图中,可以直接使用如下几个开箱即用的特殊点标注
{type : 'max', name: '自定义名字'},
{type : 'min', name: '自定义名字'}
标注数据比较特殊也最为常用的地图上,除了直接位置定位外,如果希望基于地理坐标标注,并且能够随地图漫游缩放,需要为markPoint提供一份geoCoord,如下
{name: '北京', value: 100},
{name: '上海', value: 200},
geoCoord : {
"北京":[116.46,39.92],
// 支持数组[经度,维度]
"上海": {x: 121.48, y: 31.22},
// 支持对象{x:经度,y:纬度}
series.markLine
系列中的数据标线内容
{Array | string} symbol
['circle', 'arrow']
标线起始和结束的symbol介绍类型,如果都一样,可以直接传string,同series中的
{Array | number | Function} symbolSize
标线起始和结束的symbol大小,半宽(半径)参数,如果都一样,可以直接传number或function,同series中的
{Array | number} symbolRotate
标线起始和结束的symbol旋转控制,同series中的
{Object} effect
show: false,
period: 15,
scaleSize : 2,
color : null,
shadowColor : null,
shadowBlur : null
标线图形炫光特效:
show 是否开启,默认关闭
period 运动周期,无单位,值越大越慢,默认为15
scaleSize 放大倍数,以markLine lineWidth为基准
color 炫光颜色,默认跟随markLine itemStyle定义颜色,
shadowColor 光影颜色,默认跟随color
shadowBlur 光影模糊度,默认根据scaleSize计算
{Object} itemStyle
标线图形样式属性,同series中的
{Object} geoCoord
地图特有,标线图形定位坐标,同series中的
{Array} data
标线图形数据,见下
series.markLine.data
标线的数据内容数组,最直接的数据项可直接指定标线起始和结束位置(x,y)以及相关名称(name)和值(value),在饼图、雷达图、力导、和弦图中基本如下:
{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实现,这两个值都会根据坐标轴类型以及传入参数的不同自动换算如下:
{name: '标线1起点', value: 100, xAxis: 1, yAxis: 20},
// 当xAxis为类目轴时,数值1会被理解为类目轴的index
{name: '标线1终点', xAxis: '周三', yAxis: 20},
// 当xAxis为类目轴时,字符串'周三'会被理解为与类目轴的文本进行匹配
{name: '标线2起点', value: 200, xAxis: 10, yAxis: 20},
// 当xAxis或yAxis为数值轴时,不管传入是什么,都被理解为数值后做空间位置换算
{name: '标线2终点', xAxis: 270, yAxis: 190}
更为实用的,在折线、柱形、散点图中,可以直接使用如下几个开箱即用的特殊点作为标线类型
{type : 'max', name: '自定义名字'},
// 最大值水平线或垂直线
{type : 'min', name: '自定义名字'},
// 最小值水平线或垂直线
{type : 'average', name: '自定义名字'},// 平均值水平线或垂直线
// 最小值指向最大值的连线
{type : 'min', name: '自定义名字'},
{type : 'max', name: '自定义名字'}
// 散点图中存在两个数值型坐标,默认用纵轴值计算特殊点,可以通过valueIndex:0指定为横轴特殊点
{type : 'max', name: '自定义名字', valueIndex:0}
标线数据比较特殊也最为常用的地图上,除了直接位置定位外,如果希望基于地理坐标标线,并且能够随地图漫游缩放,需要为markLine提供一份geoCoord,如下
{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: {
emphasis: {
其中normal和emphasis属性为对象,其包含:
{color} color
颜色,主色
{Object} lineStyle
折线图,K线图 ,地图,markLine
线条样式,详见
{Object} areaStyle
堆积折线图,地图
区域样式,详见
{Object} chordStyle
弦样式,详见
{string} borderColor
柱形图,折线图(symbol),散点图(symbole),饼图,markPoint
柱形边框颜色
{number} borderRadius
柱形边框圆角,单位px,默认为0
{number} borderWidth
柱形图,折线图(symbol),散点图(symbole),饼图,markPoint
柱形边框线宽,单位px,默认为1
{Object} label
{show: true,
position:'outer'}
折线图,柱形图,K线图,散点图,饼图 ,地图,力导向,markPoint,markLine
标签,饼图默认显示在外部,离饼图距离由labelLine.length决定,地图标签不可指定位置
折线图,柱形图,K线图,散点图可指定position见下
{Object} labelLine
{show: true}
饼图标签视觉引导线,默认显示
其中标签label属性为对象,其包含:
{boolean} show
标签显示策略,可选为:true(显示) | false(隐藏)
{string} position
'outer' | null
标签显示位置,地图标签不可指定位置
饼图可选为:'outer'(外部) | 'inner'(内部),
折线图,柱形图,K线图,散点图默认根据布局自适应为'top'或者'right',可选的还有:'inside'|'left'|'bottom'
{string | Function} formatter
标签文本格式器,通用,同,支持模板、方法回调,不支持异步回调
{Object} textStyle
标签的文本样式(详见)
其中饼图标签视觉引导线labelLine属性为对象,其包含:
{boolean} show
饼图标签视觉引导线显示策略,可选为:true(显示) | false(隐藏)
{number} length
线长 ,从外圆边缘起计算,可为负值
{Object} lineStyle
线条样式,详见
通过有效设置itemStyle的normal和emphasis选项可实现个性化的显示策略,比如希望饼图文字标签默认隐藏,并在鼠标悬浮时通过一条红色的视觉引导线显示在饼图外部区域,可以如下设置:
itemStyle: {
show: false
labelLine: {
show: false
emphasis: {
show: true,
position: &#39;outer&#39;
labelLine: {
show: true,
lineStyle: {
color: &#39;red&#39;
高度个性化:
力导向布局
线条(线段)样式
{color} color
{string} type
线条样式,可选为:'solid' | 'dotted' | 'dashed'
{number} width
{color=} shadowColor
rgba(0,0,0,0)
折线主线(IE8+)有效,阴影色彩,支持rgba
{number=} shadowBlur
折线主线(IE8+)有效,阴影模糊度,大于0有效
{number=} shadowOffsetX
折线主线(IE8+)有效,阴影横向偏移,正值往右,负值往左
{number=} shadowOffsetY
折线主线(IE8+)有效,阴影纵向偏移,正值往下,负值往上
区域填充样式
{color} color
{string} type
填充样式,目前仅支持'default'(实填充)
{color} color
{string} decoration
修饰,仅对tooltip.textStyle生效
{string} align
水平对齐方式,可选为:'left' | 'right' | 'center'
{string} baseline
垂直对齐方式,可选为:'top' | 'bottom' | 'middle'
{string} fontFamily
'Arial, Verdana, sans-serif'
{number} fontSize
字号 ,单位px
{string} fontStyle
样式,可选为:'normal' | 'italic' | 'oblique'
{string | number} fontWeight
粗细,可选为:'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900
loadingOption
过渡显示,loading(读取中)的选项。
{string} text
'Loading...'
显示话术 ,'\n'指定换行
{string | number} x
水平安放位置,默认为全图居中,可选为:'center' | 'left' | 'right' | {number}(x坐标,单位px)
{string | number} y
垂直安放位置,默认为全图居中,可选为:'center' | 'bottom' | 'top' | {number}(y坐标,单位px)
{Object} textStyle
显示话术的文本样式(详见)
{string} effect
loading效果,可选为:'spin' | 'bar' | 'ring' | 'whirling' | 'dynamicLine' | 'bubble'
{Object} effectOption
loading效果选项,详见zrender
{number} progress
指定当前进度[0~1],个别效果有效。
backgroundColor
{color} null,全图默认背景,默认为null,同'rgba(0,0,0,0)'
&&&&'#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
&&&&'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
&&&&'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
&&&&'#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
],默认颜色序列,循环使用
symbolList
&&&&'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} ' : ',数据合并名字与数值间连接符
{boolean} true,是否启用图表初始化动画,默认开启,建议IE8-关闭
addDataAnimation
{boolean} true,是否启用动态数据接口动画效果,默认开启,建议IE8-关闭
animationThreshold
{number} 2500,动画元素阀值,产生的图形原素超过2500不出动画,建议IE8-关闭
animationDuration
{number} 2000,动画时长,单位ms,支持多级控制
animationEasing
{string} 'BounceOut',主元素的缓动效果,支持多级控制,详见,可选有:
'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.* 设置特定数据项的特殊配置,最高优先级;
附录:地图扩展
支持标准动态扩展地图类型,try
// 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(callback) {
$.getJSON('geoJson/HK_geo.json',callback);
// step3*: 对于数据地图类型,一般不需要特殊的投射算法,ECharts统一使用了简化的投射算法,因而对于个别地区可能需要人为调整,可以通过specialArea指定个别地区安的经纬度坐标和区间大小,如
require('echarts/util/mapData/params').params.USA = {
getGeoJson: function(callback) {
$.getJSON('geoJson/USA_geo.json', callback);
specialArea : {
Alaska : {
// 把阿拉斯加移到美国主大陆左下方
left : -131,
// 安放位置起始点:西经113度
// 安放位置起始点:北纬31度
width : 15,
// 区间大小宽高不大于15度
height : 15
Hawaii : {
left : -112,
width : 5,
height : 5
'Puerto Rico' : {
// 波多黎各
left : -76,
width : 2,
height : 2
// step4: 已经有这个地图类型了,可以在option中使用了
option.series = [
type: 'map',
mapType: 'HK', // 自定义扩展图表类型
附录:组件和图表的实例接口
为了实现更高级的功能和需求定制,ECharts团队做了个艰难的决定,开放组件和图表实例接口。这些组件和图表实例都被挂载到init所得到的实例上(如myChart),分别存放在chart和component下,如可以通过myChart.chart.map得到当前地图实例并可以读取并调用里面的各种属性和方法。
【重要】请注意,ECharts接口基于数据驱动设计,这些实例并不为开放准备,虽然你可以无限制的访问,甚至动态的覆盖重写,但这可能会导致图表无法正常工作或随着版本升级无法得到兼容,所以我们仅列出如下部分方法和属性作为使用上的参考(或者说限制),我们会尽最大的努力去保证这些方法或属性的稳定和向下兼容,并且保证在出现无法兼容的更新时在changelog上通告。如果你使用了并不出现在下述文档中的方法或属性将得不到这份保证,请谅解。
组件实例接口
ECharts包含组件有:title、legend、dataRange、toolbox、tooltip、dataZoom、grid、xAxis、yAxis、polar
提示框,鼠标悬浮交互时的信息提示,每个图表最多仅有一个提示框。可使用的属性和方法有:
组件类型,等于PONENT_TYPE_LEGEND
{Function}
显示提示框。参数:{Object} param (见下) 返回:null
参数格式:{ seriesIndex: 0, seriesName:'', dataInex:0 } // line、bar、scatter、k、radar
参数格式:{ seriesIndex: 0, seriesName:'', name:'' } // map、pie、chord
{Function}
隐藏提示框。参数:无 返回:null
图例,每个图表最多仅有一个图例。可使用的属性和方法有:
组件类型,等于PONENT_TYPE_LEGEND
{Function}
isSelected
图例开关相关,判断传入的名称当前是否处于开启状态。参数:{string} name (名称) 返回:{boolean} true为开启,false为关闭
{Function}
getSelectedMap
图例开关相关,获取当前的全部图例开关状态图。参数:无 返回:{Object} {name:value}的键值表,name为名称,value为状态值,true为开启,false为关闭
{Function}
图例颜色相关,获取传入的名称所对应的颜色,如果传入名称未出现在已有的图例数据项中,将生成一个新的颜色与传入名称匹配并返回该颜色参数:{string} name (名称) 返回:{color} 匹配颜色
值域选择,每个图表最多仅有一个值域控件。可使用的属性和方法有:
组件类型,等于PONENT_TYPE_DATARANGE
{Function}
值域控件颜色相关,获取传入的值所对应的颜色参数:{number} value (值) 返回:{color} 匹配颜色
数据区域缩放。与toolbox.feature.dataZoom同步,仅对直角坐标系图表有效。可使用的属性和方法有:
组件类型,等于PONENT_TYPE_DATAZOOM
{Function}
absoluteZoom
数据区域缩放控制参数:{Object} {start : value, end : value, start2 : value, end2 : value} (缩放参数) 返回:无,作用:根据传入的value改变数据显示区域,value有效值为[0,100],一般仅指定主区域控制start、end即可,在散点图中可以同时做两个维度的区域缩放,可通过额外指定start2、end2实现。
直角坐标系内绘图网格。可使用的属性和方法有:
组件类型,等于PONENT_TYPE_GRID
{Function}
网格左上角在图形显示中的横坐标,单位px。参数:无
返回:{number} 坐标值
{Function}
网格右下角在图形显示中的横坐标,单位px。参数:无
返回:{number} 坐标值
{Function}
网格左上角在图形显示中的纵坐标,单位px。参数:无
返回:{number} 坐标值
{Function}
网格右上角在图形显示中的纵坐标,单位px。参数:无
返回:{number} 坐标值
{Function}
网格在图形显示中的实际宽度,单位px。参数:无
返回:{number} 宽度值
{Function}
网格在图形显示中的实际高度,单位px。参数:无
返回:{number} 高度值
{Function}
网格实际区域数据,等同一次返回getX,getY,getWidth,getHeight。参数:无
返回:{Object} {x : value, y : value, width : value, height : value}
xAxis/yAxis
横纵坐标轴。可使用的属性和方法有:
{Function}
获取传入index的坐标轴实例,存在最多上下左右4条坐标轴,坐标轴可以为类目轴或数值轴,获取坐标轴实例和可用的坐标轴方法见下节参数:{number} 0/1 (坐标轴index) 返回:{categoryAxis | valueAxis} 指定index的坐标轴实例,可以是类目轴或数值轴
categoryAxis
类目轴。可使用的属性和方法有:
组件类型,等于PONENT_TYPE_AXIS_CATEGORY
{Function}
根据类目名字值换算绘图位置,单位px参数:{string} name (名字) 返回:{number} 坐标值,重名类目值返回第一个匹配的
{Function}
getCoordByIndex
根据类目轴数据索引换算绘图位置,单位px参数:{number} index (索引) 返回:{number} 坐标值,index小于0返回坐标起点,大于类目长度返回重点
{Function}
getNameByIndex
根据类目轴数据索引换算类目轴名称参数:{number} index (索引) 返回:{string} 名字
{Function}
getIndexByName
根据类目轴名称换算类目轴数据索引参数:{string} name (名字) 返回:{number} 索引,重名类目值返回第一个匹配的
数值轴。可使用的属性和方法有:
组件类型,等于PONENT_TYPE_AXIS_VALUE
{Function}
根据数值换算绘图位置,单位px参数:{number} value (数值) 返回:{number} 坐标值
极坐标。可使用的属性和方法有:
组件类型,等于PONENT_TYPE_POLAR
{Function}
获取每个指标上某个value对应的坐标,单位px参数:{number} polarIndex (极坐标索引), {number} indicatorIndex (指标索引), {number} value (数值) 返回:{Array} [x, y] 坐标值
图表实例接口
ECharts支持的图表有:line、bar、scatter、k、pie、radar、chord、force、map
地图。可使用的属性和方法有:
图表类型,等于config.CHART_TYPE_MAP
{Function}
getPosByGeo
经纬度转平面坐标,单位px参数:{string} mapType (地图类型), {Array} [ew,ns] (经纬度) 返回:{Array} [x, y] 坐标值
{Function}
getGeoByPos
平面坐标转经纬度,单位px参数:{string} mapType (地图类型), {Array} [x, y] (坐标值 ) 返回:{Array} [ew,ns] 经纬度
附录:一个直观的事例
查看更多实例 ,或者使用这个 或 作为你的模板
// 图表实例化------------------
// srcipt标签式引入
var myChart = echarts.init(document.getElementById('main'));
// ajax getting data...............
// 过渡---------------------
myChart.showLoading({
text: &#39;正在努力的读取数据中...&#39;,
//loading话术
// ajax return
myChart.hideLoading();
// 图表使用-------------------
var option = {
// 图例配置
padding: 5,
// 图例内边距,单位px,默认上下左右内边距为5
itemGap: 10,
// Legend各个item之间的间隔,横向布局时为水平间隔,纵向布局时为纵向间隔
data: ['ios', 'android']
tooltip: {
// 气泡提示配置
trigger: 'item',
// 触发类型,默认数据触发,可选为:'axis'
// 直角坐标系中横轴数组
type: 'category',
// 坐标轴类型,横轴默认为类目轴,数值轴则参考yAxis说明
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
// 直角坐标系中纵轴数组
type: 'value',
// 坐标轴类型,纵轴默认为数值轴,类目轴则参考xAxis说明
boundaryGap: [0.1, 0.1],
// 坐标轴两端空白策略,数组内数值代表百分比
splitNumber: 4
// 数值轴用,分割段数,默认为5
name: 'ios',
// 系列名称
type: 'line',
// 图表类型,折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
name: 'android',
// 系列名称
type: 'line',
// 图表类型,折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [45, 123, 145, 526, 233, 343, 44, 829, 33, 123, 45, 13]
myChart.setOption(option);
// 增加些数据------------------
option.legend.data.push('win&#39);
option.series.push({
name: 'win',
// 系列名称
type: 'line',
// 图表类型,折线图line、散点图scatter、柱状图bar、饼图pie、雷达图radar
data: [112, 23, 45, 56, 233, 343, 454, 89, 343, 123, 45, 123]
myChart.setOption(option);
// 图表清空-------------------
myChart.clear();
// 图表释放-------------------
myChart.dispose();

我要回帖

更多关于 echarts 柱状图叠加 的文章

 

随机推荐