echarts实现双y轴

我们在一个折线图中展示多个数据的时候，如果两个数据的数量级相差很大，会造成数量级低的数据折线图被压缩成一条很直的线，如下图：

解决办法是使用双y轴：

 $scope.echart21 = {
        legend: {
            show: 'true',
            data: ['ns_csiqcs', 'ns_lbi', 'ns_cap', 'ns_spider'],
            right: 0
        },
        title: {
            // subtext: 'GB/日',
            left: 'center',
            top: '10px',
            text: 'nameSpace Top5',
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            axisLabel: {
                rotate: 45
            },
            type: 'category',
            name: '时间',
            boundaryGap: false,
            data: ["2017082812", "2017082813", "2017082814"],
        },
        yAxis: [{
            name: 'GB/日',
            type: 'value'
        }, {
            name: 'GB/日',
            type: 'value'
        }],
        series: [{
            name: 'ns_csiqcs',
            type: 'line',
            yAxisIndex: 1,
            data: [10, 23, 58],
        }, {
            name: 'ns_lbi',
            type: 'line',
            data: [644183, 945711, 965962],
        }, {
            name: 'ns_cap',
            type: 'line',
            data: [55096, 27366, 289103],
        }, {
            name: 'ns_spider',
            type: 'line',
            data: [153222, 121460, 363895],
        }],
    }

注意两个关键点：

yAxis: [{
            name: 'GB/日',
            type: 'value'
        }, {
            name: 'GB/日',
            type: 'value'
        }],

yAxis的值设置为数组，指定两个数轴

 series: [{
            name: 'ns_csiqcs',
            type: 'line',
            yAxisIndex: 1,
            data: [10, 23, 58],
        }, {
            name: 'ns_lbi',
            type: 'line',
            data: [644183, 945711, 965962],
        }, {
            name: 'ns_cap',
            type: 'line',
            data: [55096, 27366, 289103],
        }, {
            name: 'ns_spider',
            type: 'line',
            data: [153222, 121460, 363895],
        }],

series中通过字段yAxisIndex来指定应用哪个y轴，计数从0开始。代码中ns_csiqcs的yAxisIndex指定了1，所以它应用第二个数轴。

结果如下：

明显可见，图2比图1更能直观地展示数据趋势。

欢迎留言交流，我的github：https://github.com/njueyupeng