var width;
var height;
var myChart;
$(function(){
//自适应设置
width = $(window).width();
height = $(window).height();
$("#mainBar").css("width",width-40);
$("#mainBar").css("height",height-40);
console.log(height);
setEcharts();
});
$(window).resize(function() {
width = $(window).width();
height = $(window).height();
$("#mainBar").css("width",width-40);
$("#mainBar").css("height",height-40);
});
function setEcharts(){
myChart = echarts.init(document.getElementById('mainBar'));
//自适应
window.onresize = myChart.resize;
myChart.setOption({
title : {
text: '未来一周气温变化',
subtext: '纯属虚构'
},
legend: {
data:['蒸发量','降水量']
},
calculable : true,
xAxis : [
{
//show:false, //影藏
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]
},
{
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],
//顶部数字展示pzr
itemStyle: {
//柱形图圆角,鼠标移上去效果,如果只是一个数字则说明四个参数全部设置为那么多
emphasis: {
barBorderRadius: 30
},
normal: {
//柱形图圆角,初始化效果
barBorderRadius:[10, 10, 10, 10],
label: {
show: true,//是否展示
textStyle: {
fontWeight:'bolder',
fontSize : '12',
fontFamily : '微软雅黑',
}
}
}
},
}
]
});
}