如何从 Echart 库的折线图中删除网格答案

【问题标题】：How to remove grid from line chart of Echart library如何从 Echart 库的折线图中删除网格
【发布时间】：2018-10-26 14:37:35
【问题描述】：

我将通过echart库绘制折线图。当我绘制图表时，它也显示网格。我不需要网格，但我无法删除它。我检查了Echart options，我知道 grid:{show=false} 是 echart 的一个选项，但它无效。我的 sn-p 代码如下。

function lineGraph(xAxisLabels){    
var echartLine = echarts.init(document.getElementById('myElineChart')); 
  echartLine.setOption({
    grid: {show: false},
    xAxis: [{
      type: 'category',
      showGrid: false,
      data: xAxisLabels
    }],
    yAxis: [{
      type: 'value',    
    }],
    series: [{
      name: 'Actual',
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }],
  });}

结果如下：

如果您能帮助我，我将不胜感激。

【问题讨论】：

标签： charts linechart echarts

【解决方案1】：

我迟到了，但如果将来有人需要帮助，请回答这个问题。

认为这是因为 grid 属性是一个很好的猜测，但实际上 grid 默认设置为 false。线条由 X 和 Y 轴上的一个属性生成，称为 splitLine，这使它看起来像一个网格。您可以通过更改属性来删除它，如下所示：

function lineGraph(xAxisLabels){    
var echartLine = echarts.init(document.getElementById('myElineChart')); 
  echartLine.setOption({
    grid: {show: false},
    xAxis: [{
      type: 'category',
      showGrid: false,
      data: xAxisLabels,
      splitLine: {
         show: false
      },
    }],
    yAxis: [{
      type: 'value',   
      splitLine: {
         show: false
      },
    }],
    series: [{
      name: 'Actual',
      type: 'line',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }],
  });}

【讨论】：

【解决方案2】：

xAxis: {
    axisLine: {
        show: false, // Hide full Line
    },
    xisTick: {
        show: false, // Hide Ticks,
    },
}

完整结果

【讨论】：