最近完成一个新需求,两个不连续的点连线。我们知道,echarts图中的曲线,都是基于x轴的连续的y轴的坐标点链接而成,也就是每一个x轴数据对应一个y轴的数据。当前的需求是x轴日期值,y轴数据起始有值,中间全部为null,line图则显示为两个点,现在要求这两个点要连接起来。 数据类型为:
xdata:["2022-02-01", "2022-02-02", "2022-02-03", "2022-02-04", "2022-02-05"]
seriesData:"data": [0.35, null, null,null, null, 2.55]
echarts有一个很好用的配置项能满足这一需求,就是用markline。下面贴出配置项数据,以供参考:
option ={
"tooltip": {
"trigger": "axis"
},
"legend": {
"data": [
"净值"
]
},
"grid": {
"left": "3%",
"right": "4%",
"bottom": "3%",
"containLabel": true
},
"xAxis": {
"type": "category",
"axisLabel": {
"margin": 20
},
"axisTick": {
"alignWithLabel": true
},
"boundaryGap": true,
"data": [
"2022-02-01", "2022-02-02", "2022-02-03", "2022-02-04", "2022-02-05"
]
},
"yAxis": {
"type": "value",
"show": true,
"offset": 15,
"splitNumber": 5
},
"series": [
{
"name": "75分位数",
"type": "line",
"data": [
0.35, null, null,null, null, 2.55
],
markLine: {
symbol:'none',
data: [
[
{
"coord": [
"2022-02-01",
0.35
]
},
{
"coord": [
"2022-02-05",
2.55
]
}
]
],
lineStyle: {
type: "solid",
width: 2
}
}
},
]
}
如果有多条线,则动态计算每一个series 子集的起始值。