ercharts一个页面能放几个_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);

}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值