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({

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月'],

//设置字体倾斜

axisLabel: {

interval: 0,

rotate: 45,

//倾斜度 -90 至 90 默认为0

margin: 2,

textStyle: {

fontWeight: "bolder",

color: "#000000"

}

},

}],

yAxis: [{

type: 'value',

splitArea: {

show: true

}

}],

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: {

normal: {

label: {

show: true,

//是否展示

textStyle: {

fontWeight: 'bolder',

fontSize: '12',

fontFamily: '微软雅黑',

}

}

}

},

}]

});

}