echarts折线图 - 多Y轴设置

4,459 阅读1分钟

需求概要:画一个折线图,Y轴2个,series数据即折线有3条,意味着有2条折线公用一个Y轴。

关键点:yAxis为一个length为2个数组,series为一个length为3的数组,legend同样为3个。其中,series中需要设置yAxisIndex指定其使用哪一个y轴。nameTextStyle中的padding保证Y轴的name不与value刻度重叠。

options如下:

{
    "tooltip": {
        "trigger": "axis"
    },
    "legend": {
        "data": [
            "Transaction Amount",
            "Operating Profit",
            "Operating Profit Rat"
        ]
    },
    "grid": {
        "top": "10%",
        "left": "5%",
        "right": "5%",
        "bottom": "3%",
        "containLabel": true
    },
    "xAxis": [
        {
            "type": "category",
            "data": [
                "Mon",
                "Tue",
                "Wed",
                "Thu",
                "Fri",
                "Sat",
                "Sun"
            ],
            "axisTick": {
                "alignWithLabel": true
            }
        }
    ],
    "yAxis": [
        {
            "type": "value",
            "name": "Transaction Amount & Operating Profit",
            "nameLocation": "middle",
            "nameTextStyle": {
                "padding": [
                    0,
                    0,
                    30,
                    0
                ],
                "fontWeight": "bold",
                "fontFamily": "Segoe-UI-Bold",
                "fontSize": "13",
                "color": "#232253"
            }
        },
        {
            "type": "value",
            "name": "Operating Profit Ratio (In %)",
            "nameLocation": "middle",
            "nameTextStyle": {
                "padding": [
                    30,
                    0,
                    0,
                    0
                ],
                "fontWeight": "bold",
                "fontFamily": "Segoe-UI-Bold",
                "fontSize": "13",
                "color": "#232253"
            },
            "position": "right"
        }
    ],
    "series": [
        {
            "name": "Transaction Amount",
            "type": "line",
            "smooth": true,
            "data": [
                120,
                132,
                101,
                134,
                90,
                230,
                210
            ]
        },
        {
            "name": "Operating Profit",
            "type": "line",
            "smooth": true,
            "data": [
                220,
                182,
                191,
                234,
                290,
                330,
                310
            ]
        },
        {
            "name": "Operating Profit Rat",
            "yAxisIndex": 1,
            "type": "line",
            "smooth": true,
            "data": [
                150,
                232,
                201,
                154,
                190,
                330,
                410
            ]
        }
    ]
}