以下是我在使用 Echarts 表格对不同配置信息的使用，对我使用过的做一个总结：
let option ={
// 默认色板
color：['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed','#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0','#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700','#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
// 标题
title:{
show:true, //是否显示
text: '表格名称', // 主标题、'\n'指定换行
link:'', //主标题文本超链接,默认值true
target: null, //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
subtext: '副标题', //副标题文本，'\n'指定换行
sublink: '', //副标题文本超链接
subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
x: 'left', // 水平位置(左中右)
y: 'top', // 垂直位置（上中下）
textAlign: null ,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色，默认'rgba(0,0,0,0)'透明
borderColor: '#ccc', //标题边框颜色,默认'#ccc'
borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
padding: 5, // 边距（px）
itemGap: 10, // 主副标题纵向间隔，单位px，默认为10
textStyle:{ // 主标题样式
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle：{ // 副标题样式
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
zlevel: 0, //一级层叠控制。
z: 6, //二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
},
//图例属性
legend:{
show: 'true', // 图例是否展示
zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto", //组件离容器右侧的距离,'20%'
bottom:"auto", //组件离容器下侧的距离,'20%'
width:"auto", //图例宽度
height:"auto", //图例高度
orient: 'horizontal', // 图例排列方向 （'horizontal','vertical'）
align:"auto", //图例标记和文本的对齐,left,right
x: 'left', // 水平位置(左中右)
y: 'top', // 垂直位置（上中下）
padding: 5, // 边距（px）
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
formatter:function (name) { //用来格式化图例文本，支持字符串模板和回调函数两种形式。模板变量为图例名称 {name}
return 'Legend ' + name;
},
selectedMode:"single", //图例选择的模式,true开启,false关闭,single单选,multiple多选
inactiveColor:"#ccc", //图例关闭时的颜色
textStyle: { //字体样式
color: '#333'
},
type: 'scroll', // 图例展示类型
data: [], // 图例数据
backgroundColor:"transparent", //标题背景色
borderColor:"#ccc", //边框颜色
borderWidth:0, //边框线宽
shadowColor:"red", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:10, //阴影的模糊大小
},
// 提示框
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:{
show:true, //是否显示 组件。
id: 'dataZoomX', //组件 ID。默认不指定。
type:'slider', //slider表示有滑动块的，inside表示内置的
orient: 'horizontal', // 布局方式('horizontal' 'vertical')
xAxisIndex:0, //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
yAxisIndex:[0,2], //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
zoomLock:false, //是否锁定选择区域
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 // 坐标轴刻度的长度
},
splitArea: { //区分阴影
show: true,
areaStyle: {
color: ['rgba(255,255,255,0.5)','rgba(200,200,200,0.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'
}
}
series:[{
barWidth:26,// 柱形宽度（折线图无）
name: '',// legend对应的名称
type: 'bar',// 图形类型
stack: 'TUE',// 若多个值一样，则堆叠到一起
data: [1,1,1,11],// 数值
smooth: true, // 线条平滑展示，折线图起作用
areaStyle: {},// 面积填充,折线图有效
emphasis: {// 高亮
label: {
show: true,
position:'inner',// 文字展示在图形上
textStyle: {
color: '#333333',
fontWeight: 'bold'
}
}
}
}]
}
想了解更多详细的配置信息可以去 Echarts 官网
8848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
