I have a problem of markLine rendering xAxis location value to name and seemingly ignores supplied name. Original documentation can be found here: https://echarts.apache.org/en/option.html#series-line.markLine
Sorry about the long snippet, just run the code.
<html style="height: 100%"><head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;" _echarts_instance_="ec_1644723235300"><div style="position: relative; width: 2752px; height: 952px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="3440" height="1190" style="position: absolute; left: 0px; top: 0px; width: 2752px; height: 952px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class="" style="position: absolute; display: block; border-style: solid; white-space: nowrap; z-index: 9999999; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgb(255, 255, 255); border-width: 1px; border-radius: 4px; color: rgb(102, 102, 102); font: 14px / 21px "Microsoft YaHei"; padding: 10px; top: 0px; left: 0px; transform: translate3d(1370px, 91px, 0px); border-color: rgb(255, 255, 255); pointer-events: none; visibility: hidden; opacity: 0;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="font-size:14px;color:#666;font-weight:400;line-height:1;">2021-09-27</div><div style="margin: 10px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#ffffff;"></span><span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">Süstoolne</span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">130</span><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="margin: 10px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#1dd56a;"></span><span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">Diastoolne</span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">67</span><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="margin: 10px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#ffbb04;"></span><span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">Pulss</span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">36</span><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div></div></div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=<Your Key Here>"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@{{version}}/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
const colors = ['#5470C6', '#EE6666'];
option = {
title: {
text: 'Jälgin vererõhku'
},
color: ['#242e66', '#1dd56a', '#ffbb04', '#0089ff'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
left: '1%',
right: '3%',
bottom: '1%',
containLabel: true
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
},
dataZoom: {
yAxisIndex: 'none'
}
}
},
legend: {
data: ['Süstoolne', 'Diastoolne', 'Pulss']
},
dataZoom: [
{
type: 'inside',
realtime: true,
start: 0,
end: 100
}
],
xAxis: [
{
type: 'time',
axisTick: {
alignWithLabel: true
},
data: [
'2021-05-27T05:00:00',
'2021-06-04T05:00:00',
'2021-06-29T05:00:00',
'2021-08-13T05:00:00',
'2021-08-21T05:00:00',
'2021-09-27T05:00:00',
'2021-10-01T05:00:00',
'2021-10-11T05:00:00',
'2021-11-14T04:00:00',
'2021-12-06T04:00:00',
'2021-12-15T04:00:00',
'2021-12-26T04:00:00',
'2021-12-27T04:00:00',
'2022-01-07T04:00:00',
'2022-01-12T04:00:00',
'2021-05-27T05:00:00',
'2021-06-04T05:00:00',
'2021-06-29T05:00:00',
'2021-08-13T05:00:00',
'2021-08-21T05:00:00',
'2021-09-27T05:00:00',
'2021-10-01T05:00:00',
'2021-10-11T05:00:00',
'2021-11-14T04:00:00',
'2021-12-06T04:00:00',
'2021-12-15T04:00:00',
'2021-12-26T04:00:00',
'2021-12-27T04:00:00',
'2022-01-07T04:00:00',
'2022-01-12T04:00:00',
'2021-05-27T05:00:00',
'2021-06-04T05:00:00',
'2021-06-29T05:00:00',
'2021-08-13T05:00:00',
'2021-08-21T05:00:00',
'2021-09-27T05:00:00',
'2021-10-01T05:00:00',
'2021-10-11T05:00:00',
'2021-11-14T04:00:00',
'2021-12-06T04:00:00',
'2021-12-15T04:00:00',
'2021-12-26T04:00:00',
'2021-12-27T04:00:00',
'2022-01-07T04:00:00',
'2022-01-12T04:00:00'
]
}
],
yAxis: [
{
scale: false,
type: 'value',
name: 'Süstoolne',
position: 'left',
offset: 0,
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#242e66'
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
scale: false,
type: 'value',
name: 'Diastoolne',
position: 'right',
offset: 0,
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#1dd56a'
}
},
axisLabel: {
formatter: '{value} ml'
}
},
{
scale: false,
type: 'value',
name: 'Pulss',
position: 'right',
offset: 60,
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: '#ffbb04'
}
},
axisLabel: {
formatter: '{value} ml'
},
max: 160
}
],
series: [
{
name: 'Süstoolne',
type: 'line',
yAxisIndex: 0,
smooth: true,
data: [
['2021-05-27T05:00:00', 108],
['2021-06-04T05:00:00', 126],
['2021-06-29T05:00:00', 98],
['2021-08-13T05:00:00', 143],
['2021-08-21T05:00:00', 91],
['2021-09-27T05:00:00', 130],
['2021-10-01T05:00:00', 107],
['2021-10-11T05:00:00', 104],
['2021-11-14T04:00:00', 91],
['2021-12-06T04:00:00', 118],
['2021-12-15T04:00:00', 159],
['2021-12-26T04:00:00', 131],
['2021-12-27T04:00:00', 156],
['2022-01-07T04:00:00', 159],
['2022-01-12T04:00:00', 135]
],
symbol: 'circle',
symbolSize: 8,
lineStyle: {
color: '#242e66',
width: 4
},
itemStyle: {
borderWidth: 2,
borderColor: 'rgba(36, 46, 102, 1)',
color: '#ffffff'
},
markLine: {
label: {
show: true,
backgroundColor: '#808080',
borderRadius: 10,
padding: [5, 5, 3, 5],
color: '#ffffff'
},
symbol: ['none', 'none'],
lineStyle: {
normal: {
color: '#808080',
type: 'dashed'
}
},
data: [
{
name : "Test",
xAxis : "2021-07-07T04:00:00"
}
]
}
},
{
name: 'Diastoolne',
type: 'line',
yAxisIndex: 1,
smooth: true,
data: [
['2021-05-27T05:00:00', 75],
['2021-06-04T05:00:00', 93],
['2021-06-29T05:00:00', 71],
['2021-08-13T05:00:00', 87],
['2021-08-21T05:00:00', 86],
['2021-09-27T05:00:00', 67],
['2021-10-01T05:00:00', 70],
['2021-10-11T05:00:00', 95],
['2021-11-14T04:00:00', 72],
['2021-12-06T04:00:00', 67],
['2021-12-15T04:00:00', 66],
['2021-12-26T04:00:00', 63],
['2021-12-27T04:00:00', 86],
['2022-01-07T04:00:00', 72],
['2022-01-12T04:00:00', 82]
],
symbol: 'circle',
symbolSize: 8,
lineStyle: {
color: '#1dd56a',
width: 4
},
itemStyle: {
borderWidth: 2,
borderColor: 'rgba(36, 46, 102, 1)',
color: '#1dd56a'
}
},
{
name: 'Pulss',
type: 'scatter',
yAxisIndex: 2,
smooth: true,
data: [
['2021-05-27T05:00:00', 36],
['2021-06-04T05:00:00', 30],
['2021-06-29T05:00:00', 37],
['2021-08-13T05:00:00', 34],
['2021-08-21T05:00:00', 44],
['2021-09-27T05:00:00', 36],
['2021-10-01T05:00:00', 30],
['2021-10-11T05:00:00', 40],
['2021-11-14T04:00:00', 37],
['2021-12-06T04:00:00', 32],
['2021-12-15T04:00:00', 34],
['2021-12-26T04:00:00', 43],
['2021-12-27T04:00:00', 32],
['2022-01-07T04:00:00', 31],
['2022-01-12T04:00:00', 40]
],
symbol: 'circle',
symbolSize: 8,
lineStyle: {
color: '#ffbb04',
width: 4
},
itemStyle: {
borderWidth: 2,
borderColor: 'rgba(36, 46, 102, 1)',
color: '#ffbb04'
}
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body></html>