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 相关文章推荐
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
Ionic快速安装教程
Jun 03 Javascript
通过button将form表单的数据提交到action层的实例
Sep 08 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
Apr 21 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
vue 中使用print.js导出pdf操作
Nov 13 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和ACCESS写聊天室(八)
2006/10/09 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
轻轻松松学习JavaScript
2007/02/25 Javascript
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
Jquery ThickBox插件使用心得(不建议使用)
2010/09/08 Javascript
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
JS实现QQ图片一闪一闪的效果小例子
2013/07/31 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
JS根据生日算年龄的方法
2015/05/05 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
2015/09/06 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
Bootstrap modal 多弹窗之叠加引起的滚动条遮罩阴影问题
2017/02/27 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
2019/11/13 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
详解Python import方法引入模块的实例
2017/08/02 Python
对python中的argv和argc使用详解
2018/12/15 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python with (as)语句实例详解
2020/02/04 Python
python re的findall和finditer的区别详解
2020/11/15 Python
国际知名设计师时装商店:Coggles
2016/09/05 全球购物
英国足球店:UK Soccer Shop
2017/11/19 全球购物
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
业绩考核岗位职责
2014/02/01 职场文书
书法大赛策划方案
2014/06/04 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
职位证明模板
2015/06/23 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python