var width;

var height;

var myChart;

$(function() {

//自適應(yīng)設(shè)置

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'));

//自適應(yīng)

window.onresize = myChart.resize;

myChart.setOption({

tooltip: {

trigger: 'axis'

},

legend: {

data: ['蒸發(fā)量', '降水量']

},

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

//設(shè)置字體傾斜

axisLabel: {

interval: 0,

rotate: 45,

//傾斜度 -90 至 90 默認(rèn)為0

margin: 2,

textStyle: {

fontWeight: "bolder",

color: "#000000"

}

},

}],

yAxis: [{

type: 'value',

splitArea: {

show: true

}

}],

series: [{

name: '蒸發(fā)量',

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

//頂部數(shù)字展示pzr

itemStyle: {

normal: {

label: {

show: true,

//是否展示

textStyle: {

fontWeight: 'bolder',

fontSize: '12',

fontFamily: '微軟雅黑',

}

}

}

},

}]

});

}

總結(jié)

以上是生活随笔為你收集整理的echart单击后获取横坐标值_echart 横坐标倾斜的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。