关键属性

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. 用MFC（C++）实现拼音搜索

    2015年4月1日更新: 我在github开源了Objective-C版的拼音搜索项目,感兴趣的可以去看看: OC版拼音搜索 最近项目需要实现按照拼音搜索资源.在网上找了一下,这方面的东西太少了. J ...

  2. tensorflow的卷积和池化层（二）：记实践之cifar10

    在tensorflow中的卷积和池化层(一)和各种卷积类型Convolution这两篇博客中,主要讲解了卷积神经网络的核心层,同时也结合当下流行的Caffe和tf框架做了介绍,本篇博客将接着tenso ...

  3. 关于Python IDLE reload(sys)后无法正常执行命令的原因

    转载自:http://blog.csdn.net/kxcfzyk/article/details/41414247?utm_source=tuicool&utm_medium=referral ...

  4. [转]html网页 swf播放器使用代码

    <object id="player" height="240" width="275" classid="CLSID:6B ...

  5. 初始ASP.NET数据控件【续 ListView】

    ListView控件   ListView控件可以用来显示数据,它还提供编辑,删除,插入,分页与排序等功能.ListView是GridView与DataList的融合体,它具有GridView控件编辑 ...

  6. nginx安装报错:configure: error: the HTTP rewrite module requires the PCRE library

    参考:http://blog.51cto.com/williamx/958398 需要安装pcre-devel与openssl-devel yum -y install pcre-devel open ...

  7. java8新特性详解(转)

    原文链接. 前言: Java 8 已经发布很久了,很多报道表明Java 8 是一次重大的版本升级.在Java Code Geeks上已经有很多介绍Java 8新特性的文章,例如Playing with ...

  8. 对象克隆及属性转换-JavaScript

    在某些项目中,需要将一些返回信息进行其他语言的翻译,可以为不同语言用户提供不同的语言版本.下面是一个实现: /** * @class Translate * @description 查询字典,翻译成 ...

  9. jq选择子元素

    jq选择子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="h ...

  10. Ruby语言学习笔记

    在codecademy上开始玩ruby了 1.数据类型:boolean,string,number 变量直接用即可,不用声明(“拿来主义”) 运算符:+ - * / ** % == != && ...