常见图表配置项EChart4.x
titile (标题)
如上图:某地区蒸发量和降水量就是标题
所有的textStyle里面都有rich这个属性,通常和formatter（parameter）一起使用
注:在查看ECharts的配置项时,有`title.textStyle.rich`,
这个富文本属性貌似不起作用,加了很多配置项都没有用了,`title.text`也不支持富文本和html,我在网上也没找到在标题带有富文本的图表。rich还有很多坑,例如不支持文本嵌套{a|xxx{b|xxx}}.title: {
id: 'hao', //<string>可用于option或者API中引用组件,默认不指定,我太菜了还没用过
show: true, //<boolean>是否显示标题,默认值:true
text: 'ABC \n DEF', //<string> 大标题,默认值:'',支持\n换行
subtext: 'abc \n def',//<string> 小标题,
link: 'http://www.sht2019.cn', //<string> 给大标题添加超链接
sublink: 'http://www.sht2019.cn', //<string>小标题链接,和link一样
target: 'blank', //<string>blank/self
subtarget: 'blank', //<string>大标题标题超链接打开窗口方式,和target一样
textAlign: 'auto',//<string>大小标题总的水平对齐方式,默认值:'auto',可值:'left','right','center'
textVerticalAlign: 'auto',//<string>大小标题总的垂直对齐方式,默认值:'auto',可选值:'top','bottom','middle'
triggerEvent: false,//<boolean>文字的事件监听器是否开启
padding: 5,//<number/array>标题内边距,默认值:5(px),上右下左[1,2,3,4]
itemGap: 10,//<number>大小标题间距,默认值:10(px)
zlevel: 0,//<number>画布的z-index
z: 2,//<number>画布里面组件的z-index
left: 'auto',//<string/number>grid组件离容器左侧的距离,默认值:'auto',可选值:'left','center','right',数字,'百分比'
right: 'auto',//<string/number>grid组件离容器右侧的距离,默认值:'auto',可选值:数字,'百分比'
top: 'auto',//<string/number>grid组件离容器上侧的距离,默认值:'auto',可选值:'top','middle','bottom',数字,'百分比'
bottom: 'auto',//<string>grid组件离容器下侧的距离,默认值:'auto',可选值:数字,'百分比'
backgroundColor: 'transparent',//<string>标题背景色,默认值:'transparent',可选:16进制,英文颜色,rgb,{image:'url'}
borderColor: '#ccc',//<string>标题的边框颜色,默认值:'#ccc',可选:英文颜色,rgb,16进制
borderWidth: 0,//<number>标题的边框线宽,默认值:0
borderRadius: 0,//<number>标题的边框圆角半径,默认值:0(px),支持数组,和css的border-radius要求一样
shadowBlur: 0,//<number>图形阴影的模糊大小,必须show:true,且backgroundColor不是transparent
shadowColor: '#000',//阴影颜色,无默认值,必须show:true
shadowOffsetX: 0,//<number>阴影水平方向偏移距离
shadowOffsetY: 0,//<number>阴影垂直方向偏移距离
textStyle: { // 给主标题的文字设置样式
color: '#333', //<string> 主标题字体颜色,默认值:'#333',16进制,rgb,英文的颜色都支持,
fontStyle: 'normal', //<string> css的font-style,设置主标题字体风格,默认值:'normal',可选值:normal,italic(斜体),oblique(倾斜),反正我看不出来后两个有啥区别
fontWeight: 'normal', //<string> css的font-weight,设置主标题字体粗细,默认值:'normal',可选的值包括100-900的整百数以及normal,bold(粗),bolder(更粗),lighter(更细)
fontFamily: 'sans-serif', //<string> css的font-family,设置主标题字体风格系列,默认值:'sans-serif'
fontSize: 18,//<number> css的font-size,设置主标题文字大小,默认值:18(px)
align: 'auto',//<string>主标题文字水平对齐方式,默认值:'auto',可选:'left','center','right'
verticalAlign: 'auto',//<string>主标题文字垂直对齐方式,默认值:'auto',可选:'top','middle','bottom'
lineHeight: 20,//<number>css的line-height,设置主行高,无默认值
width: '100%', //<string/number> 文字块的宽度,一般不指定,默认是文字宽度,可以是数字(px)或字符串(百分比)
height: '100%', //<string/number> 文字块高度,其它的和width一样
textBorderColor: 'transparent',//<string> 文字描边颜色,默认值:'transparent'
textBorderWidth: 0, //<number> 文字描边的厚度或者宽度,默认值:0
textShadowColor: 'transparent', //<string> 文字阴影颜色,默认值:'transparent'
textShadowBlur: 0,//<number> 文字阴影的长度,默认值:0
textShadowOffsetX: 0,//<number> 文字阴影水平偏移量,默认值:0
textShadowOffsetY: 0,//<number> 文字阴影垂直偏移量,默认值:0
},
subTextStyle: { //小标题文字样式,参数除了textStyle里有的还有其它参数,有些默认值不一样,
//下面只写默认值不一样的以及textStyle里没有的参数
//大标题有其它的方式实现,没有与小标题的参数一样而已
color: '#aaa',
fontSize: 12,
},
}tooltip (悬浮框)
鼠标放在图表数据显示的悬浮框内容称为工具条提示
实际上配置项有多个不同地方tooltip
option.legend.tooltip 图例放上去的悬浮框，通常例图的字显示不完就会显示这个
option.grid.tooltip/polar.tooltip/single.tooltip 暂时没有发现这些属性怎么玩
option.series.tooltip
option.series.data.tooltiptooltip:{
show: true,//<boolean>是否显示工具条,默认显示
trigger: 'item/axis/none',//<string>悬浮框的提示触发事件，默认item,item只显示该点的数据,axis显示是对应列的数据
//item主要用于散点图，饼图等无类目轴的图表中使用
//axis坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
axisPointer: {//配置坐标轴的提示悬浮框
type: 'line/shadow/cross/none',//<string>,测试貌似只有cross有点效果,指示器类型
axis: 'auto/x/y/radius/angle',//<string>指示器的坐标轴取哪里的值
snap: false,//<boolean>坐标轴指示器是否自动吸附到点上。默认自动判断
z: 10,//<number>坐标轴的提示悬浮框的z-index
label: {...},//支持数字精确度,文本宽度，颜色，字体风格，边距，边框，字体盒子阴影
lineStyle: {...},//type = line有用，设置线的颜色
shadowStyle: {...},//type = shaow 有用，设置阴影的颜色
crossStyle: {...},//type = cross有用
animation: true,//<boolean>是否开启动画
animationThreshold: 2000,//<number>是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画
animationDuration: 1000,//<nubmber>类似css duration属性
animationEasing: cubicOut,//<number> 类似css ease 属性
animationDelay: 0,//<number>动画的延时
animationDurationUpdate: 200,//<number/fun>数据动画的更新时长
animationEasingUpdate: exponentialOut,//<string>数据更新动画的缓动效果。
animationDelayUpdate: 0,//<number/fun>数据更新动画的延迟
},
showContent:true,//<boolean>是否显示提示框浮层
alwaysShowContent:true, //<boolean>是否永远显示提示框内容
triggerOn:"mousemove",//<string>提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
showDelay:0,//<number>浮层显示的延迟，单位为 ms
hideDelay:100,//<number>浮层隐藏的延迟，单位为 ms
enterable:false,//<number>鼠标是否可进入提示框浮层中
rederMode: 'html',//<string>浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；此外还可以设置为 'richText' 表示以富文本的形式渲染
confine:false,//<boolean>是否将 tooltip 框限制在图表的区域内
transitionDuration:0.4,//<number>提示框浮层的移动动画过渡时间，单位是 s,设置为 0 的时候会紧跟着鼠标移动
position:['50%', '50%'],//<string/array/fun>提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
formatter:"{b0}: {c0}<br />{b1}: {c1}",//提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等
backgroundColor:"transparent",//<string>标题背景色
borderColor:"#ccc",//<stirng>边框颜色
borderWidth:0,//<number>边框线宽
padding:5,//<number/array>图例内边距，单位px [all] [上, 下] [上右下左}
textStyle:gTextStyle,//<Object>文本样式,支持字体颜色，长宽阴影
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'//<string>额外附加到浮层的 css 样式
}legend:(图形例图)
上图的小方块蒸发量和降水量两个小方块，称为legend
legend: {
type: 'plain/scroll', //<string>图例类型，默认plain不支持翻页，选了scoll(用于图例过多的时候使用)就可以翻页了
id: 'xxx', //<number>组件id,默认不指定,指定可用于在option或API中引用组件
show: true,//<boolean>控制图例组件是否显示,默认值:true
zlevel: 0, //<number>图例的zlevel值,默认值:0
z: 2,//<number>图例的z值,控制图形的先后顺序,默认值:2,优先级比zlevel低,且不会创建新的canvas
left: 'auto',//<string>图例组件离容器左侧的距离,默认值:auto,可选:'left','center','right',数字,'百分比'
right: 'auto',//<string>图例组件离容器右侧的距离,默认值:auto,可选:数字,'百分比'
top: 'auto',//<string>图例组件离容器上侧的距离,默认值:auto,可选:'top','middle','bottom',数字,'百分比'
bottom: 'auto',//<string>图例组件离容器下侧的距离,默认值:auto,可选:数字,'百分比'
width: 'auto',//<string>图例组件的宽度,默认值:'auto'
height: 'auto',//<string>图例组件的高度,默认值:'auto'
orient: 'horizontal',//<string>图例组建的布局朝向,可选横向纵向,默认值:'horizontal'
align: 'auto',//<string>图例标记和文本的对齐方式,默认值:'auto',可选:'auto','left','right'
padding: 5,//<number>图例内边距,默认值:5(px),可选值:数组,[1,2](1指上下1px内边距,2指左右2px内边距),[1(上),2(右),3(下),4(左)]
itemGap: 10,//<number>每个图例之间的间距,默认值:10(px)
itemWidth: 25,//<number>每个图例标记的宽度,默认值:25
itemHeight: 14,//<number>每个图例标记的高度,默认值:14
symbolKeepAspect: true,//图标(来自系列的symbol或用户自定义的icon)是否保持长宽纵横比
formatter: function(name){return 'xxx'+name;},//格式化图例的文本,默认值:null
selectedMode: true,//图例选择模式,默认值:true,可以通过点击图例控制系列显示或隐藏,可选:false,'single','multiple'
inActiveColor: '#ccc',//<string>图例关闭时的颜色
selected: {'蒸发量':true,'降水量':false},//<Obejct>控制图例是否被选中
textStyle: gTextStyle,//<Object>文本样式,支持字体颜色，长宽阴影,
tooltip: gTooltip,//<Object>设置图列的悬浮框样式，通常图例的名字过长的时候需要用到这个
data: [{
name: '蒸发量',//<string>
icon: 'circle/rect/roundRect/triangle/diamond/pin/arrow/none/(image://./src.png)',//<string>
//圆形circle
//方块rect
//圆角的方块roundRect
//等腰三角形triangle
//菱形diamond
//圆形pin
//回旋镖arrow
textStyle: gTextStyle,
}],
backgroundColor: 'transparent',//<string>图例的背景色
borderColor: '#ccc',//<string>边框的样式
borderWidth: 1,//<number>边框的宽度
borderRadius: 0,//<number>边框的圆角度
shadowBlur: 10,//<number>羽化度,图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
shadowColor: ''#FFF,//<string>阴影颜色
shadowOffsetX: 0,//<number>阴影的x偏移
shadowOffsetY: 0,//<number>阴影的y偏移
scrollDataIndex: 0,//<number>type = scroll 指分页从第几条开始,
pageButtonItemGap: 5,//<number>type = scroll 图例控制块中，按钮和页信息之间的间隔
pageButtonGap: null,//<number>type = scroll 图例控制块和图例项之间的间隔。
pageButtonPosition: 'strat/end',//<string>type = scroll 图例控制块的位置
//start 控制块在左或上。
//end 按钮快在右或下
pageFormatter: '{current}/{total}',//<string>type = scroll 图例控制块中，页信息的显示格式。
pageIcons: {
horizontal: ['image://http://xxx.xxx.xxx/a/b.png'],//<string>横的菱形图标，orient = horizontal
vertical: ['image://http://xxx.xxx.xxx/a/b.png'],//<string>竖的菱形图标 orient = vertical
},//分页图标的设置
pageIconColor: '#2f4554',//<string>type = scroll 翻页按钮的颜色
pageIconInactiveColor: '#aaa',//<string>type = scroll 指分页从第几条开始,
pageIconSize: 15,//<number>type = scroll 翻页按钮不激活时（即翻页到头时）的颜色。
pageTextStyle: gTextStyle,//type = scroll 图例页信息的文字样式
animation: gAnimation,//type = scroll 图例分页的动画
animationDurationUpdate: 8,//<number>type = scroll 图例翻页时的动画时长
}toolbox:(图表工具栏)
上图的右上角数据视图,保存图片,切换模式,这些就叫工具条
1.导出图片
2.数据视图 => 转换成类似Excel排版类型的数据
3.动态类型切换 => 折线图/柱状图/带阴影的柱状图/平铺，貌似没反应
4.数据区域缩放 => 放大图的某一部分，类似放大镜
5.重置 => 重新恢复初始的图形toolbox = {
show: true,//是否显示工具栏组件,默认显示
orient: "horizontal",//工具栏 icon 的布局朝向'horizontal'横项 / 'vertical'垂直
itemSize: 15,//工具栏 icon 的大小
itemGap: 10,//工具栏 icon 每项之间的间隔
showTitle: true,//是否在鼠标 hover 的时候显示每个工具 icon 的标题
feature: {
saveAsImage: {//保存为按钮的配置
type: 'png/jpg/jpeg',
name: 'name',//保存图片的名称
backgroundColor: 'auto',//图片背景色
excludeComponents: ['toolbox'],//保存为图片时忽略的组件列表，默认忽略工具栏
show: true,//是否显示该工具
title: '保存为图片',//鼠标放上去的标题
icon: 'image://http://xxx.xxx.xxx/a/b.png',//按钮图片的地址
iconStyle: gIconStyle,//按钮图片的背景，阴影，和文本对齐方式
emphasis: {...},//不知道
pixelRatio: 1,//保存图片的分辨率比例，默认跟容器相同大小，如果需要保存更高分辨率的，可以设置为大于 1 的值，例如 2
},
restore: {//重置按钮的保存，同上
show: true,//是否显示
title: '还原',
icon: ...,
iconStyle: {...},
emphasis: {...},
},
dataView: {//切换视图按钮的配置
show: true,
title: '数据视图',
icon: ...,
iconStyle: {...},
emphasis: {...},
readOnly: false,//是否不可编辑（只读）
optionToContent: Function,//文本的格式function(obj),支持html
contentToOption: Function,//在使用 optionToContent 的情况下，如果支持数据编辑后的刷新，需要自行通过该函数实现组装 option 的逻辑
lang: ['数据视图', '关闭', '刷新'],//数据视图上的三个按钮文字
backgroundColor: '#fff',
textareaColor: '#fff',//数据视图浮层文本输入区背景色
textareaBorderColor: '#333',//数据视图浮层文本输入区边框颜色
textColor: '#000',
buttonColor: '#c23531',
buttonTextColor: '#fff',
},
dataZoom: {//数据区域缩放。目前只支持直角坐标系的缩放
show: true,
title: {...},
icon: {...},
iconStyle: {...},
emphasis: {...},
xAxisIndex: ...,//不知道
yAxisIndex: ...,//不知道
},
magicType: {//图表类型的切换按钮
show: true,
type: [line/bar/stack/tiled],
title: {
'line':'name',
'bar': 'name',
'stack': 'name',
'tiled': 'name',
},//titile.
icon: {
'line':'imgSrc',
'bar': 'imgSrc',
'stack': 'imgSrc',
'tiled': 'imgSrc',
},
iconStyle: {...},
emphasis: {...},
option: {...},//各个类型的专有配置项。在切换到某类型的时候会合并相应的配置项
seriesIndex: {...},//各个类型对应的系列的列表
},
brush: {...},//区域选择组件,比较复杂
},
zlevel: 0,//所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z: 2,//所属组件的z分层，z值小的图形会被z值大的图形覆盖
left: "center",//组件离容器左侧的距离,'left', 'center', 'right','20%'
top: "top",//组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right: "auto",//组件离容器右侧的距离,'20%'
bottom: "auto",//组件离容器下侧的距离,'20%'
width: "auto",//图例宽度
height: "auto",//图例高度
}grid:(图表的框框)
这个类似css的grid,如上图被红色框框包住的区域就叫grid,重复的属性就不一一解释了
配置多个grid时,在对应的xAxis，yAxis的gridIndex的值对应grid的下标配置的属性
grid: [
{x: '7%', y: '7%', width: '38%', height: '38%'},
{x2: '7%', y: '7%', width: '38%', height: '38%'},
{x: '7%', y2: '7%', width: '38%', height: '38%'},
{x2: '7%', y2: '7%', width: '38%', height: '38%'}
],
xAxis: [
{gridIndex: 0, min: 0, max: 20},
{gridIndex: 1, min: 0, max: 20},
{gridIndex: 2, min: 0, max: 20},
{gridIndex: 3, min: 0, max: 20}
],
yAxis: [
{gridIndex: 0, min: 0, max: 15},
{gridIndex: 1, min: 0, max: 15},
{gridIndex: 2, min: 0, max: 15},
{gridIndex: 3, min: 0, max: 15}
],grid: {
show: false,//是否显示网格边框
zlevel: 0,
z: 2,
x: 100,//右移100px
y: 100,//下移100px
left: '10%',
top: 60,
right: '10%',
bottom: 60,
width: 'auto',
height: 'auto',
containLabel: false,//grid 区域是否包含坐标轴的刻度标签,感觉没啥用处，true的时候增长宽
backgroundColor: 'transparent',
borderColor: 'red',
borderWidth: 1,
shadowBlur: ...,
shadowColor: ...,
shadowOffsetX: 0,
shadowOffsetY: 0,
}xAxis/yAxis:(坐标轴)
x,y轴大家都应该知道,注意有些图表是没有x,y轴的
xAxis/yAxis:{
show: true,
gridIndex: 0,//对应的gridIndex的索引
position: 'top/bottom',
offset: 0,//X 轴相对于默认位置的偏移
type: 'category',//坐标轴类型
//value 数值轴，适用于连续数据。
//category 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据
//time 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度
//log 对数轴。适用于对数数据
name: '水量',//x/y轴的名字
nameLocation: 'end/start/middle/center',//x/y坐标轴的位置
nameTextStyle: gTextStyle,
nameGap: 15,//坐标轴名称与轴线之间的距离
nameRotate: null,//坐标轴名字旋转，角度值,类似css rotate
inverse: false,//是否是反向坐标轴
boundaryGap: ['20%', '20%'],//坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
min: null,//坐标轴刻度最小值
max: null,//坐标轴刻度最大值
/*max: function(value) { 求最大值
return value.max - 20;
}*/
scale: false,//是否是脱离 0 值比例,在设置 min 和 max 之后该配置项无效。
splitNumber: 5,//坐标轴的分割段数,实际上没啥用
minInterval: 0,//自动计算的坐标轴最小间隔大小，例如可以设置成1保证坐标轴分割刻度显示成整数
maxInterval: 10,//自动计算的坐标轴最大间隔大小
interval: ...,//强制设置坐标轴分割间隔
logBase: 10,//对数轴的底数，只在对数轴中（type: 'log'）有效
silent: false,//坐标轴是否是静态无法交互
triggerEvent: false,//坐标轴的标签是否响应和触发鼠标事件，默认不响应
axisLine: {//坐标线条样式的配置
show: true,//是否显示坐标轴轴线
onZero: true,//X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
onZeroAxisIndex: 0,//当有双轴时，可以用这个属性手动指定，在哪个轴的 0 刻度上
symbol: 'none',//轴线两边的箭头,两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']
symbolSize: [10, 15],//轴线两边的箭头的大小，第一个数字表示宽度（垂直坐标轴方向），第二个数字表示高度（平行坐标轴方向）
lineStyle: {//坐标轴的样式
color: '#333',
width: 1,
type: 'solid',
shadowBlur: ...,
shadowColor: ...,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: ...,
},
},
axisTick: {//坐标轴刻度配置
show: true,//是否显示刻度
alignWithLabel: false,//是否值于刻度与标签对齐
interval: 'auto',//坐标轴刻度的显示间隔，在类目轴中有效
inside: false,//坐标轴刻度是否朝内，默认朝外
length: 5,//坐标轴刻度的长度
lineStyle: gLineStyle,
},
axisLabel: {//坐标轴的标签设置
show: true,
interval: 'auto',//坐标轴刻度标签的显示间隔
inside: false,
rotate: 0,
margin: 8,
formatter: null,
showMinLabel: null,//是否显示最小 tick 的 label
showMaxLabel: null,
color: ...,
fontStyle: 'normal',
fontWeight: normal,
fontFamily: 'sans-serif',
fontSize: 12,
align: ...,
verticalAlign: ...,
lineHeight: ...,
backgroundColor: 'transparent',
borderColor: 'transparent',
borderWidth: 0,
borderRadius: 0,
padding: 0,
shadowColor: 'transparent',
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
width: ...,
height: ...,
textBorderColor: 'transparent',
textBorderWidth: 0,
textShadowColor: 'transparent',
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
},
splitLine: {//坐标轴在 grid 区域中的分隔线
show: true,
interval: 'auto',//网格的间距
lineStyle: gLineStyle,
},
splitArea: {//坐标轴在 grid 区域中的分隔区域
interval: 'auto',
show: false,
areaStyle: {
color: ['rgba(250,250,250,0...,
shadowBlur: ...,
shadowColor: ...,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: ...,
},
},
data: [{
value: [xx,xx],//坐标轴的对应标签值
textStyle: gTextStyle,
],
axisPointer: {//坐标轴的点样式配置
show: false,
type: 'line/shadow',
snap: ...,//坐标轴指示器是否自动吸附到点上。默认自动判断
z: ...,
label: {...},
lineStyle: {...},
shadowStyle: {...},
triggerTooltip: true,//是否触发 tooltip
value: null,
status: ...,//当前的状态，可取值为 'show' 和 'hide'
handle: {//拖拽手柄，适用于触屏的环境
show: false,
icon: ...,
size: 45,
margin: 50,
color: '#333',
throttle: 40,
shadowBlur: 3,
shadowColor: #aaa,
shadowOffsetX: 2,
shadowOffsetY: 0,
},
},
zlevel: 0,
z: 0,
}series(表格数据的配置)
非常重要,表格图像的怎么生成,就是这里配置
series:{//一个series里面可以配置多个不同的数据类型
name:'XXX',//系列名称，用于tooltip的显示
type:'line',//表格的类型，不同的类型有不同的细节配置，细节配置就不写了
cursor:'pointer',//鼠标样式
data:[],//数据,写一维数组就是用于一维坐标，可以写嵌套多维数组
itemStyle: [],//type = line 线条的样式,好像不同的版本配置写法都不一样
markPoint: gMarkPointer,//图表点标记
markLine: gMarkLine,//图表线标记
markArea: gMarkArea,//图表区域标记
zlevel: 0,
z: 2,
silent: false,
animation: true,
animationThreshold: 2000,
animationDuration: 1000,
animationEasing: cubicOut,
animationDelay: 0,
animationDurationUpdate: 300,
animationEasingUpdate: cubicOut,
animationDelayUpdate: 0,
tooltip: {...},
}dataZoom(用于区域缩放)
上图的最下面和最右边那个小缩略图就是dataZoom
通常有非常多的数据需要显示的时候才会用的到,类似工具条
功能就是 放大/缩小/移动/数据窗口
dataZoom = [{
id: 'dataZoomX',
show: true,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
backgroundColor: "gray",//组件的背景颜色
type: 'slider',//slider表示有滑动块的，inside表示内置的,没发现怎么用
dataBackground: {//数据阴影的样式。
lineStyle: mylineStyle,//阴影的线条样式
areaStyle: myareaStyle,//阴影的填充样式
},
fillerColor: "darkblue", //选中范围的填充颜色。
borderColor: "#ddd",//边框颜色。
filterMode: 'filter',//'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
xAxisIndex: 0,//设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex: [0, 2],//设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex: 3,//设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex: [0, 2],//设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30,//数据窗口范围的起始百分比,表示30%
end: 70,//数据窗口范围的结束百分比,表示70%
startValue: 10,//数据窗口范围的起始数值
endValue: 100,//数据窗口范围的结束数值。
orient: "horizontal",//布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
zoomLock: false,//是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle: 100,//设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel: true,//如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove: true,//如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
left: "center",//组件离容器左侧的距离,'left', 'center', 'right','20%'
top: "top",//组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right: "auto",//组件离容器右侧的距离,'20%'
bottom: "auto",//组件离容器下侧的距离,'20%'
x:100,//容器div的零坐标为左下角, x坐标偏移100
y:100,//y坐标偏移100
},
{
id: 'dataZoomY',
type: 'inside',
filterMode: 'empty',
disabled: false,//是否停止组件的功能。
xAxisIndex: 0,//设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex: [0, 2],//设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
radiusAxisIndex: 3,//设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
angleAxisIndex: [0, 2],//设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
start: 30,//数据窗口范围的起始百分比,表示30%
end: 70,//数据窗口范围的结束百分比,表示70%
startValue: 10,//数据窗口范围的起始数值
endValue: 100,//数据窗口范围的结束数值。
orient: "horizontal",//布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
zoomLock: false,//是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
throttle: 100,//设置触发视图刷新的频率。单位为毫秒（ms）。
zoomOnMouseWheel: true,//如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
moveOnMouseMove: true,//如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
}];visualMap(分段型视觉映射组件
上图蓝色框框的就叫visualMap,这可以给数据分段,分成不同的层级
visualMap = [
// colorAlpha: 图元的颜色的透明度。opacity: 图元以及其附属物（如文字标签）的透明度。colorLightness: 颜色的明暗度。colorSaturation: 颜色的饱和度。colorHue: 颜色的色调。
{
show: true,//是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
type: 'continuous',// 定义为连续型 viusalMap
min: 10,//指定 visualMapContinuous 组件的允许的最小值
max: 100,//指定 visualMapContinuous 组件的允许的最大值
range: [15, 40],//指定手柄对应数值的位置。range 应在 min max 范围内
calculable: true,//是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
realtime: true,//拖拽时，是否实时更新
inverse: false,//是否反转 visualMap 组件
precision: 0,//数据展示的小数精度，默认为0，无小数点
itemWidth: 20,//图形的宽度，即长条的宽度。
itemHeight: 140,//图形的高度，即长条的高度。
align: "auto",//指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
text: ['High', 'Low'],//两端的文本
textGap: 10,//两端文字主体之间的距离，单位为px
dimension: 2,//指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
seriesIndex: 1,//指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
hoverLink: true,//鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
inRange: {//定义 在选中范围中 的视觉元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange: {//定义 在选中范围外 的视觉元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel: 0,//所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z: 2,//所属组件的z分层，z值小的图形会被z值大的图形覆盖
left: "center",
top: "top",
right: "auto",
bottom: "auto",
orient: "vertical",//图例排列方向
padding: 5,//图例内边距，单位px 5 [5, 10] [5,10,5,10]
backgroundColor: "transparent",
borderColor: "#ccc",
borderWidth: 0,
textStyle: mytextStyle,
formatter: function (value) {//标签的格式化工具。
return 'aaaa' + value;// 范围标签显示内容。
}
},
{
show: true,//是否显示 visualMap-continuous 组件。如果设置为 false，不会显示，但是数据映射的功能还存在
type: 'piecewise',// 定义为分段型 visualMap
splitNumber: 5,//对于连续型数据，自动平均切分成几段。默认为5段
pieces: [//自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
{ min: 1500 },// 不指定 max，表示 max 为无限大（Infinity）。
{ min: 900, max: 1500 },
{ min: 310, max: 1000 },
{ min: 200, max: 300 },
{ min: 10, max: 200, label: '10 到 200（自定义label）' },
{ value: 123, label: '123（自定义特殊颜色）', color: 'grey' },// 表示 value 等于 123 的情况。
{ max: 5 } // 不指定 min，表示 min 为无限大（-Infinity）。
],
categories: ['严重', '重度', '中度', '轻度', '良', '优'], //用于表示离散型数据（或可以称为类别型数据、枚举型数据）的全集
min: 10,//指定 visualMapContinuous 组件的允许的最小值
max: 100,//指定 visualMapContinuous 组件的允许的最大值
minOpen: true,//界面上会额外多出一个『< min』的选块
maxOpen: true,//界面上会额外多出一个『> max』的选块。
selectedMode: "multiple",//选择模式，可以是：'multiple'（多选）。'single'（单选）。
inverse: false,//是否反转 visualMap 组件
precision: 0,//数据展示的小数精度，默认为0，无小数点
itemWidth: 20,//图形的宽度，即长条的宽度。
itemHeight: 140,//图形的高度，即长条的高度。
align: "auto",//指定组件中手柄和文字的摆放位置.可选值为：'auto' 自动决定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。
text: ['High', 'Low'],//两端的文本
textGap: 10,//两端文字主体之间的距离，单位为px
showLabel: true,//是否显示每项的文本标签
itemGap: 10,//每两个图元之间的间隔距离，单位为px
itemSymbol: "roundRect",//默认的图形。可选值为： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
dimension: 2,//指定用数据的『哪个维度』，映射到视觉元素上。『数据』即 series.data。 可以把 series.data 理解成一个二维数组,其中每个列是一个维度,默认取 data 中最后一个维度
seriesIndex: 1,//指定取哪个系列的数据，即哪个系列的 series.data,默认取所有系列
hoverLink: true,//鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮
inRange: {//定义 在选中范围中 的视觉元素
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
outOfRange: {//定义 在选中范围外 的视觉元素。
color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
symbolSize: [30, 100]
},
zlevel: 0,//所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z: 2,//所属组件的z分层，z值小的图形会被z值大的图形覆盖
left: "center",//组件离容器左侧的距离,'left', 'center', 'right','20%'
top: "top",//组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right: "auto",//组件离容器右侧的距离,'20%'
bottom: "auto",//组件离容器下侧的距离,'20%'
orient: "vertical",//图例排列方向
padding: 5,//图例内边距，单位px 5 [5, 10] [5,10,5,10]
backgroundColor: "transparent",
borderColor: "#ccc",
borderWidth: 0,
textStyle: mytextStyle,
formatter: function (value) {
return 'aaaa' + value;
}
}
];color(调色盘)
color是控制调色盘，假如你的数据是多系列的（ps：就是在legend中设置的图例，一个图例就是一个系列），那么每个系列就会依次从调色盘中选取作为系列颜色。
var option = {
// 下面的是默认的调色盘
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae',
'#749f83', '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']
}gTextStyle(常用的全局文本配置)
gTextStyle = {
color: '#333',
fontStyle: 'normal',
fontWeight: normal,
fontFamily: 'sans-serif',
fontSize: 18,
lineHeight: ...,
width: ...,
height: ...,
textBorderColor: 'transparent',
textBorderWidth: 0,
textShadowColor: 'transparent',
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
rich: {
a:{//富文本标签,通常配合外面的formatter函数一起使用
color: '#fff',
fontStyle: 'normal',
fontWeight: normal,
fontFamily: 'sans-serif',
fontSize: 12,
align: ...,
verticalAlign: ...,
lineHeight: ...,
backgroundColor: 'transparent',
borderColor: 'transparent',
borderWidth: 0,
borderRadius: 0,
padding: 0,
shadowColor: 'transparent',
shadowBlur: 0,
shadowOffsetX: 0,
shadowOffsetY: 0,
width: ...,
height: ...,
textBorderColor: 'transparent',
textBorderWidth: 0,
textShadowColor: 'transparent',
textShadowBlur: 0,
textShadowOffsetX: 0,
textShadowOffsetY: 0,
}
},
}gTooltip(常用的全局文本配置)
gTooltip = {
show: true,
trigger: 'item',//触发事件
axisPointer: {...},//坐标轴指示器配置项
position: ...,
formatter: ...,
backgroundColor: 'rgba(50,50,50,0.7)',
borderColor: '#333',
borderWidth: 0,
padding: 5,
textStyle: {...},
extraCssText: ...,//额外附加到浮层的 css 样式,类似outline
}