ECharts自适应窗体大小

最新推荐文章于 2021-08-20 16:29:49 发布

快乐的小疯子zhaozhao

最新推荐文章于 2021-08-20 16:29:49 发布

阅读量165

点赞数 1

文章标签： html echarts

本文链接：https://blog.csdn.net/qq_27081181/article/details/85103956

版权

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<style>
html,body,#echarts{
margin:0px;
padding:0px;
heigt:100%;
width:100%;
}
</style>
</head>

<div id="echarts" style="height:139px"></div>

<script src="echarts.js"></script>

var worldMapContainer = document.getElementById('echarts');

var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth+'px';
worldMapContainer.style.height = window.innerHeight+'px';
};
resizeWorldMapContainer();

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(worldMapContainer);

var option = {
xAxis: {
show: true,
// axisLabel: 45,
splitLine:{show: false},//去除网格线
type: 'category',
axisLabel:{
textStyle:{
color: '#c9c9ca'
}
},
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月', '9月', '10月', '11月', '12月']
},
yAxis: {
splitLine:{show: true},//去除网格线
type: 'value',
axisLabel:{
textStyle:{
color: '#c9c9ca'
}
},
},
series: [{
barWidth : 18,//柱图宽度
itemStyle:{
normal:{
color:'#65ffff',
}
},
data: [120, 200, 150, 80, 70, 110, 130, 200, 300, 400, 500, 120],
type: 'bar'
}]
};