关键属性

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学习记录——如何去掉网格线及网格区域颜色的更多相关文章

  1. Echarts学习记录——如何给x轴文字标签添加事件

    Echarts学习记录——如何给x轴文字标签添加事件 关键属性 axisLabel下属性clickable:true 并给图表添加单击事件 根据返回值判断点击的是哪里 感觉自己的方法有点变扭,有更好办 ...

  2. ECharts学习记录

    一.ECharts在GitHub的地址以及需要引入文件地址: 1.Github地址:https://github.com/ecomfe/echarts 2.官网下载文件地址:http://echart ...

  3. Android学习记录（10）—Android之图片颜色处理

    你想做到跟美图秀秀一样可以处理自己的照片,美化自己的照片吗?其实你也可以自己做一个这样的软件,废话不多说了,直接上图,上代码了! 效果图如下: 没处理前: 处理之后: MainActivity.jav ...

  4. UWP学习记录9-设计和UI之控件和模式6

    UWP学习记录9-设计和UI之控件和模式6 1.图形和墨迹 InkCanvas是接收和显示墨迹笔划的控件,是新增的比较复杂的控件,这里先不深入. 而形状(Shape)则是可以显示的各种保留模式图形对象 ...

  5. UWP学习记录7-设计和UI之控件和模式4

    UWP学习记录7-设计和UI之控件和模式4 1.翻转视图 使用翻转视图浏览集合中的图像或其他项目(例如相册中的照片或产品详细信息页中的项目),一次显示一个项目. 对于触摸设备,轻扫某个项将在整个集合中 ...

  6. UWP学习记录4-设计和UI之控件和模式1

    UWP学习记录4-设计和UI之控件和模式1 1.控件和事件简介 在 UWP 应用开发中,控件是一种显示内容或支持交互的 UI 元素. 控件是用户界面的构建基块. 我们提供了超过 45 种控件供你使用, ...

  7. jQuery Moblile Demos学习记录Theming、Button、Icons图标，脑子真的不好使。

    jQuery Moblile Demos学习记录Theming.Button.Icons图标,脑子真的不好使. 06. 二 / Jquery Mobile 前端 / 没有评论   本文来源于www.i ...

  8. 我的Spring学习记录（四）

    虽然Spring管理这我们的Bean很方便,但是,我们需要使用xml配置大量的Bean信息,告诉Spring我们要干嘛,这还是挺烦的,毕竟当我们的Bean随之增多的话,xml的各种配置会让人很头疼. ...

  9. Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客

    ==他的博客应该不错,没有细看 Spring Boot学习记录(二)--thymeleaf模板 - CSDN博客 http://blog.csdn.net/u012706811/article/det ...

随机推荐

  1. C 语言结构体之点运算符( . )和箭头运算符( -> )的区别

    很多时候,在对结构体进行相应的编码时,时而发现是用点运算符( . ),时而是用箭头运算符( -> ):那么这两者之间的使用有什么区别么? 相同点:两者都是二元操作符,而且右边的操作数都是成员的名 ...

  2. Python网络通信 （一）

    ISO(国际标准化组织)--->网络体系结构标准 OSI模型 OSI 七层模型 应用层 :提供用户服务,具体内容由特定程序规定 表示层 :提供数据的压缩解压和加密等 会话层 :建立程序级的连接, ...

  3. PHP+mysql系统报错：PHP message: PHP Warning: Unknown: Failed to write session data (files)

    PHP+mysql系统报错:PHP message: PHP Warning:  Unknown: Failed to write session data (files) 故障现象,后台页面点击没有 ...

  4. Java基础90 MySQL触发器

    1.创建触发器 CREATE TRIGGER trigger_name trigger_time trigger_event ON tbl_name FOR EACH ROW trigger_stmt ...

  5. 补充NTP知识的初中高

    前言 网上流传阿里穆工对NTP知识梳理的初级和中级版本.我从时钟服务器厂商在实践中的经验对穆工的文档进行再次整理和补充,希望对使用此设备的客户和对此有兴趣的同学给出一些指引. 个人认为对知识的了解应该 ...

  6. Spring对象依赖关系处理

    Spring中给对象属性赋值 1.通过set方法给属性注入值 2.p名称空间 3.自动装配 4.注解 编写MVCModel调用userAction MVCModel public class MVCM ...

  7. android之ExpandableListView 无法展开

    1.Button 对,没错,就是这个button组件,不知道出现都少次过问题,很多都是它造成的! 最常见的问题:ExpandableListView无法展开,OnItemClickListener不响 ...

  8. MediatR 中介模式

    使用MediatR完成基于内存级别的消息发布订阅 在微服务架构中领域驱动模型中处理领域事件的相关操作 在区分好领域模型后,就拿代码中来说嘛,用户领域中添加用户操作可能或存在跟用户相关的一些领域事件,在 ...

  9. yum源安装php报错缺少libmcrypt.so.4()(64bit)库

    https://blog.csdn.net/programercch/article/details/56282184

  10. spring applicationContext.xml中<beans>中属性概述

    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w ...