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

【问题标题】：javascript - eCharts - multiple y-axis overlapping each otherjavascript - eCharts - 多个 y 轴相互重叠
【发布时间】：2017-08-23 14:56:00
【问题描述】：

我使用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 轴应该在左边。蓝色的位置正确。

如果你想在 sn-p 上测试我的代码

打开这个网站https://ecomfe.github.io/echarts-examples/public/editor.html?c=bubble-gradient
复制我上面分享的代码
将代码粘贴并替换到我在 1 中给出的链接中的 textarea 中

【问题讨论】：

我认为在你的代码中，行“var date = new Date(params.name);”应该是“var date = new Date(params.value[0]);”。至少在我尝试的时候！

标签： javascript charts echarts

【解决方案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

【讨论】：