您的位置：首页 > 其它

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

2017-05-18 17:22 381 查看

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>

效果图

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航