<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<style>
html,body,#echarts{
margin:0px;
padding:0px;
heigt:100%;
width:100%;
}
</style>
</head>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="echarts" style="height:139px"></div>
<!-- ECharts单文件引入 -->
<script src="echarts.js"></script>
<script type="text/javascript">
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'
}]
};
// 为echarts对象加载数据
myChart.setOption(option);
//窗体自适应
window.onresize = function () {
resizeWorldMapContainer();
myChart.resize();
};
</script>
</body>