javascript - eCharts - 多个 y 轴相互重叠

Question

我使用 eCharts javascript plugin创建折线图....

正如您在我下面附上的图片中看到的，y 轴相互重叠。

这是我使用的选项

var colors = ['#5793f3', '#d14a61', '#675bba'];

var option = {
    title: {
        text: 'Wi-Fi Users & Bandwidth Usage by Day & Month Summary'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    grid: {
        left: '20%',
        top: '20%',
        right: '16%'
    },
    legend: {
        data:['Wi-Fi Users','Bandwidth Usage'],
        top:40
    },
    xAxis: {
        name: 'Hours\nDate: 23/11/2017',
        type: 'value',
        splitLine: {
            show: false
        },
        min:0,
        max:24,
        splitNumber: 24
    },
    yAxis: [{
            type: 'value',
            name: "Bandwidth\nUsage",
            min: 0,
            max: 50,
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: colors[2],
                }
            },
            axisLabel: {
                formatter: '{value} Mbps'
            }
        },
        {
            type: 'value',
            name: "Wi-Fi\nUsers",
            min: 0,
            max: 500,
            position: 'left',
            offset:90,
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: colors[1],
                }
            },
        }
    ],
    series: [{
        name: 'Wi-Fi Users',
        type: 'line',
        showSymbol: false,
        hoverAnimation: true,
        yAxisIndex: 1,
        data: [[0,50],[5,30],[6.523,50],[12,100],[13,250],[15,200],[18,180]]
    },{
        name: 'Bandwidth Usage',
        type: 'line',
        showSymbol: false,
        hoverAnimation: true,
        data: [[0,50],[5,30],[6,50],[12,100],[13,250],[15,200],[18,180]]
    }]
};

所以，我不希望 y 轴相互重叠。红色的 y 轴应该在左边。蓝色的位置正确。

如果你想在片段上测试我的代码

1. 打开此网站 https://ecomfe.github.io/echarts-examples/public/editor.html?c=bubble-gradient
2. 复制我上面分享的代码
3. 将代码粘贴并替换到我在第 1 条中给出的链接中的文本区域

Answer 1

我刚刚通过添加解决了我的问题

onZero: 0,

在轴线上

所以y轴上的代码应该是

yAxis: [{
        type: 'value',
        name: "Bandwidth\nUsage",
        min: 0,
        max: 50,
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: colors[2],
            }
        },
        axisLabel: {
            formatter: '{value} Mbps'
        }
    },
    {
        type: 'value',
        name: "Wi-Fi\nUsers",
        min: 0,
        max: 500,
        position: 'left',
        offset:90,
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: colors[1],
            },
            onZero: 0,  //add this code
        },
    }
],

您可以在他们的 website 上找到有关该属性的更多详细信息 https://ecomfe.github.io/echarts-doc/public/en/option.html#yAxis