在一些特殊场景，可能会使用到markLine标线，这个标线不同于X轴的分割线。群：922473947 示例：
上面示例中使用的图形是line，坐标系方式显示data: \[1,2,3,4]
官方实例中标线默认赋值是X轴index，例如一下代码
markLine:
symbol: 'none',
lineStyle: {
type: 'solid',
width: 3
},
label: {
show: false
},
data: [{
name: 'Y1',
yAxis: 5,
itemStyle: {
color: '#000',
},
}, {
name: 'X1',
xAxis: 5,
itemStyle: {
color: 'red'
},
}, ]
},代码中配置的两个方向是Y轴下标5位置与X轴下标5位置，也就是说会显示在响应的下标位置，在实际应用中你markLine.data应该是遍历得到的数组，当你默认data数组的xAxis是你遍历X轴的每条数据的index，那么就是有多少条X轴类目，就显示多少条标线，但与此文要说的需求并不相同，如上面示例展示实际上是
红色与绿色标线都是使用的data\[1,2,3,4]作为series的data数据，在markLine中的data遍历series的data绑定的数组，然后取值绑定在markLine中data的每条xAxis的数据是series.data数据的如00也就是1。 如下面代码展示
{
"name": "数据",
"tooltip": {
"show": false
},
"step": "start",
"type": "line",
"data": [
[
248,
12.44
],
[
336,
12.44
],
[
336,
null
],
[
731,
null
],
[
731,
0.54
],
[
782,
0.54
],
],
"lineStyle": {
"width": 4
},
"z": 998,
"markLine": {
"symbol": [
"none",
"none"
],
"data": [
{
"xAxis": 248,
"name": "12.44"
},
{
"xAxis": 336,
"name": "12.44"
},
{
"xAxis": 336,
"name": "null"
},
{
"xAxis": 731,
"name": "null"
},
{
"xAxis": 731,
"name": "0.54"
},
{
"xAxis": 782,
"name": "0.54"
},
],
"lineStyle": {
"type": "solid",
"width": 0.5
},
"label": {
"show": false
}
}
},很显然会看到绑定的值，就能实现每个line的点位置都会出现标线。其中会看到series中的data坐标系存在null，请看第一张示例图中绿色line，可以看到存在断开，这也是需求的一部分，当然不能补空字符也可以''。反正不能为0，当然如果你的需求是线必须连着就可以补0 以下就是示例的全部代码
option
"title": {
"textStyle": {
"color": "#000",
"fontSize": 16,
"fontWeight": "normal"
},
},
"color": [
"#4dbb27",
"#f14646"
],
"tooltip": {
"trigger": "axis"
},
"xAxis": {
"splitLine": {
"show": false
}
},
"yAxis": {},
"grid": {
"top": "9%",
"left": "8%",
"width": "88%",
"height": "85%"
},
"series": [
{
"name": "数据",
"tooltip": {
"show": false
},
"step": "start",
"type": "line",
"data": [
[
248,
12.44
],
[
336,
12.44
],
[
336,
''
],
[
731,
''
],
[
731,
0.54
],
[
782,
0.54
],
],
"lineStyle": {
"width": 4
},
"z": 998,
"markLine": {
"symbol": [
"none",
"none"
],
"data": [
{
"xAxis": 248,
"name": "12.44"
},
{
"xAxis": 336,
"name": "12.44"
},
{
"xAxis": 336,
"name": "null"
},
{
"xAxis": 731,
"name": "null"
},
{
"xAxis": 731,
"name": "0.54"
},
{
"xAxis": 782,
"name": "0.54"
},
],
"lineStyle": {
"type": "solid",
"width": 0.5
},
"label": {
"show": false
}
}
},
{
"name": "限制",
"tooltip": {
"show": false
},
"step": "start",
"type": "line",
"data": [
[
72,
18.78
],
[
157,
18.78
],
[
157,
27.22
],
[
204,
27.22
],
[
204,
40.37
],
[
240,
40.37
]
],
"lineStyle": {
"width": 4
},
"z": 998,
"markLine": {
"symbol": [
"none",
"none"
],
"data": [
{
"xAxis": 72,
"name": "18.78",
"lineStyle": {
"width": 0.5,
"color": "#f14646"
}
},
{
"xAxis": 157,
"name": "18.78",
"lineStyle": {
"width": 0.5,
"color": "#f14646"
}
},
{
"xAxis": 157,
"name": "27.22",
"lineStyle": {
"width": 0.5,
"color": "#f14646"
}
},
{
"xAxis": 204,
"name": "27.22",
"lineStyle": {
"width": 0.5,
"color": "#f14646"
}
},
{
"xAxis": 204,
"name": "40.37",
"lineStyle": {
"width": 0.5,
"color": "#f14646"
}
},
{
"xAxis": 240,
"name": "40.37",
"lineStyle": {
"width": 0.5,
"color": "#f14646"
}
}
],
"lineStyle": {
"type": "solid",
"width": 0.5
},
"label": {
"show": false
}
}
}
]
}喜欢可以点赞收藏