yb.markArea = {
silent: true,
label: {
show: true,
textStyle: { //样式
fontSize: '6', // 分辨率768*576
// fontSize: '14',
fontWeight: '400',
fontFamily: 'FZLTZCHK--GBK1-0',
color: '#E6F7FF',
},
position: ['90%', '10%'],
},
data: [
[{
yAxis: that.warn.red,
name: '红色预警',
itemStyle: {
color: 'rgba(215,48,42,0.7)'
},
label: {
position: ['90%', '30%'], // 设置位置
borderRadius: [50, 50, 50, 50], // 边框设置圆角
padding: [4, 10, 3, 10], // padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
borderColor: '#ffffff', // 设置边框颜色
borderType: 'solid', // 设置边框线类型
borderWidth: 1, // 设置边框宽度
}
}, {
yAxis: '1000'
}],
[{
yAxis: that.warn.orange,
name: '橙色预警',
itemStyle: {
color: 'rgba(254,153,3,0.7)',
},
label: {
// position: ['95%', '10%'],
borderRadius: [50, 50, 50, 50],
padding: [4, 10, 3, 10], // padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
borderColor: '#ffffff',
borderType: 'solid',
borderWidth: 1,
}
}, {
yAxis: that.warn.red
}],
[{
yAxis: that.warn.yellow,
name: '黄色预警',
itemStyle: {
color: 'rgba(255,255,1,0.7)'
},
label: {
// position: ['95%', '10%'],
borderRadius: [50, 50, 50, 50],
padding: [4, 10, 3, 10], // padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
borderColor: '#ffffff',
borderType: 'solid',
borderWidth: 1,
}
}, {
yAxis: that.warn.orange
}],
[{
yAxis: that.warn.blue,
name: '蓝色预警',
itemStyle: {
color: 'rgba(12,192,242,0.7)'
},
label: {
// position: ['95%', '10%'],
borderRadius: [50, 50, 50, 50],
padding: [4, 10, 3, 10], // padding: [3, 4, 5, 6]:表示 [上, 右, 下, 左] 的边距。
borderColor: '#ffffff',
borderType: 'solid',
borderWidth: 1,
}
}, {
yAxis: that.warn.yellow
}],
[{
yAxis: '100',
itemStyle: {
color: 'rgba(224,79,35,0)'
},
label: {
show: false
}
}, {
yAxis: that.warn.blue
}],
]
}
vue 用eachart的smarkArea,设置 markArea样式:内边距、边框等
最新推荐文章于 2023-09-18 16:34:30 发布