JavaScript - eCharts - 多个y轴重叠在一起

Question

我使用 eCharts JavaScript 插件 创建一张折线图...。

如下面所附的图片所示，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. 将代码粘贴并替换到我在No.1中给出的链接的文本区域中

- Syamsoul Azrien

---

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

Answer 1

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

onZero: 0,

在axisLine中

因此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
        },
    }
],

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

- Syamsoul Azrien