本文主要介绍了jquery插件echarts去掉垂直网格线用法,结合实例形式对比分析了jquery图标插件echarts针对垂直网格线的相关设置操作技巧,需要的朋友可以参考下，希望能帮助到大家。 

1、问题背景

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

2、实现源码

（1）有垂直网格线

html>

  
    <meta>
    <title>echarts-有垂直网格线</title>
    <link>
    <script></script>
    <script></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>
  
  
    <p></p>
  

ECharts Master

ECharts 图表大师。根据用户数据和业务上下文，自动设计并生成专业的 ECharts 可视化图表。使用场景：(1) 用户提供表格/JSON/CSV 数据需要可视化，(2) 用户说"帮我做个图"、"画个图表"，(3) 需要将查询结果可视化展示。

下载

（2）无垂直网格线

html>

  
    <meta>
    <title>echarts-去掉垂直网格线</title>
    <link>
    <script></script>
    <script></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>
  
  
    <p></p>
  

3、实现结果

（1）有垂直网格线

（2）无垂直网格线

4、问题说明

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

相关推荐：

echarts实现的循环生成图效果示例分享

在vue中添加Echarts图表使用详解

PHP 使用Echarts生成数据统计报表详解