Echarts学习记录——设置图表与容器的间隔

最新推荐文章于 2023-05-18 14:25:59 发布

RQlyc

最新推荐文章于 2023-05-18 14:25:59 发布

阅读量953

点赞数

Echarts学习记录——设置图表与容器的间隔

关键属性

grid:直角坐标系内绘图网格。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ECharts">
<title>Echarts学习记录</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
   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({
   //设置图表与容器的间隔
   grid:{
   x:100,
   y:200,
   x2:300,
   y2:400,
   borderWidth:1
   },
   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]
}
]
});
}

</script>

<body>
<div id="mainBar" style="border:1px solid #ccc;padding:10px;"></div>

<script type="text/javascript" src="http://apps.bdimg.com/libs/echarts/2.1.9/source/echarts-all.js"></script>
<script>
</script>
</body>
</html>