vue中Echarts柱状图大小随浏览器窗口自适应、轴线刻度标签显示或隐藏

如果柱状图已设置好随浏览器窗口大小变化的宽高，却不随之改变，是因为没有对echarts进行重绘，使用resize() 图表的实例对象调用该方法即可进行重绘。

使用方法如下：

window.addEventListener('resize', () => {
     myChart.resize()
})

完整代码：

<template>
  <div style="width: 50vw;height: 50vh;z-index: 10000000">
    <div id="columnar" style="width: 100%;height: 100%"></div>
  </div>
</template>
<script>
  import * as echarts from 'echarts';
  export default {
    data() {
      return {
      }
    },
    created() {
      setTimeout(() => {
        this.columnar()
      }, 100)
    },
    methods: {
      columnar() {
        var myChart = echarts.init(document.getElementById('columnar'));
        //自适应大小
        window.addEventListener('resize', () => {
          myChart.resize()
        })
        var columnar = {
          xAxis: {
            type: 'category',
            data: ['总人数', '本部', '访客'],
            // 坐标轴刻度
            axisTick: {
              show: false
            },
          },
          yAxis: {
            type: 'value',
            // 分隔线
            splitLine: {
              show: false
            },
            // 坐标轴轴线
            axisLine: {
              show: false
            },
            // 坐标轴刻度
            axisTick: {
              show: false
            },
            // 刻度标签
            axisLabel: {
              show: false
            }
          },
          series: [
            {
              itemStyle: {normal: {label: {show: true, position: 'top'}}},//柱状图顶部数值显示
              barWidth: 15,//柱状图宽度
              data: [120, 200, 150],
              type: 'bar'
            }
          ]
        }
        myChart.setOption(columnar);
      },
    }
  }
</script>