echarts多条折线展示

官方给的示例,多条折线也是公用一个横轴坐标的,这就导致数据对不上。
解决办法是,不给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
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容