- 当设置markArea 如下:
markArea: {
data: [
[
{
name: ‘成功\n\n\n\n\n炉’,
label: {
show: true,
offset: [0, 150],
color: ‘#ff0000’,
fontSize: 16,
zIndex: 10,
},
itemStyle: {
color: ‘rgba(233,205,203,.4)’
},
x: ‘45%’,
},
{
x: ‘60%’,
},
],
],
},
显示的效果如图: 文字被折线图遮挡
3. 在textArea中无论怎么设置层级都不生效, 需要在当前曲线的层级下设置( z: 0),代码及实现效果如下:
{
name: ‘memory’,
type: ‘line’,
// symbol: ‘circle’,
symbol: ‘none’,
xAxisIndex: 1,
yAxisIndex: 1,
z: 0,
itemStyle: {
normal: {
color: ‘#75b228’,
},
},
markArea: {
data: [
[
{
name: ‘成功\n\n\n\n\n炉’,
label: {
show: true,
offset: [0, 150],
color: ‘#ff0000’, // markArea中文字(name)颜色
fontSize: 16,
zIndex: 10,
},
itemStyle: {
color: ‘rgba(233,205,203,.4)’,
},
x: ‘45%’,
},
{
x: ‘60%’,
},
],
],
},
data: data.memory,
},
效果:
echarts中markArea设置文字并使文字不被遮挡浮于曲线之上
最新推荐文章于 2024-12-12 16:13:47 发布
本文介绍了如何在Echarts中解决markArea的文字被曲线遮挡的问题。通过将曲线的z值设置为0,可以确保markArea的文字浮于曲线之上,保持清晰可见。示例代码展示了具体的配置方法。
4735

被折叠的 条评论
为什么被折叠?



