Echarts一個頁面加載多個圖表及圖表自適應

模塊化加載

//入口
require.config({
    paths: {
        echarts: 'http://echarts.baidu.com/build/dist'
    }
});
//按需加載=====================================================
require([
        'echarts','echarts/chart/bar',
        'echarts/chart/line'
    ],
    drawEcharts // 加載一個圖表函數的集合
);

//需要加載封裝好的圖表函數
function drawEcharts(ec){
　　MaterialReserves(ec);
    VectorIntelligent(ec);
}

//定義一個數組，作為圖表只適應存儲
var echarts = [];

加載兩個圖表

/*物資儲備情況圖表 ==========================================================================================*/

function MaterialReserves(ec) {
    var MaterialReservesEcharts = ec.init(document.getElementById('material-reserves'));
    var option = {
        title : {
            text: '某地區蒸發量和降水量',
            subtext: '純屬虛構'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['蒸發量','降水量']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'蒸發量',
                type:'bar',
                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],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'降水量',
                type:'bar',
                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],
                markPoint : {
                    data : [
                        {name : '年最高', value : 182.2, xAxis: 7, yAxis: 183, symbolSize:18},
                        {name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
        MaterialReservesEcharts.setOption(option);
        echarts.push(MaterialReservesEcharts);
    };

/*火災熱點統計=======================================================================*/

function VectorIntelligent(ec){
    var VectorIntelligentEcharts = ec.init(document.getElementById('vector-intelligent'));
    var option = {
        title : {
            text: '未來一周氣溫變化',
            subtext: '純屬虛構'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['最高氣溫','最低氣溫']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value',
                axisLabel : {
                    formatter: '{value} °C'
                }
            }
        ],
        series : [
            {
                name:'最高氣溫',
                type:'line',
                data:[11, 11, 15, 13, 12, 13, 10],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'最低氣溫',
                type:'line',
                data:[1, -2, 2, 5, 3, 2, 0],
                markPoint : {
                    data : [
                        {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name : '平均值'}
                    ]
                }
            }
        ]
    };
                    
    
    VectorIntelligentEcharts.setOption(option); 
    echarts.push(VectorIntelligentEcharts);
}

圖表加載點擊事件

ChongQingMapEcharts.on('click',function(param){ //ChongQingMapEcharts 是獲取圖表容器所賦值的一個變量
　　console.log(param);
});

瀏覽器縮放圖表自適應

window.onresize=function(){
        for(var i = 0;i<echarts.length;i++){
            echarts[i].resize();
        }
    }