echarts-bar柱状图

<div id="columnar-chart" style="width: 400px; height: 200px"></div>

init () {
  const columnarChart = this.$echarts.init(document.getElementById('columnar-chart'), null, { renderer: 'svg' })
  let option = {
    barWidth: 14,
    barCategoryGap: 58,
    grid: {
      bottom: 22,
      left: 30,
      right: 0,
      top: 20
    },
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      splitNumber: 58,
      axisTick: {
        show: true,
        interval: 0,
      },
      axisLabel: {
        show: true,
        interval: 0 //坐标轴刻度标签的显示间隔 设置成 0 强制显示所有标签
      }
    },
    yAxis: {
      type: 'value',
      position: 'left',
      splitNumber: 3
    },
    series: [
      {
        type: 'bar',
        itemStyle: {
        	//柱状图渐变背景
          color: this.$echarts.graphic.LinearGradient(
            0, 1, 0, 0,
            [
              { offset: 0, color: '#3F96E6' },
              { offset: 1, color: '#11AEEE' }
            ]
          )
        },
        label: {
          show: true,
          color: '#666',
          fontSize: 12,
          position: 'top'
        },
        data: [120, 200, 150, 80, 70, 110, 130]
      }
    ]
  }
  columnarChart.clear();
  setTimeout(() => {
    columnarChart.setOption(option)
  }, 100)
}