Fork me on GitHub

echarts柱状折线图 

<!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
    关闭对图例的操作

 

 

  1. formatter:function(params){  //数据单位格式化  
  2.            var relVal = params[0].name;  //x轴名称  
  3.            for (var i = 0, l = params.length; i < l; i++) {    
  4.                relVal += '<br/>' + params[i].seriesName + ' : ' + params[i].value+"%";    
  5.            }  
  6.                
  7.            return relVal;    
  8.         }  
  9.   
  10. formatter: "{b}<br/>{a} : {c}分"  //数据格式化，{b}x轴名称，{a}series的name，{c}value  
posted @ 2017-11-24 00:06  小数点就是问题  阅读(2866)  评论(0)  编辑  收藏  举报