关键属性

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++刷题（30/100）

    题目一:合并两个排序的链表 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 思路:利用两个指针cur1,cur2来指分别向两个链表中当前较小的和当前较大的 ...

  2. 爬虫笔记之w3cschool注册页面滑块验证码破解（巨简单滑块位置识别，非鼠标模拟轨迹）

    一.背景介绍 最开始接触验证码破解的时候就是破解的w3cschool的使用手机号找回密码页面的验证码,详见:验证码识别之w3cschool字符图片验证码(easy级别),这次破解一下他们注册页面的滑块 ...

  3. 高可用的MongoDB集群【转】

    刚接触MongoDB,就要用到它的集群,只能硬着头皮短时间去看文档和尝试自行搭建.迁移历史数据更是让人恼火,近100G的数据文件,导入.清理垃圾数据执行的速度蜗牛一样的慢.趁着这个时间,把这几天关于M ...

  4. retrying模块的学习

    retrying模块的学习 我们在写爬虫的过程中,经常遇到爬取失败的情况,这个时候我们一般会通过try块去进行重试,但是每次都写那么一堆try块,真的是太麻烦,所以今天就来说一个比较pythonic的 ...

  5. Project Euler Problem3

    Largest prime factor Problem 3 The prime factors of 13195 are 5, 7, 13 and 29. What is the largest p ...

  6. 002_CentOS-6.4-x86_64安装包的说明

    http://mirrors.sohu.com/centos/6.6/isos/x86_64/?qq-pf-to=pcqq.group //souhu镜像下载地址 0_README.txt 25-Oc ...

  7. 乐视max2 在开发中无法打印某些logcat 解决方案

    乐视屏蔽了打印log.d等类型logcat.解决方案:拨号键盘 *#*#76937#*#* 出现页面后选最下面那个选项就有了.

  8. poj1273

    赤裸裸的最大流 #include <iostream> #include <cstdio> #include <cstdlib> #include <cstr ...

  9. Python 单例模式讲解

    Python 单例模式讲解 本节内容: classmethod用途 单例模式方法一 类__new__方法讲解 单例模式方法二 前言: 使用单例方法的好处:对于一个类,多次实例化会产生多个对象,若使用单 ...

  10. vue 数组

    今天项目中发现的一个问题: 在vue项目中输出一个数组,明明有俩个值:0,6,但是length为1 正常的是这样的 结果研究发现,是vue源码的问题,具体内容如下: 转载自:http://www.cn ...