Echarts学习记录——如何去掉网格线及网格区域颜色

关键属性

splitLine和splitArea，可以设置相关的属性

示例代码

<!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({ title : { text: '未来一周\n气温变化', subtext: '纯属虚构' }, legend: { data:['蒸发量','降水量'] }, xAxis : [ { splitLine:{show: false},//去除网格线 type : 'category', data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], splitArea : {show : true}//保留网格区域 } ], yAxis : [ { splitLine:{show: false},//去除网格线 type : 'value', splitArea : {show : true}//保留网格区域 } ], 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>

效果图

Echarts学习记录——如何去掉网格线及网格区域颜色相关推荐

如何去掉网格线及网格区域颜色
Echarts学习记录--如何去掉网格线及网格区域颜色关键属性 splitLine和splitArea,可以设置相关的属性示例代码 <!DOCTYPE html> <html l ...
CSS学习记录3.2/设置标签的背景颜色/控制背景图片的平铺方式/控制背景图片的位置/背景图片关联方式/背景图片和插入图片的区别/捕鱼达人背景练习/精灵图
设置标签的背景颜色: CSS中的background-color:属性,就是专门用来设置标签.bc+table 设置背景图片: CSS中的background-image: url( );的属性就是设 ...
Echarts去除x轴,y轴网格线,网格区域(背景)
每次写到Echarts时,总会忘记去除x轴,y轴网格线,网格区域(背景)是怎么设置的了,在这里记录一下,有个印象 xAxis : [{type : 'value',splitNumber: 2,sca ...
结构化网格与非结构化网格学习记录
从总体上来说,数值仿真计算中采用的网格可以大致分为结构化网格和非结构化网格两大类. 一般数值计算中正交与非正交曲线坐标系中生成的网格都是结构化网格,其特点是每一节点与其邻点之间的连接关系固定不变且隐含 ...
CVPR2019| 百度17篇CVPR论文学习记录（包含：无人驾驶、神经网络、GAN、无监督学习、目标检测）
首先感谢现在网上资源丰富,能够获得很多人的总结,结合自身实际进行了学习记录. 并着重标注了其中关键核心目录 1)Taking A Closer Look at Domain Shift: Categ ...
大创学习记录（四）之yolov3代码学习
PyTorch-YOLOv3项目训练与代码学习借助从零开始的PyTorch项目理解YOLOv3目标检测的实现 PyTorch 对于PyTorch就不用多说了,目前最灵活.最容易掌握的深度学习库,它有 ...
西瓜书学习记录-模型评估与选择（第二章）
西瓜书学习记录-模型评估与选择第二章啦整个过程可以描述为在训练集上去训练,在验证集上去调参,调完参之后再到训练集上去训练,直到结果满意,最后到测试集上去测试. 例子(反例): 上图选择蓝色的线,坏 ...
（一）Git学习记录(不断更新)
作为程序员如果你还不知道 Git 和 GitHub,说不过去吧,赶紧来学习一波. 一.认识GitHub Git 是个版本控制系统,说明白点就是进行代码的各种管理,比如你写错代码进行回滚啊.追寻 Bug ...
python大神的成长之路_Python大神成长之路：第三次学习记录集合函数装饰 re...
学习记录day03 字符串可以直接切片,But字符串不可修改字符串修改:生成了一个新的字符串 LIst修改,在原基础上修改(原内存上) 集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重, ...

Echarts学习记录——如何去掉网格线及网格区域颜色

关键属性

示例代码

效果图

Echarts学习记录——如何去掉网格线及网格区域颜色相关推荐

最新文章

热门文章