ECharts title配置标题
var option = {
//标题
title : {
show:true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
text: '主标题',//主标题文本，'\n'指定换行
link:'',//主标题文本超链接,默认值true
target: null,//指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
lineHeight: 56, // 行高
subtext: '副标题',//副标题文本，'\n'指定换行
sublink: '',//副标题文本超链接
subtarget: null,//指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
x:'center'//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x座标，单位px）
y: 'top',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y座标，单位px）
textAlign: null,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)',//标题背景颜色，默认'rgba(0,0,0,0)'透明
borderColor: '#ccc',//标题边框颜色,默认'#ccc'
borderWidth: 0,//标题边框线宽，单位px，默认为0（无边框）
padding: 5,//标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
itemGap: 10,//主副标题纵向间隔，单位px，默认为10
textStyle: {//主标题文本样式{
"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副标题文本样式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,//字体大小
fontStyle: 'normal',
fontWeight: 'normal',
},
zlevel: 0,//一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
z: 6,//二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
backgroundColor: 'transparent', // 标题背景色
borderColor: '#ccc', // 标题边框颜色
borderWidth: 0, // 标题边框线宽
borderRadius: 0, // 圆角半径 单位px 接受`数组`分别指定4个圆角半径
shadowBlur: ..., // 图形阴影的模糊大小
shadowColor: ..., // 阴影颜色
shadowOffsetX: 0, // 阴影水平方向上的偏移距离
shadowOffsetY: 0 // 阴影垂直方向上的偏移距离
},
ECharts legend配置
legend: {
type: 'plain', // 图例类型： 'plain'：普通图例；'scroll'：可滚动翻页图例
orient: 'horizontal', // 图例列表的布局朝向：horizontal | vertocal
align: 'auto', // 图例标记和文本的对齐：auto | left | right
itemWidth: 25, // 图例标记的图形宽度
itemHeight: 14, // 图例标记的图形高度
symbolKeepAspect: true, // 自定义图标时，是否在缩放时保持缩放比
formatter: null, // 格式化图例文本，支持字符串模板和回调函数
selectedMode: true, // 图例选择模式：
// 是否可以通过点击图例，改变图表显示状态
inactiveColor: '#ccc', // 图例关闭时的颜色
selected: { // 图例选中状态表
'系列1': true, // 选中'系列1'
'系列2': false // 不选中'系列2'
},
textStyle: {}, // 图例的公用文本样式，公共样式请参考 `title`
tooltip: {...}, // 同tooltip
data: [{
name: ..., // 图例项的名称，应等于某系列的name值
icon: ...,
textStyle: {...}, // 图例的文本样式(single)
}],
// 以下属性，type为'scroll'时，有效
scrollDataIndex: 0, // 图例当前最左上显示项的`dataIndex`
pageButtonItemGap: 5, // 图例控制块中，按钮和页信息之间的间隔
pageButtonGap: null, // 图例控制块和图例之间的间隔
pageButtonPosition: 'end', // 图例控制块的位置：'start'：控制块在左或上，'end'：控制块在右或下
pageFormatter: '{current}/{total}', // 页信息的显示格式
pageIcons: {
horizontal: [...], // orient为'horizontal'时的翻页按钮图标
vertical: [...] // orient为'vertical'时的翻页按钮图标
},
pageIconColor: '#2f4554', // 翻页按钮颜色
pageIconInactiveColor: '#aaa', // 翻页按钮不激活时的颜色
pageIconSize: 15, // 翻页按钮的大小，接受数组、数字
pageTextStyle: {...}, // 图例页信息的文字样式
animation: ..., // 图例翻页是否使用动画
animationDurationUpdate: 800, // 图例翻页时的动画时常
}
grid（网格）
grid: {
show: false, // 是否显示直角座标系网格
zlevel: 0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z: 2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
left: '10%',// 组件离容器左侧的距离
top: 60,
right: '10%',
bottom: 60,
width: 'auto', //图例宽度
height: 'auto',
containLabel: false, // grid 区域是否包含座标轴的刻度标签
backgroundColor: 'transparent', //标题背景色
borderColor: '#ccc',
borderWidth: 1, 边框线宽
shadowBlur: ...// 阴影颜色,
shadowColor: ...,// 阴影水平方向上的偏移距离
shadowOffsetX: 0, //阴影水平方向上的偏移距离
shadowOffsetY: 0, 阴影垂直方向上的偏移距离
}
categoryAxis（类目轴）
categoryAxis: {
show: true, // 是否显示 x 轴
gridIndex: 0, // x轴所在的grid的索引
position: ..., // x轴的位置 'top'|'bootom'
offset: 0, // x轴相对于默认位置的偏移，在相同的`position`上有多个x轴的时候起作用**
name: ..., // 座标轴名称
nameLocation: 'end', // 座标轴名称显示位置
// 'start'|'middle'或'center'|'end'
nameTextStyle: {...}, // 座标轴名称的文字样式
nameGap: 15, // 座标轴名称与轴线之间的距离
nameRotate: null, // 座标轴名字旋转，角度值
inverse: false, // 是否反向座标轴
boundaryGap: ..., // 座标轴两边留白// 类目轴 'true'|'false',非类目轴 数组["20%", "20%"]，数组值可以为百分比或数值
min: null,
/** 座标轴刻度最小值,可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。当设置成 function 形式时，可以根据计算得出数据的最小值来设定座标轴的最小值
**/
max: null, // 座标轴刻度最大值 同理 最小值
scale: false, // 数值轴有效，是否脱离0值比例
splitNumber: 5, // 座标轴分割段数（预估值）类目轴无效
minInterval: 0, // 自动计算座标轴最小间隔 设置成1保证座标轴分割刻度显示成整数
maxInterval: ..., // 自动计算座标轴最大间隔
interval: ..., // 强制设置座标轴分割间隔
logBase: 10, // 对数轴的底数，只在对数轴中（type: 'log'）有效
silent: false, // 座标轴是否是静态无法交互
triggerEvent: false, // 座标轴的标签是否响应和触发鼠标事件，默认不响应
axisLine: { // 座标轴轴线相关设置
show: true, // 是否显示座标轴轴线
onZero: true, // X轴或Y轴的轴线是否在另一个轴的'0'刻度上，只有在另一个轴为数值轴且包含'0'刻度时有效
onZeroAxisIndex: ..., // 当有双轴时，指定在哪个轴的'0'刻度上
symbol: 'none', // 轴线两边的箭头 ['none', 'arrow']
symbolSize: [10, 15], // 轴线两边的箭头的大小，['垂直','水平']
symbolOffset: [0, 0], // 轴线两边的箭头的偏移
},
axisTick: { // 座标轴刻度相关设置
show: true,
alignWithLabel: false, // 类目轴中'boundaryGap'为'true'时有效，保证刻度线和标签对齐
interval: 'auto', // 座标轴刻度的显示间隔，在类目轴中有效
inside: false, // 座标轴刻度是否朝内，默认朝外
length: 5, // 座标轴刻度的长度
lineStyle: {
color: ...,
width: 1,
type: 'solid', // 座标轴刻度线的类型。
// 'solid'|'dashed'|'dotted'
shadowBlur: ...,
shadowColor: ...,
shadowOffsetX: 0,
shadowOffsetY: 0,
opacity: ...
}
},
axisLabel: {...}, // 座标轴刻度标签的相关设置
splitLine: { // 座标轴在'grid'区域中的分隔线
show: true,
interval: 'auto',
lineStyle: {...}
},
splitArea: { // 分隔区域的样式设置
interval: 'auto',
show: false, // 是否显示分隔区域
areaStyle: {
// 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色
color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],
}
},
data: [{...}],
axisPointer: {...},
zlevel: 0,
z: 0,
}
ECharts tooltip-trigger属性
|
名称 |
类型 |
默认值 |
可选值 |
效果 |
|
trigger |
string |
‘item’ |
‘item’,’axis’ |
触发类型，默认数据触发 |
当trigger为’item’时只会显示该点的数据，为’axis’时显示该列下所有座标轴所对应的数据
ECharts toolbox配置
1. toolbox：这是ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。
2. toolbox中的属性，不包含五个工具。里面最主要的就是feature这个，这是toolbox的配置项，五个工具的配置就是在这个里面实现的。
|
属性 |
类型 |
说明 |
|
toolbox.show |
boolean |
默认值为true，是否显示工具栏组件 |
|
toolbox.orient |
stirng |
默认值为horizontal，工具栏 icon 的布局朝向。可选项为“horizontal”和“vertical” |
|
toolbox.itemSize |
number |
默认值为15，工具栏 icon 的大小。 |
|
toolbox.itemGap |
number |
默认值为10，工具栏 icon 每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。 |
|
toolbox.showTitle |
boolean |
默认值为true，是否在鼠标 hover 的时候显示每个工具 icon 的标题。 |
|
toolbox.feature |
Object |
各工具配置项。 除了各个内置的工具按钮外，还可以自定义工具按钮。 注意，自定义的工具名字，只能以 my 开头。 |
3. 下面来分别介绍这五个工具
saveAsImage：这个工具可以把图表保存为图片。里面有些常用的参数，type->保存图片的格式，name->保存文件的名字，backgroundColor->保存图片的背景色，show->是否显示该工具，还有一些别的属性可以自己再使用的时候查询API文档。
restore：配置项还原。主要属性是show->是否显示该工具。
dataView：数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。show->是否显示该工具，readOnly->是否不可编辑，optionToContent->自定义 dataView 展现函数，用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串，backgroundColor->数据视图浮层背景色。
dataZoom：数据区域缩放。目前只支持直角座标系的缩放（这里的含义就是柱状体，折线图可以缩放，但是像饼状图就不能缩放）。show->是否显示该工具。
magicType：动态类型切换。show->是否显示该工具，type->这是个数组，启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）。
ECharts xAxis配置 x座标轴的类型
xAxis.type | string
[ default: 'category' ]
座标轴类型。
可选：
- 'value' 数值轴，适用于连续数据。
- 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
- 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
- 'log' 对数轴。适用于对数数据。
在tooltip中设置座标轴指示器属性
由 Carrie 创建， 最后一次修改 2017-09-20
- tooltip.axisPointer.type | string
- [ default: 'line' ]
- 座标轴指示器的类型。
- 可选：
- 'line' 直线指示器
- 'shadow' 阴影指示器
- 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
- tooltip.axisPointer.axis | string
- [ default: 'auto' ]
- 座标轴指示器的座标轴。
- 默认情况，座标系会自动选择显示哪个轴的 axisPointer（默认取类目轴或者时间轴）。
- 可以是 'x', 'y', 'radius', 'angle'。
- tooltip.axisPointer.snap | boolean
- 座标轴指示器是否自动吸附到点上。默认自动判断。
- 这个功能在数值轴和时间轴上比较有意义，可以自动寻找细小的数值点。
- tooltip.axisPointer.z | number
- 座标轴指示器的 z 值。控制图形的前后顺序。z 值小的图形会被z值大的图形覆盖。