以下是我在使用 Echarts 表格对不同配置信息的使用,对我使用过的做一个总结:
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'
}
}
}
}
想了解更多详细的配置信息可以去 W3C school