Echarts实现双y轴

浅浅的花香味﹌ 2022-05-13 05:46 1010阅读 0赞

转载自 ：[https://blog.csdn.net/njueyupeng/article/details/77839897?fps=1&locationNum=1][https_blog.csdn.net_njueyupeng_article_details_77839897_fps_1_locationNum_1]

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

![10236243.jpg][]解决办法是使用双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],
            }],
        }

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

[https_blog.csdn.net_njueyupeng_article_details_77839897_fps_1_locationNum_1]: https://blog.csdn.net/njueyupeng/article/details/77839897?fps=1&locationNum=1
[10236243.jpg]: http://otja7p1i5.bkt.clouddn.com/17-9-4/10236243.jpg