jQuery插件echarts去掉垂直网格线用法示例


Posted in Javascript onMarch 03, 2017

本文实例讲述了jQuery插件echarts去掉垂直网格线用法。分享给大家供大家参考,具体如下:

1、问题背景

设计一条统计人数的折线,其中网格线没有垂直线

2、实现源码

(1)有垂直网格线

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-有垂直网格线</title>
    <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png" rel="external nofollow" rel="external nofollow" >
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 99%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      #chart{
        width: 100%;
        height: 100%;
      }
    </style>
    <script>
      $(function(){
        var chart = document.getElementById('chart');
        var echart = echarts.init(chart);
        var option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:['人数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine:{
              show:true
            },
            data: ['周一','周二','周三','周四','周五','周六','周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'人数',
              type:'line',
              stack: '人数',
              data:[1220, 4132, 6101, 3134, 1890, 6230, 3210]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <div id="chart"></div>
  </body>
</html>

(2)无垂直网格线

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>echarts-去掉垂直网格线</title>
    <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png" rel="external nofollow" rel="external nofollow" >
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
    <script type="text/javascript" src="../js/echarts-2.2.7/doc/example/www2/js/echarts-all.js" ></script>
    <style>
      body,html{
        width: 99%;
        height: 99%;
        font-family: "微软雅黑";
        font-size: 12px;
      }
      #chart{
        width: 100%;
        height: 100%;
      }
    </style>
    <script>
      $(function(){
        var chart = document.getElementById('chart');
        var echart = echarts.init(chart);
        var option = {
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data:['人数']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine:{
              show:false
            },
            data: ['周一','周二','周三','周四','周五','周六','周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name:'人数',
              type:'line',
              stack: '人数',
              data:[1220, 4132, 6101, 3134, 1890, 6230, 3210]
            }
          ]
        };
        echart.setOption(option);
      });
    </script>
  </head>
  <body>
    <div id="chart"></div>
  </body>
</html>

3、实现结果

(1)有垂直网格线

jQuery插件echarts去掉垂直网格线用法示例

(2)无垂直网格线

jQuery插件echarts去掉垂直网格线用法示例

4、问题说明

去掉网格中的垂直线,只需在xAxis中加入splitLine属性的设置show:false

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 字符编码规则
May 04 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
jQuery基础知识filter()和find()实例说明
Jul 06 Javascript
jquery仿搜索自动联想功能代码
May 23 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
Jun 03 Javascript
用JavaScript来美化HTML的select标签的下拉列表效果
Nov 17 Javascript
详解Javascript模板引擎mustache.js
Jan 20 Javascript
全面解析JavaScript里的循环方法之forEach,for-in,for-of
Apr 20 Javascript
Vue 2中ref属性的使用方法及注意事项
Jun 12 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
layui实现数据分页功能
Jul 27 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 #Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 #Javascript
jQuery简单实现MD5加密的方法
Mar 03 #Javascript
详解angular2封装material2对话框组件
Mar 03 #Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 #Javascript
AngularJS表格样式简单设置方法示例
Mar 03 #Javascript
AngularJS表格添加序号的方法
Mar 03 #Javascript
You might like
php中数组首字符过滤功能代码
2012/07/31 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
php实现将数组或对象写入到文件的方法小结【三种方法】
2020/04/22 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
简单的jquery左侧导航栏和页面选中效果
2014/08/21 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
JavaScript原生对象之Date对象的属性和方法详解
2015/03/13 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
Vue可自定义tab组件用法实例
2019/10/24 Javascript
Element Backtop回到顶部的具体使用
2020/07/27 Javascript
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
2021/01/29 jQuery
[14:00]DOTA2国际邀请赛史上最长大战 赛后专访B神
2013/08/10 DOTA
[01:46]2020完美世界全国高校联赛秋季赛报名开启
2020/10/15 DOTA
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
Python英文文章词频统计(14份剑桥真题词频统计)
2019/10/13 Python
Django app配置多个数据库代码实例
2019/12/17 Python
python+adb+monkey实现Rom稳定性测试详解
2020/04/23 Python
python实现暗通道去雾算法的示例
2020/09/27 Python
css3与html5实现响应式导航菜单(导航栏)效果分享
2014/02/12 HTML / CSS
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
HTML5移动开发图片压缩上传功能
2016/11/09 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
捷克家具销售网站:SCONTO Nábytek
2020/01/02 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
SQL Server面试题
2016/10/17 面试题
学生就业推荐信
2013/11/13 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript