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 getElementsByTagName
Jan 31 Javascript
javascript+xml实现简单图片轮换(只支持IE)
Dec 23 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
JavaScript设计模式之工厂模式和构造器模式
Feb 11 Javascript
浅谈jQuery框架Ajax常用选项
Jul 08 jQuery
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 Javascript
vue router总结 $router和$route及router与 router与route区别
Jul 05 Javascript
vue跳转页面的几种方法(推荐)
Mar 26 Javascript
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
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 echo 输出字符串函数详解
2010/05/13 PHP
php上传文件中文文件名乱码的解决方法
2013/11/01 PHP
php_screw安装使用教程(另一个PHP代码加密实现)
2014/05/29 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
2010/12/28 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
Knockoutjs快速入门(经典)
2012/12/24 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
Javascript中使用A标签获取当前目录的绝对路径方法
2015/03/02 Javascript
JavaScript中的Function函数
2015/08/27 Javascript
基于jquery实现复选框全选,反选,全不选等功能
2015/10/16 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
详解axios在node.js中的post使用
2017/04/27 Javascript
深入理解JavaScript继承的多种方式和优缺点
2017/05/12 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
[06:49]2018DOTA2国际邀请赛寻真——VirtusPro傲视群雄
2018/08/12 DOTA
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
对python中的控制条件、循环和跳出详解
2019/06/24 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python对Excel的读取的示例代码
2020/02/14 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
如何理解transaction事务的概念
2015/05/27 面试题
化验室技术员岗位职责
2013/12/24 职场文书
艺术节主持词
2014/04/02 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
Window server 2012 R2 AD域的组策略相关设置
2022/04/28 Servers
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS