Echarts3实例双Y轴折线图

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

### 实现效果 ###

![这里写图片描述][70]

### 知识点 ###

*  双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}}},
                }
            ]
        };

[70]: /images/20210726/6ffd1118a0074873a030c766392d6d5b.png