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

发布了14 篇原创文章 · 获赞 14 · 访问量 4万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览