VUE echarts柱状图代码

<template>
<div id="Dataplay">

<div style="height: 100%; margin: 10px 15px 10px 10px">
   <div id="main" style="width: 90%;height:750px;position:absolute;"></div>
</div>

</div>

</template>
<script>

import * as echarts from 'echarts'

var charts
// var Yword=[]
// var Ywordnum=[]  //11111

export default {
  data () {
    return {
       queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      charts: null,
    
    }
  },
  components: {
  },
  mounted () {
    this.beforeDestroy()
    this.getcountList()
  },
  
  // getcountList() {  //11111111
  //     this.loading = true;
  //     listWordCount(this.ananlyseParams).then(response => {
  //       console.log(response)
      
  //       for(var i in response){
  //         var word=response[i].words
  //         var wordnum=response[i].count
  //         Yword.push(word)
  //         Ywordnum.push(wordnum)
  //       }
  //       // console.log(Yword)
  //       this.wordList = response;
  //       // this.total = response;
  //       this.loading = false;
  //     });
  //   },                 //

  methods: {

    beforeDestroy () {
      if (this.charts) {
        this.charts.clear()
        this.charts.dispose()
        this.charts = null
        window.removeEventListener('resize', () => { this.charts.resize() })
        window.addEventListener('touchmove', {passive: false})
      }
    },
    getcountList () {

      if (charts !== null && charts !== '' && charts !== undefined) {
        charts.dispose()
      }
      charts = echarts.init(document.getElementById('main'))  //初始化
      var option = {
        title: [{
          text: '关键词数据统计柱状图'
        }],
        tooltip: {//提示框组件
          trigger: 'axis',//触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据0
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            animation: false
            
          },
        backgroundColor: 'rgba(245, 245, 245, 0.8)',
	    borderWidth: 1,
        borderColor: '#ccc',
        padding: 10,
        textStyle: {
        color: '#000'
        },
        
        //   formatter: function (params) {
        //     var relval = params[0].name

        //     return relval
        //   }
        
        },
        color: ['#32CD32'],   //柱状图绿色
        // legend: { //图例组件
        //   data: [],
        //   selected: {
            
        //   },
        //   x: 'left',
        //   y: 'top',
        //   padding: [5, 10, 10, 10],  //echarts改变图例旁边位置
        //   show: true,
        //   icon: 'circle'  //分页按钮图标
        // },
        
        axisPointer: {//坐标轴指示器，坐标轴触发有效
        
          link: {xAxisIndex: 'all'
          //link 属性，不同轴的 axisPointer 可以进行联动，在这里设置。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。
          }
        },
        grid: {
          containLabel: true,  //grid 区域是否包含坐标轴的刻度标签
          top: '20%', // 距上边距
          left: '4%', // 距离左边距
          right: '0%', // 距离右边距
          bottom: '9%' // 距离下边距
        },
        xAxis: [
              {
                type: 'category',
                boundaryGap: true,//坐标轴两边留白
                data: ["导航","播放","的","打开","音乐","我"],   //需要动态赋值
                name: ' 关键词词条 ',
                nameGap: 20,
                axisLabel: { //坐标轴刻度标签的相关设置。
                  interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
                  margin:15,
                  textStyle: {
                    color: 'black',
                    fontStyle: 'normal',
                    fontFamily: '微软雅黑',
                    fontSize: 12,
                  }
                },
                axisTick:{//坐标轴刻度相关设置。
                  show: false,
                },
                axisLine:{//坐标轴轴线相关设置
                  lineStyle:{
                    color:'#fff',
                    opacity:0.2
                  }
                },
                splitLine: { //坐标轴在 grid 区域中的分隔线。
                  show: false,
                }
              }
            ],
            
        yAxis: [{
          type: 'value'
        }],
        // dataZoom: [
        //   {
        //     type: 'slider',  //slider表示有滑动块的（pc）
        //     show: true,  // 是否显示滑动
        //     start: 0,
        //     end: 30,
        //     handleSize: 8  //拉伸滑块标志大小
        //   }
        // ],
        
        //系列列表,具体设置图标项的样式，图形展示类型等。
  series: [
    {
      data: [52501,36245,26223,24564,24567,20963],   //需要动态赋值
      type: 'bar',
      showBackground: true,
      backgroundStyle: {
        // color: 'rgba(180, 180, 180, 0.2)'
      }
    }
  ]
  
      }
   

      charts.setOption(option)
      

    //   var selectArr = option.legend.data
    //   charts.on('legendselectchanged', function (str) {
    //     // eslint-disable-next-line no-unused-vars
    //     var selected = str.selected
    //     var name = str.name
    //     if (name === '全选') {
    //       var flag = $(this).attr('flag')
    //       if (flag === 1) {
    //         var val = false
    //         $(this).attr('flag', 0)
    //         $(this).val('全选中')
    //       } else {
    //         val = true
    //         $(this).attr('flag', 1)
    //         $(this).val('全不选')
    //       }
    //       var obj = {}
    //       for (var key in selectArr) {
    //         obj[selectArr[key]] = val
    //       }
    //       option.legend.selected = obj
    //       charts.setOption(option)
    //     }
    //   })



    }
  },
  destoryed () {
    clearInterval(this.actiontime)
    clearInterval(this.timer)
  }

}
</script>
<style  scoped>

</style>

图示：