javascript - 是否可以使我的 ECharts 折线图更加紧凑？

Question

我正在使用 ECharts 创建折线图。有谁知道是否可以使其更紧凑？我的意思是减少 Canvas 内容周围的空白间距。

代码:

 document.addEventListener('DOMContentLoaded', function() {
var chart = echarts.init(document.getElementById('firepower-sessions-history-line-chart'))

option = {
  animation: false,
  tooltip: { trigger: 'axis' },
  xAxis: [
    {
      type: 'time',
      interval: 3600000, // 1 hour (ms)
      axisLabel: {
        formatter: function(value) {
          var date = new Date(value)

          var hours = ('0' + date.getHours()).slice(-2)
          var minutes = ('0' + date.getMinutes()).slice(-2)

          var label = hours + ':' + minutes

          if (hours === '00') {
            var month = ('0' + (date.getUTCMonth() + 1)).slice(-2)
            var day = ('0' + date.getUTCDate()).slice(-2)

            label += '\n' + month + '-' + day
          }

          return label
        }
      }
    }
  ],
  yAxis: [{ type: 'value' }],
  color: ['#3c99ea'],
  series: [
    {
      name: 'Sessions',
      type: 'line', 
      smooth: true,
      itemStyle: { normal: { areaStyle: { type: 'default' } } },
      symbol: 'none',
      data: [
        ['2018-09-19 14:20:09', 3767],
        ['2018-09-19 14:10:08', 3964],
        ['2018-09-19 14:05:08', 3644],
        ['2018-09-19 14:00:09', 3745],
        ['2018-09-19 13:55:09', 3671],
        ['2018-09-19 13:50:08', 3890],
        ['2018-09-19 13:45:09', 3964],
        ['2018-09-19 13:40:09', 4211]
        // and so on...
      ]
    }
  ]
}

chart.setOption(option)
})

body {
    margin: 40px;
}

h2 {
    margin-bottom: 0;
}

#firepower-sessions-history-line-chart {
    width: 1200px;
    height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.js"></script>

<h2>Firepower Session History</h2>
        <p>Last 24 hours</p>
<div id="firepower-sessions-history-line-chart"></div>

Answer 1

ECharts有grid可以帮助您将图表放置在容器内的选项。它具有可以设置的属性，例如上、左、右、下。在本例中，我使用 grid.left 选项删除左侧的空格

document.addEventListener('DOMContentLoaded', function() {
  var chart = echarts.init(document.getElementById('firepower-sessions-history-line-chart'))

  option = {
    grid: {
      left: "40"
    },
    animation: false,
    tooltip: {
      trigger: 'axis'
    },
    xAxis: [{
      type: 'time',
      interval: 3600000, // 1 hour (ms)
      axisLabel: {
        formatter: function(value) {
          var date = new Date(value)

          var hours = ('0' + date.getHours()).slice(-2)
          var minutes = ('0' + date.getMinutes()).slice(-2)

          var label = hours + ':' + minutes

          if (hours === '00') {
            var month = ('0' + (date.getUTCMonth() + 1)).slice(-2)
            var day = ('0' + date.getUTCDate()).slice(-2)

            label += '\n' + month + '-' + day
          }

          return label
        }
      }
    }],
    yAxis: [{
      type: 'value'
    }],
    color: ['#3c99ea'],
    series: [{
      name: 'Sessions',
      type: 'line',
      smooth: true,
      itemStyle: {
        normal: {
          areaStyle: {
            type: 'default'
          }
        }
      },
      symbol: 'none',
      data: [
        ['2018-09-19 14:20:09', 3767],
        ['2018-09-19 14:10:08', 3964],
        ['2018-09-19 14:05:08', 3644],
        ['2018-09-19 14:00:09', 3745],
        ['2018-09-19 13:55:09', 3671],
        ['2018-09-19 13:50:08', 3890],
        ['2018-09-19 13:45:09', 3964],
        ['2018-09-19 13:40:09', 4211]
        // and so on...
      ]
    }]
  }

  chart.setOption(option)
})

body {
  margin: 40px;
}

h2 {
  margin-bottom: 0;
}

#firepower-sessions-history-line-chart {
  width: 1200px;
  height: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.js"></script>

<h2>Firepower Session History</h2>
<p>Last 24 hours</p>
<div id="firepower-sessions-history-line-chart"></div>