實現效果

知識點

• 雙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 : ['排水'
 
,'供水','燃氣','熱力','通訊','電力','工業','廣播','其他']
            }
        ],
        yAxis : [
            {
                type: 'value',
                name:"管\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︶",
                nameLocation:"center",
                nameGap:50,
                nameRotate:0,
                nameTextStyle:{
                    fontSize: 16,
                },
                //預設以千分位顯示，不想用的可以在這加一段
                axisLabel : {   //調整左側Y軸刻度， 直接按對應資料顯示
                    show:true,
                    showMinLabel:true,
                    showMaxLabel:true,
                    formatter: function (value) {
                        return value;
                    }
                }
            }
        ],
        series : [
            {
                name:'管線長度',
                type:'bar',
                yAxisIndex: 0,
                data:[409.07,187.48,94.86,161.11,327.68,355.9,0.56,49.86,0.56],
                // itemStyle : { normal: {label : {show: true}}},
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                }
            },
            {
                name:'管點數量',
                type:'bar',
                yAxisIndex: 1,
                data:[18447,7800,2843,6547,15170,26569,506,1873,542],
                // itemStyle : { normal: {label : {show: true}}},
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                }
            }
        ]
    };