echarts柱狀折線圖

本文轉載自查看原文 2017-11-24 00:06 1665

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 900px;height:400px;"></div>

    <button id="btn">clcik</button>
    <script>

    /*toolbox: {
        show : true,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },*/

var option = {
    tooltip : {
        trigger: 'axis'
    },
    grid:{
        x: 0,
        x2: 150
    },
    calculable : true,
    legend: {
        data:['蒸發量','降水量','平均溫度','平均溫度2']
    },
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            boundaryGap:[0,'10%'],
            position:"right",
            offset:0,
            type : 'value',
            name : '水量',
            splitLine:{
                show:false
            },
            axisLabel : {
                formatter: '{value} ml'
            },
            axisTick:{
                inside:true
            }
        },
        {
            boundaryGap:[0,'10%'],
            position:"right",
            offset:50,
            type : 'value',
            name : '溫度',
            splitLine:{
                show:false
            },
            axisLabel : {
                formatter: '{value} °C'
            }
        },
        {
            boundaryGap:[0,'10%'],
            position:"right",
            offset:100,
            type: 'value',
            name : '溫度2',
            splitLine:{
                show:false
            },
            axisLabel:{
                formatter: '{value} °C'
            }
        }
    ],
    series : [

        {
            name:'蒸發量',
            type:'bar',
             yAxisIndex: 0,
            data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
        },
        {
            name:'降水量',
            type:'bar',
             yAxisIndex: 0,
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name:'平均溫度',
            type:'line',
            yAxisIndex: 1,
            data:[2.0, 3.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 25.0, 16.5, 10.0, 9.2]
        },
        ,
        {
            name:'平均溫度2',
            type:'line',
            yAxisIndex: 2,
            data:[2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
        }
    ]
};


var option2 = {
    tooltip : {
        trigger: 'axis'
    },
    grid:{
        x: 0,
        x2: 150
    },
    calculable : true,
    legend: {
        data:['降水量','平均溫度']
    },
    xAxis : [
        {
            type : 'category',
            data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
        }
    ],
    yAxis : [
        {
            boundaryGap:[0,'10%'],
            position:"right",
            offset:0,
            type : 'value',
            name : '水量',
            splitLine:{
                show:false
            },
            axisLabel : {
                formatter: '{value} ml'
            },
            axisTick:{
                inside:true
            }
        },
        {
            boundaryGap:[0,'10%'],
            position:"right",
            offset:50,
            type : 'value',
            name : '溫度',
            splitLine:{
                show:false
            },
            axisLabel : {
                formatter: '{value} °C'
            }
        }
    ],
    series : [
        {
            name:'降水量',
            type:'bar',
             yAxisIndex: 0,
            data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
        },
        {
            name:'平均溫度',
            type:'line',
            yAxisIndex: 1,
            data:[2.0, 3.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 25.0, 16.5, 10.0, 9.2]
        }
    ]
};




 // 基於准備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option,true); 

var offOn=true;
document.querySelector("#btn").onclick=function(){
    if(offOn){
        myChart.setOption(option2,true); 
    }else{
        myChart.setOption(option,true); 
    }
        offOn=!offOn;
    
}

    </script>
</body>
</html>

在series有個柱間距的屬性barGap，設置-100%可以和別的柱重合。

barGap -100% 就可以當成背景可以使用在堆積柱狀圖里的總數里

formatter:function(params){  //數據單位格式化  
           var relVal = params[0].name;  //x軸名稱  
           for (var i = 0, l = params.length; i < l; i++) {    
               relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value+"%";    
           }  
               
           return relVal;    
        }  
  
formatter: "{b}<br/>{a} : {c}分"  //數據格式化，{b}x軸名稱，{a}series的name，{c}value  

params返回當前格式化文本的所屬對象。很有用方法

圖例:
legend
    selectedMode:false
    關閉對圖例的操作

formatter:function(params){ //數據單位格式化
var relVal = params[0].name; //x軸名稱
for (var i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value+"%";
}
return relVal;
}
formatter: "{b}<br/>{a} : {c}分" //數據格式化，{b}x軸名稱，{a}series的name，{c}value

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 echarts折線圖 echarts 折線圖 echarts折線圖 echarts中柱狀圖折線圖的基本配置 echarts學習：簡單柱狀圖和折線圖 echarts繪制折線圖、柱狀圖 echarts多條折線圖和柱狀圖實現 echarts 動態獲取數據（柱狀圖，折線圖） Echarts---折線圖--柱狀圖 Echarts 系列之折線圖、柱狀圖相關配置