echarts 柱狀圖 定制雙y軸數據

 

 

option = {
    backgroundColor:"#293c55",
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        itemWidth:15, //設置legend圖標的寬度
        itemHeight:15, //設置legend圖標的高度
        right:60, //設置legend的位置
        data: [
            {name:"蒸發量",icon:"rect"},
            {name:"降水量",icon:"rect"}
        ],
        textStyle:{
            color:"#fff"
        }
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: ['2020及以前', '2013', '2014', '2015', '2016', '2017', '2018',"2019"],
            axisTick:{
                show:false
            },
            splitLine:{  //設置分割線
                show:true,
                lineStyle:{
                    color:"#277eab",
                    width:1,
                    type:"solid"
                }
            },
            axisLabel: {
                 show: true,
                 textStyle: {
                     color: '#fff'
                 },
                 interval:0,  //解決echarts數值因文字較多顯示不全問題
            },
            axisLine:{  // 設置軸線是否顯示
                lineStyle:{
                    color:"#277eab"
                }
            }
        },
    ],
    yAxis: [
        
        {   
            name:"(100萬kw·h)",
            max:600,
            interval:100,  //控制y軸的刻度
            type: 'value',
            axisTick:{ //控制y軸的刻度
                show:false
            },
            axisLabel: {
                  show: true,
                        textStyle: {
                        color: '#fff'
                  },
                  formatter: function (value) { //定制y軸數據
                        var texts = [];
                        if(value==0){
                            texts.push('0');
                        }
                        else if (value ==100) {
                            texts.push('');
                        }
                        else if (value== 200) {
                            texts.push('');
                        }
                        else if(value== 300){
                            texts.push('300');
                        }
                        else if(value== 400){
                            texts.push('');
                        }
                        else if(value== 500){
                            texts.push('');
                        }
                        else{
                            texts.push('600');
                        }
                        return texts;
                    }
            },
            axisLine:{
                lineStyle:{
                    color:"#277eab"
                }
            },
             splitLine:{
                show:true,
                lineStyle:{
                    color:"#277eab",
                    width:1,
                    type:"solid"
                }
            },
            nameTextStyle:{
               color:"#FFF"
            }
         },
         {   
            name:"(萬次)",
            min:0,
            max:120,
            interval:20,  //控制y軸的分段
            type: 'value',
            axisTick:{
                show:false
            },
            axisLabel: {
                  show: true,
                  textStyle: {
                        color: '#fff'
                  },
                  formatter: function (value) { //定制y軸數據
                        var texts = [];
                        if(value==0){
                            texts.push('0');
                        }
                        else if (value ==20) {
                            texts.push('');
                        }
                        else if (value== 40) {
                            texts.push('');
                        }
                        else if(value== 60){
                            texts.push('60');
                        }
                        else if(value== 80){
                            texts.push('');
                        }
                        else if(value== 100){
                            texts.push('');
                        }
                        else{
                            texts.push('120');
                        }
                        return texts;
                    }
            },
            axisLine:{
                lineStyle:{
                    color:"#277eab"
                }
            },
            lineStyle:{
                 color: ['#277eab'],
                 width: 1,
                 type: 'solid'
            },
            splitLine:{
                show:true,
                lineStyle:{
                    color:"#277eab",
                    width:1,
                    type:"solid"
                }
            },
            nameTextStyle:{
               color:"#FFF"
            }
         }
    ],
    series: [
        {
            name: '蒸發量',
            type: 'bar',
            data: [10, 60, 30, 60, 90, 76, 135,40],
            itemStyle:{
                color:"#045c91"
            }
        },
        {
            name: '降水量',
            type: 'bar',
            data: [9,30, 90, 64, 87, 77, 96,90],
            itemStyle:{
                color:"#36b6fd"
            }
             
        }
    ]
};
 

重點：

1、解決x軸因文字較多顯示不全的問題：

 

 2、定制雙y軸數據