共计 8444 个字符，预计需要花费 22 分钟才能阅读完成。
echarts 各项配置
基于版本 v4.x
前言
吐血整顿。
Echarts 的各种配置真的是目迷五色，第一次应用的时候，心田真的是解体啊，看到就胆怯。最近开始搞我的项目了，面对一堆图表，更是莫衷一是，才萌发了整顿 echarts 配置的想法。仅仅整顿了罕用的，后续如果有需要，会进行补充。
各项配置
title（蕴含主题目和副标题）
title: {
target: 'blank', // 指定窗口关上主题目超链接
// 'self' 以后窗口关上
// 'blank' 新窗口关上 [default]
textStyle: { // 主题目文字款式
color: '#333',
fontStyle: 'normal', // 字体格调
fontWeight: normal, // 粗细
fontFamily: 'sans-serif', // 字体
fontSize: 18,
lineHeight: 56, // 行高
textBorderColor: 'transparent', // 文字自身的描边色彩
textBorderWidth: 0, // 文字自身的描边宽度
textShadowColor: 'transparent', // 文字自身的暗影色彩
textShadowBlur: 0, // 文字自身的暗影长度
textShadowOffsetX: 0, // 文字自身的暗影 X 偏移
textShadowOffsetY: 0, // 文字自身的暗影 Y 偏移
},
subtextStyle: { // 副标题款式
align: 'auto', // 文字水平对齐形式 left ¦ center ¦ right
verticalAlign: 'auto', // 文字垂直对齐形式 top ¦ middle ¦ bottom
},
textAlign: 'auto', // 整体（主副标题）的程度对齐
textVerticalAlign: 'auto', // 整体（主副标题）的垂直对齐
triggerEvent: false, // 是否触发事件
padding: 5, // 题目内边距，单位 px，默认各方向内边距为 5，// 承受 ` 数组 ` 别离设定上右下右边距，同 css
itemGap: 10, // 主副标题间距
zlevel: 0, // 用于 Canvas 分层，内存开销大，审慎应用
z: 2, // 管制图形的先后顺序，优先级低于 zlevel
x: 'left', // 程度安放地位，默认为左对齐，可选为：// center ¦ left ¦ right ¦ 像素值
y: 'top', // 垂直安放地位，默认为全图顶端，可选为：// top ¦ bottom ¦ center ¦ 像素值
left: 'auto', // grid 组件容器左侧的间隔
// center ¦ left ¦ right ¦ 像素值 ¦ %
top: 'auto', // grid 组件容器上侧的间隔
// top ¦ middle ¦ bottom ¦ 像素值 ¦ %
right: 'auto', // grid 组件容器右侧的间隔
// 像素值 ¦ %
bottom: 'auto', // grid 组件容器下侧的间隔
// 像素值 ¦ %
backgroundColor: 'transparent', // 题目背景色
borderColor: '#ccc', // 题目边框色彩
borderWidth: 0, // 题目边框线宽
borderRadius: 0, // 圆角半径 单位 px
// 承受 ` 数组 ` 别离指定 4 个圆角半径
shadowBlur: ..., // 图形暗影的含糊大小
shadowColor: ..., // 暗影色彩
shadowOffsetX: 0, // 暗影程度方向上的偏移间隔
shadowOffsetY: 0 // 暗影垂直方向上的偏移间隔 }
egend（图例）
仅列出图例独自的属性，公共属性如：show、zlevel、x、y、z、left、top、right、bottom、padding、itemGap、backgroundColor、borderColor、borderWidth、borderRadius、shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY 以及 textStyle 中的局部属性，请参考 title 内容。
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,
z: 2,
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,}
valueAxis（数值轴）、radiusAxis（极坐标系的径向轴）、angleAxis(极坐标系的角度轴)
数值轴、极坐标系的径向轴、极坐标系的角度轴的配置，根本与类目轴统一，可参考 ’categoryAxis’
line（折线图）
line: {
name: ...,
coordinateSystem: 'cartesian2d', // 坐标系
xAxisIndex: 0,
yAxisIndex: 0,
polarIndex: 0,
symbol: 'emptyCircle', // 标记的图形 'circle'|'rect'|'roundRect'|'triangle'|'diamond'|'pin'|'arrow'|'none'，可通过 'image://url' 设为图片，其中 'URL' 为图片链接
symbolSize: 4, // 标记的大小
symbolRotate: ..., // 标记的旋转角度
symbolKeepAspect: false, // 是否在缩放时放弃该图形的长宽比 (仅图片)
symbolOffset: [0, 0], // 标记绝对于本来地位的偏移
showSymbol: true, // 是否显示 'symbol'
showAllSymbol: 'auto',
hoverAnimation: true, // 是否开启 'hover' 在拐点标记上的提醒动画成果
legendHoverLink: true, // 是否启用图例 'hover' 时的联动高亮
stack: null, // 数据重叠，同个类目轴上系列配置雷同的 'stack' 值后，后一个系列的值会在前一个系列的值上相加
cursor: 'pointer',
connectNulls: false, // 是否连贯空数据
clipOverflow: true, // 是否对超出局部裁剪，默认裁剪
step: false, // 是否是阶梯线图。可设为 'true' 显示成阶梯线图
label: {...}, // 图形上的文本标签，参考 'title'
itemStyle: {...}, // 折线拐点标记的款式
lineStyle: {...}, // 线条款式
areaStyle: {...}, // 区域填充款式
emphasis: { // 图形的高亮款式
label: {...},
itemStyle: {...},
},
smooth: false, // 是否平滑曲线显示
smoothMonotone: ..., // 折线平滑后是否在一个维度上放弃枯燥性
sampling: ...,
dimensions: [...],
encode: {...},
seriesLayoutBy: 'column',
datasetIndex: 0,
data: [{
name: ...,
value: ...,
symbol: 'circle',
symbolSize: 4,
symbolRotate: ...,
symbolKeepAspect: false,
symbolOffset: [0, 0],
label: {...},
itemStyle: {...},
emphasis: {...},
tooltip: {...},
}],
markPoint: {...}, // 图表标注
markLine: {...}, // 图表标线
markArea: {...}, // 图表标域，罕用于标记图表中某个范畴的数据
zlevel: 0,
z: 2,
silent: false,
animation: true,}
bar（柱形图）
bar: {
name: ...,
legendHoverLink: true,
coordinateSystem: 'cartesian2d',
xAxisIndex: 0,
yAxisIndex: 0,
label: {...},
itemStyle: {...},
emphasis: {...},
stack: null,
cursor: 'pointer',
barWidth: 自适应, // 柱条宽度
barMaxWidth: 自适应, // 柱条最大宽度
barMinHeight: 0, // 柱条最小高度
barGap: 30%, // 柱条间距 想要两柱子重叠，可设为 '-100%'
barCategoryGap: '20%', // 同一系列的柱间距
large: false, // 是否开启大数据量优化
largeThreshold: 400, // 开启绘制优化的阈值
progressive: 5000, // 渐进式渲染时，每一帧绘制图形数量
progressiveThreshold: 3000, // 启用渐进式渲染的图形数量阈值
progressiveChunkMode: mod, // 分片的形式：// 'sequential'|'mod'
dimensions: [...],
encode: {...}, // 可定义 'data' 的某个维度被编码
seriesLayoutBy: 'column',
datasetIndex: 0,
data: [{
name: ...,
value: ...,
label: {...}, // 单个柱条文本款式设置
itemStyle: {...},
emphasis: {...},
tooltip: {...},
}],
markPoint: {...},
markLine: {...},
markArea: {...},
zlevel: 0,
z: 2,}
pie（饼图）
pie: {
legendHoverLink: true,
hoverAnimation: true,
hoverOffset: 10, // 高亮扇区的偏移间隔
selectedMode: false, // 选中模式，示意是否反对多个选中
selectedOffset: 10, // 选中扇区的偏移间隔
clockwise: true, // 饼图的扇区是否是顺时针排布
startAngle: 90, // 起始角度
minAngle: 0, // 最小的扇区角度
minShowLabelAngle: 0, // 小于该角度的扇区，不显示标签
roseType: false, // 是否展现成南丁格尔图，通过半径辨别数据大小
// 'radius' | 'area'
avoidLabelOverlap: true, // 是否启用避免标签重叠策略
stillShowZeroSum: true, // 是否在数据和为 0 的时候不显示扇区
cursor: 'pointer',
label: {...}, // 饼图图形上的文本标签，可用于阐明图形的一些数据信息
labelLine: { // 标签的视觉疏导线款式
show: ...,
length: ..., // 视觉疏导线第一段的长度
length2: ..., // 视觉疏导线第二段的长度
smooth: false,
lineStyle: {...},
},
itemStyle: {...}, // 图形款式
emphasis: {...},
zlevel: 0,
z: 2,
center: ['50%', '50%'],
radius: [0, '75%'], // 饼图的半径
seriesLayoutBy: 'column',
datasetIndex: 0,
data: [{...}],
markPoint: {...},
markLine: {...},
markArea: {...},}
polar（极坐标）
polar: {
zlevel: 0,
z: 2,
// 极坐标系的核心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。// 反对设置成百分比，第一项是绝对于容器宽度，第二项是绝对于容器高度
center: ['50%', '50%'],
/** 极坐标系的半径。能够为如下类型：number：间接指定外半径值。string：如，'20%'，示意外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度
Array.<number|string>：数组的第一项是内半径，第二项是外半径
**/
radius: ...,}
radar（雷达坐标系）
radar: {
zlevel: 0,
z: 2,
center: ['50%', '50%'],
radius: 75%,
startAngle: 90,
name: {...}, // 雷达图每个指示器名称的配置项 可参考 title 中 textStyle
nameGap: 15,
splitNumber: 5,
shape: 'polygon', // 雷达绘制类型 反对 'polygon' 和 'circle'
scale: false,
silent: false,
triggerEvent: false,
axisLine: {
show: true,
symbol: 'none',
symbolSize: [10, 15],
symbolOffset: [0, 0],
lineStyle: {...},
},
splitLine: {
show: true,
lineStyle: {...},
},
splitArea: {
show: true,
areaStyle: {...},
},
indicator: [ // 雷达图的指示器，用来指定雷达图中的多个变量（维度）// 相似于 直角坐标系中的 data
{
name: ...,
max: ...,
min: ...,
color: ...,
}
],}
完结
整顿的目标不是记忆，把配置表背下来毫无意义，仅是为了更加好的查问各项图表配置。整顿后，对其有了整体意识，这算是一个意外的播种吧。
正文完
发表至： javascript
2024-02-29
