The following is my use of the Echarts table for different configuration information, a summary of what I have used:
let option ={
// 默认色板
color：[],
// 标题
title:{
text: '表格名称', // 表单名称
x: 'left', // 水平位置(左中右)
y: 'top', // 垂直位置（上中下）
padding: 5, // 边距（px）
textStyle:{
// 主标题样式
fontSize：14,
fontWeight: 'bolder'
}，
subtextStyle：{
// 副标题样式
fontSize：14,
}，
itemGap: 10 // 主副标题纵向间隔，单位px，默认为10
},
//图例
legend:{
orient: 'horizontal', // 布局方式 （'horizontal','vertical'）
x: 'left', // 水平位置(左中右)
y: 'top', // 垂直位置（上中下）
padding: 5, // 边距（px）
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
textStyle: {
//字体样式
color: '#333'
},
type: 'scroll', // 图例展示类型
show: 'true', // 图例是否展示
data: [] // 图例数据
},
// 提示框
tooltip：{
trigger：'item', // 触发类型（’item‘ 'axis'）
showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
hideDelay: 100, // 隐藏延迟，单位ms
transitionDuration : 0.4, // 动画变换时间，单位s
backgroundColor: 'rgba(0,0,0,0.7)', // 背景颜色
borderColor: '#333', // 边框颜色
borderRadius: 4, // 边框圆角，单位px
borderWidth: 0, // 边框线宽，单位px
padding: 5, // 内边距，单位px
textStyle: {
//字体样式
color: '#fff'
},
axisPointer : {
// 坐标轴指示器，坐标轴（axis）触发有效
type : 'line', // 默认为直线（'line' 'shadow'）
lineStyle : {
// 直线指示器样式设置
width: 2,
type: 'solid'
},
shadowStyle:{
//阴影指示器样式设置
width: 'auto', // 阴影大小
color: '#ccc' // 阴影颜色
},
},
formatter: function(params){
//自定义提示内容
return `${
params.name}</br>${
params.value}`
}
},
// 区域缩放控制器
dataZoom:{
orient: 'horizontal', // 布局方式('horizontal' 'vertical')
x: 10, // 水平安放位置（px）
y: 10, // 垂直安放位置（px）
width: 10, // 指定宽度（px）
height: 10, // 指定高度（px）
backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
dataBackgroundColor: '#eee', // 数据背景颜色
fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
handleColor: 'rgba(70,130,180,0.8)' // 手柄颜色
},
// 网格
grid: {
x: 80,
y: 60,
x2: 80,
y2: 60,
show: true, // 是否显示，默认false
containLabel:true, // grid 区域是否包含坐标轴的刻度标签
width: {
totalWidth} - x - x2,
height: {
totalHeight} - y - y2,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
},
//x轴属性
xAxis：{
name: 'name', // X轴名称
nameLocation：'end', //坐标轴名称显示位置（'start' 'middle' 'end'）
type: "category", // 类型（'category' 'time'）
inverse:false, // 是否是反向坐标轴
data: [], // 数据
min：function(value){
// 最小刻度，可以用一个函数动态填写
return value.min - 10
},
max: 10, // 最大刻度
position：'bottom', // 位置（'top' 'bottom'）
offset:0, // 偏移，在相同的 position 上有多个 X 轴的时候有用
splitLine：false, // 分割线
axisTick：{
//坐标轴刻度相关设置
show:true, // 是否显示
alignWithLabel:false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
inside:false, // 坐标轴刻度是否朝内
length:5 // 坐标轴刻度的长度
}
},
//y轴属性
yAxis：{
// 跟xAxis差不多
scale:true, // y轴自适应
type：'value', // 类型('value' 'category' 'time' 'log')
show: true, // 是否显示 Y轴
name: '降雨量(mm)', // 坐标轴名称
nameLocation: 'end', // 坐标轴名称显示位置。('start''middle''center''end')
nameTextStyle: {
...}, // 坐标轴名称的文字样式。
nameGap: 15, // 坐标轴名称与轴线之间的距离。
splitNumber: 5 , // 坐标轴的分割段数
silent: false , // 坐标轴是否是静态无法交互。
position: "left", // 默认 grid 中的第一个 y 轴在 grid 的左侧（'left'），第二个 y 轴视第一个 y 轴的位置放在另一侧。
offset: 0, // Y 轴相对于默认位置的偏移，在相同的 position 上有多个 Y 轴的时候有用。
max: 5, // 设置最大值，不设置会自动计算
min: 0,
axisLine: {
// 坐标轴刻度相关设置。
show: true ,
inside: false , // 坐标轴刻度是否朝内，默认朝外。
length: 5 , // 坐标轴刻度的长度。
lineStyle: {
// 刻度线的样式设置。
color: "#ccc", // 刻度线的颜色，默认取 axisTick.lineStyle.color。
width: 1 ,
type: 'solid' , // (实线：'solid'，虚线：'dashed'，星罗棋布的：'dotted')
shadowColor: 'rgba(0, 0, 0, 0.5)',
shadowBlur: 10,
shadowOffsetX: 0 ,
shadowOffsetY: 0 ,
opacity: 1
} ,
} , // 坐标轴轴线相关设置。
axisTick: {
show:true, // 是否显示
alignWithLabel:false, // 类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
inside:false, // 坐标轴刻度是否朝内
length:5 // 坐标轴刻度的长度
} ,
axisLabel: {
// 坐标轴刻度标签的相关设置。
show: true ,
interval: 'auto',
inside: false,
margin: 8,
fontStyle: 'normal',
fontWeight: normal,
fontSize: 1 ,
backgroundColor: 'transparent',
borderColor: 'transparent',
borderWidth: 0,
borderRadius: 0,
padding: 0
} ,
splitLine: {
// 坐标轴在 grid 区域中的分隔线。
show: true,
interval: 'auto'
}
}
}
}
For more detailed configuration information, you can go to W3C school