vue echarts做柱状图

template部分：

        <div
          class="siggle-chart"
          id="histogram"
        ></div>

script部分：

export default {
  name: 'FunctionStatistics',
  data () {
    return {
      echarts: require('echarts'),
      pvUvInfo: [],
      beidouTop10: [],
      functionPvUv: []
}
  },

// 通过监听来渲染
watch: {
    pvUvInfo (newValue, oldValue) {
      this.drawBar()
    },
},

methods: {
    drawBar () {
      var histogramChart = this.echarts.init(document.getElementById('histogram'))
      // 清除缓存
      histogramChart.clear()
      if (this.pvUvInfo.length !== 0) {
        histogramChart.setOption({
          title: 
            {
              text: '访问统计-PV&UV',
              x: '22%',
              textAlign: 'center'
            },
          grid: {
            top: '80',
            width: '40%',
            bottom: '5%',
            left: 20,
            right: 0,
            containLabel: true
          },
          xAxis: 
            {
              type: 'category',
              // name: '用户ID',
              axisTick: {
                inside: true
              },
              splitLine: {
                show: false
              },
              data: this.pvUvInfo.xKeyList
            },
          yAxis: 
            {
              type: 'value',
              // name: '访问次数',
              // scale: true,
              axisTick: {
                inside: true
              }
            },
          series: 
            {
              type: 'bar',
              barWidth: '10%',
              data: this.pvUvInfo.valueList,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'right'
                  }
                }
              }
            }
        })
      }
    }