关键属性

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. BAT脚本加防火墙455端口

    @echo off mode con: cols=85 lines=30 :NSFOCUSXA title WannaCry勒索病毒安全加固工具 color 0A cls echo. echo. ec ...

  2. casperjs 知乎登陆

    phantom.casperTest = true; phantom.outputEncoding="utf-8"; var fs = require('fs'); var cas ...

  3. java中URL 的编码和解码函数

    java中URL 的编码和解码函数java.net.URLEncoder.encode(String s)和java.net.URLDecoder.decode(String s);在javascri ...

  4. MYSQL数据库链接层- SUMMER-SQL

    2015年3月31日 18:27:34 最后编辑: 2016年4月17日 00:22:00 星期日 最后编辑: 2018-4-25 16:58:44 星期三 最新代码: https://gitee.c ...

  5. kali linux2.0安装vega

    1.到官网下载安装包(选择版本:我这里以Linux64位为例) vega下载地址:https://subgraph.com/vega/download/ 2.解压到指定目录: unzip VegaBu ...

  6. tortoise svn 忽略bin、obj等文件夹

    项目空白处右击 =>TortoiseSVN => Properties => New => Other => svn:global-ignores value => ...

  7. yolov2在CUDA8.0+cudnn8.0下安装、训练、检测经历

    这次用yolov2做检测时遇到个大坑,折腾了我好几天,特以此文记录之. 一.安装cuda+cudnn 它们的版本必须要匹配,否则训练后检测不出目标! 1.下载cuda8.0.61_375.26_lin ...

  8. 【招聘】这一次，我们Hold住了世界杯

    作为国内最大的云计算服务商,阿里云在视频领域拥有绝对的技术优势,全球范围内拥有1500多个CDN节点,带宽储备120多T,不仅为优酷.CNTV.CCTV5提供技术支撑,还承担了全网70%的世界杯流量. ...

  9. aria2

    在之前我们已经介绍了通过uGet使用aria2来进行下载,但是这样只是使用aria2最简单的功能,现在我们来介绍一下aria2的常用命令 简单篇: 一般使用使用 aria2 下载文件,只需在命令后附加 ...

  10. *使用配置类定义Codeigniter全局变量

    之前提到的 CodeIgniter 引入自定义公共函数 这篇文章提到了公共函数实现,全局的变量也可以借助 helper 函数来实现.不过,更为合适的方式可能要属用配置类定义了. CodeIgniter ...