Echarts学习记录——设置图表与容器的间隔
2016-10-25 15:13
519 查看
Echarts学习记录——设置图表与容器的间隔
关键属性
grid:直角坐标系内绘图网格。![](http://i.imgur.com/ytNCLY9.png)
示例代码
<!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> <!-- 标签式引入Eharts 如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错,解决的办法就是把标签移动到body内(后)。 --> <script type="text/javascript" src="http://apps.bdimg.com/libs/echarts/2.1.9/source/echarts-all.js"></script> <script> </script> </body> </html>
效果图
![](http://i.imgur.com/gzHEDBk.png)
相关文章推荐
- Echarts学习记录——设置图表与容器的间隔
- ECharts图表组件中级入门(Axis-axisLabel):图表坐标刻度过多如何设置刻度间隔(interval)以及配置说明
- echarts图表坐标刻度过多如何设置刻度间隔(interval)以及配置说明
- echarts报表legend和图表重合问题(设置绘图区域(grid)和容器大小)
- ECharts-JavaScript图表库学习记录
- echarts图表自适应,容器宽度设置为百分数,但是图表显示不全,缩到一起
- C++学习记录之list容器
- thinkPHP 学习记录 一个站点下模块设置
- opencv学习记录(3)Mat - 基本图像容器
- 在yii模块中设置默认控制器(yii学习记录)
- Linux学习记录(8)Linux基本权限设置
- ECharts学习总结(二)-----图表组件漏斗图(funnel)
- iOS学习爬坑记录17:iOS8从app跳转到设置setting bundle的方法(UIApplicationOpenSettingsURLString)
- java下使用TeeChart生成图表的学习记录
- ECharts学习总结(三):ECharts图表对象的初始化(init)详解以及注意事项
- JavaWeb学习记录(一)——response响应头之缓存设置与下载功能的实现
- [Silverlight学习记录]布局系统-设置背景色时需要注意的地方
- Linux学习记录——变量的设置规则
- Spring学习记录一(SpringIOC容器初级)