Echarts一个页面加载多个图表及图表自适应

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();
        }
    }