I have a line chart with a markLine that shows the current date. Unfortunately, the line is displayed below the other stack series. Setting the zLevel did not help either.
{
// .. other config
series: [
{ name: '1', type: 'line', stack: 'Total', areaStyle: { opacity: 1 }, showSymbol: false, data: [...], z: 10 },
{ name: '2', type: 'line', stack: 'Total', areaStyle: { opacity: 1 }, showSymbol: false, data: [...], z: 20 },
// MarkLine
{ name: '2', type: 'line', zLevel: 100, markLine: { label: { show: false, showLabel: false }, symbol: 'none', data: [ { symbol: 'none', xAxis: 'xxx', zLevel: 100 } ] } },
]
}
The line is displayed correctly, but unfortunately below the other lines. Do you have any idea how I can get it above the other lines?
Actually, the z property should be bit less and also, the markline, can just be defined on one of the traces.
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: '1',
type: 'line',
stack: 'Total',
areaStyle: { opacity: 1 },
showSymbol: false,
data: [1, 2, 3, 4, 5],
z: 1
},
{
name: '2',
type: 'line',
stack: 'Total',
areaStyle: { opacity: 1 },
showSymbol: false,
data: [1, 2, 3, 4, 5],
z: 1,
markLine: {
data: [
{
label: { show: false, showLabel: false },
yAxis: 6,
lineStyle: {
color: '#000'
},
symbol: 'none',
data: [{ symbol: 'none', xAxis: 'xxx', zLevel: 100 }]
}
]
}
}
// MarkLine
]
};