Echarts3实例双Y轴折线图-蒲公英云

Echarts3实例双Y轴折线图

电玩女神 2021-09-16 07:06 780阅读 0赞

实现效果

这里写图片描述

知识点

双Y轴：yAxisIndex
Y轴垂直标题
调整左侧Y轴刻度

代码实现

option = {
        title: {
            text: '2018年管线数据利用统计',
            top:10,
            left:10
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c}次"
         },
        toolbox: {
            show : true,
            top:10,
            right:10,
            feature : {
                mark : {show: true},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        grid:{
            top:60,
            right:70,
            bottom:30,
            left:60
        },
        legend: {
            top:32,
            left:'center',
            data:['管线查询','在线调用']
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type: 'value',
                name:"管\n线\n查\n询\n次\n数\n︵\n次\n︶",
                nameLocation:"center",
                nameGap:35,
                nameRotate:0,
                nameTextStyle:{
                    fontSize: 16,
                },
                //默认以千分位显示，不想用的可以在这加一段
                axisLabel : {   //调整左侧Y轴刻度， 直接按对应数据显示
                    show:true,
                    showMinLabel:true,
                    showMaxLabel:true,
                    formatter: function (value) {
                        return value;
                    }
                }
            },
            {
                type: 'value',
                name:"在\n线\n调\n用\n次\n数\n︵\n次\n︶",
                nameLocation:"center",
                nameGap:35,
                nameRotate:0,
                nameTextStyle:{
                    fontSize: 16,
                },
                //默认以千分位显示，不想用的可以在这加一段
                axisLabel : {   //调整左侧Y轴刻度， 直接按对应数据显示
                    show:true,
                    showMinLabel:true,
                    showMaxLabel:true,
                    formatter: function (value) {
                        return value;
                    }
                }
            }
        ],
        series : [
            {
                name:'管线查询',
                type:'line',
                smooth: true,
                yAxisIndex: 0,
                data:[35,15,8,12,11,6,3,0,0,0,0,0],
                itemStyle : { normal: {label : {show: true}}},
            },
            {
                name:'在线调用',
                type:'line',
                smooth: true,
                yAxisIndex: 1,
                data:[16,16,6,5,4,4,3,0,0,0,0,0],
                itemStyle : { normal: {label : {show: true}}},
            }
        ]
    };