如何去掉网格线及网格区域颜色
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
效果图
转载于:https://www.cnblogs.com/yht-817/p/8795814.html
如何去掉网格线及网格区域颜色相关推荐
- Echarts学习记录——如何去掉网格线及网格区域颜色
关键属性 splitLine和splitArea,可以设置相关的属性 示例代码 <!DOCTYPE html> <html lang="en"> <h ...
- Echarts去除x轴,y轴网格线,网格区域(背景)
每次写到Echarts时,总会忘记去除x轴,y轴网格线,网格区域(背景)是怎么设置的了,在这里记录一下,有个印象 xAxis : [{type : 'value',splitNumber: 2,sca ...
- echarts地图的常见用法:基本使用、区域颜色分级、水波动画、区域轮播、给地图添加背景图片和图标、3d地图
前言 最近几天用echarts做中国地图,就把以前写的demo:在vue中实现中国地图 拿来用,结果到项目里直接报错了,后来发现是因为版本的问题,没办法只能从头进行踩坑了.以下内容基于vue3 和 e ...
- qt tableWidget 去掉网格线
//去掉网格线ui->tableWidget->setShowGrid(false);
- 设置echarts 的网格样式颜色
设置echarts的网格样式颜色 参考API文档:http://echarts.baidu.com/option.html#xAxis.splitLine option = {xAxis: {type ...
- 怎样用ps去掉gif图片的背景颜色
最近准备作品展,学习了不少ps的相关知识,在这里先介绍一下怎样用ps去掉gif图片的背景颜色吧.我用的photoshop cs5,这里就拿它举例了. 首先,打开一张gif ...
- python图像处理——图片区域颜色替换小工具
python图像处理--图片区域颜色替换小工具 使用场景 图片区域颜色替换小工具使用python开发,可用于选取图片相同颜色的区域,可设定选择精度,可自由选择颜色,将区域的颜色进行替换.可使用橡皮擦工 ...
- R语言处理数据——ggplot2去掉网格线和背景色
ggplot2去掉网格线和背景色 #ggplot2去掉网格线和背景色 + theme_bw() +theme(panel.grid.major=element_line(colour=NA),pane ...
- 【ps】如何使用photo shop改变指定区域颜色
打开photoshop界面,图像文件拖动到photoshop界面打开.建议先创建一个新的[图层]. 使用鼠标选中先前的图层, 点击上方功能选项的**[图像]-[调整]-[替换颜色]**选项. 然后在对 ...
最新文章
- 计算机在轻化工程中的应用,计算机在基础化学实验当中的应用
- MyEclipse-6.5注冊码生成器源代码
- idea lombok插件安装_开发效率不高?墙裂推荐这十款精选 IntelliJ IDEA 插件
- Bootstrap Paginator 分页插件参数介绍及使用
- 推荐一个宝藏公众号,附大数据PPT合集下载
- 5G 网络的移动性管理上下文对比介绍
- 什么是HTTP代理?
- Pytorch加载.pth文件
- 秒杀活动总结(秒杀之一)
- python 多线程 代理 爬取 豆果美食app
- Premiere使用教程(五)视频导出及添加视频、音频过渡
- 如何让你的Linux程序程序后台运行
- linux 访问windows本地项目异常如何解决,求助
- 对给定的10个国家名,按其字母的顺序输出。C++
- 计算机系统权限授权,win 7 期间版操作系统的权限说明
- 11.18C语言练习题
- 手机sim卡插到电脑上网_你知道吗?关于手机SIM卡的一些事
- 星环TranswarpInceptor通过waterdrop添加表,视图,函数和存储过程
- Hibernate_day03(转载传智播客的老师讲义,博主只图查看方便)
- POP / IMAP 服务器的构建( Dovecot )