官方给的示例,多条折线也是公用一个横轴坐标的,这就导致数据对不上。
解决办法是,不给xAxis的data赋值,而在series配置项中用二维数组,然后tooltip提示框用自定义的即可。
option = {
"tooltip": {
"trigger": "item",
formatter:(params)=>{
return `${params.marker}${params.seriesName}<br/>step: <span style="font-weight:800;">${params.value[0]}</span> <br/>value: <span style="font-weight:800;">${params.value[1]}</span>`;
}
},
"xAxis": {
"splitLine": {
"show": false
}
},
"yAxis": {
"splitLine": {
"lineStyle": {
"type": "dashed",
"color": "gray"
},
"show": true
}
},
"series": [
{
"type": "line",
"data": [
[
50,
1.3624397546052933
],
[
100,
0.9322091400623321
],
[
150,
0.7917620807886123
],
[
200,
0.8104976803064347
],
[
250,
0.3659904509782791
],
[
300,
0.6806085288524628
],
[
350,
0.5737991482019424
],
[
400,
0.5688965588808059
],
[
450,
0.707832545042038
],
[
500,
0.6375230640172959
],
[
550,
0.5323563575744629
],
[
600,
0.3596209615468979
],
[
650,
0.6049822092056274
],
[
700,
0.6695069670677185
],
[
750,
0.6027071714401245
],
[
800,
0.6141397625207901
],
[
850,
0.6172224879264832
],
[
900,
0.6056159138679504
],
[
950,
0.4776504009962082
],
[
1000,
0.5184794709086418
]
],
"name": "demo1"
},
{
"type": "line",
"data": [
[
50,
1.1033485978841782
],
[
100,
0.5614044785499572
],
[
150,
0.487221297621727
],
[
200,
0.6058899402618408
],
[
250,
0.4615560010075569
],
[
300,
0.5596513599157333
]
],
"name": "demo2"
},
],
"legend": {
"type": "scroll",
"x": 55,
"y": "top",
"itemGap": 40,
"itemWidth": 33,
"itemHeight": 16,
"textStyle": {
"color": "#ccc"
},
"selected": {
"demo1": true,
"demo2": true,
}
}
}
1.png