echarts各项配置

2024-02-29 00:00:00 javascript 配置 各项

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.:数组的第一项是内半径,第二项是外半径
**/
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: ...,
    }
],

}
完结
整顿的目标不是记忆,把配置表背下来毫无意义,仅是为了更加好的查问各项图表配置。整顿后,对其有了整体意识,这算是一个意外的播种吧。

相关文章