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， // 承受`数组`别离设定上右下右边距，同cssitemGap: 10, // 主副标题间距zlevel: 0, // 用于Canvas分层，内存开销大，审慎应用z: 2, // 管制图形的先后顺序，优先级低于zlevelx: '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 | vertocalalign: 'auto', // 图例标记和文本的对齐：auto | left | rightitemWidth: 25, // 图例标记的图形宽度itemHeight: 14, // 图例标记的图形高度symbolKeepAspect: true, // 自定义图标时，是否在缩放时放弃缩放比formatter: null, // 格式化图例文本，反对字符串模板和回调函数selectedMode: true, // 图例抉择模式： // 是否能够通过点击图例，扭转图表显示状态inactiveColor: '#ccc', // 图例敞开时的色彩selected: { // 图例选中状态表 '系列1': true, // 选中'系列1' '系列2': false // 不选中'系列2'},textStyle: {}, // 图例的专用文本款式，公共款式请参考 `title`tooltip: {...}, // 同tooltipdata: [{ 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中textStylenameGap: 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: ..., }],}
完结
整顿的目标不是记忆，把配置表背下来毫无意义，仅是为了更加好的查问各项图表配置。整顿后，对其有了整体意识，这算是一个意外的播种吧。