echarts 指示线markLine
功能说明
echarts折线图添加竖向指示线markLine。
效果
代码
const base64Icon =
'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAABJlBMVEUAAABBuIM1SV5BuINBuINBuINBuINBuINBuINBuINBuIM/o31BuINBuINBuINBuINBuINBuINBuINBuINBuINBuINBuINBuIMzQlpLunxAk3g2U2I2U2JBuINBuINBuIM3WGRBuINBuINBuIM5Ymg+l3k6cW41S141S180SF0yOlcyN1Y2T2E3WmU4VWNBuIM5XmdBuIM7cW9BuINBuINBuINBuIM7cG5BuIM1SV41Sl41TF9Qu3k/uIQ0Rlw0Q1tAuYMwNFUxN1YxMlQzPVlFuoBLun1Nu3tOu3ozQVpHun8zP1oyOlc/uIM9dW43VWNJtn1GrXxFqHxSu3g9b2w6Ymg6XGZIsnxEo3tCnXpBlXlBj3dAi3Y/g3M+fHE7aGpEoXo8bWxw63rMAAAAOHRSTlMA09LaviHjsk88FAj78unLqY5hV0cO9+/a0tK/tKCYhoZ7bmdTGhPu5NLS0tCjkn92dDQyMS4sKF/QfZ0AAAIpSURBVEjH1dTnWuJAFAbgDylSRRTsfdXtvYUQExNCj2DvZff+b2KTyTkDKiX8W99fyczJc5jvmQP+Q5PhkLC49O7thGfhE6SNhQnh/dKiXxWOYFbx7dfPzFLRY3wD+W2IhZJ1Xt+nslduC3qsHtuG6m6rjQ8gyy3V+0B3LqtUFAGwQ897J+2yaKHa2xC2G36D8qm2R0VRuNbppXKo2qKF8RrCG79jS79oUskahHlqod2W1aIo2YDrS8t/K99xg7kUhO65O1ZJ/GhjB9jVddHA6dQUeWKSpYXalaUXxblXgI9+g6J1XTvwt8Ng37mF9kDRNnZTdGLzTONIE5Cmaal51DD8cy+v0IN9zJFOoiuZ5nPfU7TuAfxI2ye9kUqbHG215LiVTLWLhxXayuGRGLWo35hU7Ed6y5HO47G4jPZcREuXqFPjE8/giQhfqUtH5w9064ojDeGpqEK0UzdaivRB49UfeGaNo73Q6U4YjSO+RNN4rjDH0d6VKdJ7eUuT6GOL21c7jupFWmpypJvoK+zvHtSuvWhV86ZODabQX0JeKXdae+cyjgEiPdOqO3840iwGiXan1TT/ylv6CwPl5LTalox0FYOlMhxtWw5+uoAhZhTuUeGnLQwV5qS4PgYyIlopj+F4WlkEoyS5lOdypM+99TkEMNWtz6QwCk8rz2UgWa4PIZifCkkgoFX+qwuqkKa5DOyrV7+OMcRoLgPLK8osxhLLYDz5OF6Mf/rT1F2uAMvtAAAAAElFTkSuQmCC';
option = {
title: {
text: '电量分布统计'
},
tooltip: {},
xAxis: {
type: 'category',
boundaryGap: false,
// prettier-ignore
data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} W'
},
axisPointer: {
snap: true
}
},
series: [
{
name: '电量',
type: 'line',
smooth: true,
// 指示线
markLine: {
// 上下图标可以单独设置,可为空
symbol: [base64Icon, base64Icon],
symbolSize: [14, 17],
label: {
show: true,
padding: [0, 0, 5, 0],
formatter(){
return '指示线'
}
},
data: [
{
xAxis: '10:00'
}
],
lineStyle: {
width: 1,
color: '#979797'
}
},
// prettier-ignore
data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400]
}
]
};
注意项
- 后续补充功能:markLine指示线hover或点击事件
参考
demo示例
Echarts markLine