echarts多條折線展示

官方給的示例,多條折線也是公用一個橫軸坐標(biāo)的,這就導(dǎo)致數(shù)據(jù)對不上。
解決辦法是,不給xAxis的data賦值,而在series配置項中用二維數(shù)組,然后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
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容