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 相关文章推荐
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
vue.js动态数据绑定学习笔记
May 19 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
微信小程序button组件使用详解
Jan 31 Javascript
详解原生JS动态添加和删除类
Mar 26 Javascript
jQuery实现高级检索功能
May 28 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
如何使用JavaScript策略模式校验表单
Apr 29 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使用curl和正则表达式抓取网页数据示例
2014/04/13 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
对字符串进行HTML编码和解码的JavaScript函数
2010/02/01 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
vue select二级联动第二级默认选中第一个option值的实例
2018/01/10 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
2020/03/05 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
使用python的chardet库获得文件编码并修改编码
2014/01/22 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
Python3.2模拟实现webqq登录
2016/02/15 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Python Django2.0集成Celery4.1教程
2019/11/19 Python
浅谈sklearn中predict与predict_proba区别
2020/06/28 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
村干部培训方案
2014/05/02 职场文书
弄虚作假心得体会
2014/09/10 职场文书
男人帮观后感
2015/06/18 职场文书
企业年会祝酒词
2015/08/11 职场文书
golang 定时任务方面time.Sleep和time.Tick的优劣对比分析
2021/05/05 Golang
MySQL Router实现MySQL的读写分离的方法
2021/05/27 MySQL
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL