vue echarts词云封装

父组件传值dataList

              [
                {
                  name:'测试3',
                  value:'120'
                },
                {
                  name:'测试1',
                  value:'200'
                },
                {
                  name:'测试2',
                  value:'20'
                }
              ]

<template>
  <div class="cloudOuter" v-loading="loading">
    <p v-if="!showEchart" class="no-data" style="text-align: center;position: absolute">暂无数据</p>
    <div v-if="showEchart"  class="cloud" ref="cloud" @click="eConsole"></div>
  </div>
</template>

<script>

  export default {
    name: "cloud",
    props:{
      dataList:Array,
    },
    data() {
      return {
        loading:false,
        data:[],
        showEchart:false,
        num:1,
        timers:[]
      }
    }, //图表实例
    watch:{
      async showEchart(newValue){
        this.showEchart = newValue
        if(newValue == true){
          await this.echartsInit()
        }
      },
      async dataList(newValue,oldValue){
        this.loading = true
        if(newValue.length != 0){
          this.data = []
          newValue.map(m => {
            let textSyle = {
              normal:{
                color:this.createRandomItemStyle()
              }
            }
            m.textStyle = textSyle
            this.data.push(m)
          })
          await this.echartsInit()
        }else{
          this.loading = false
        }
      }
    },
    destroyed(){
      // 这一步的目的是移除监听
      window.removeEventListener("resize",this.listener)
    },
    async mounted() {
      window.addEventListener('resize', this.listener)
      this.data = []
      this.dataList.map(m => {
        let textSyle = {
          normal:{
            color:this.createRandomItemStyle()
          }
        }
        m.textStyle = textSyle
        this.data.push(m)
      })
      if(this.dataList.length > 0){
        this.showEchart = true
      }
      try {
        // 在通过mounted调用即可
        await this.echartsInit()
      }catch (e) {
        console.log(e)
      }
    },
    methods: {
      // 防抖
      listener() {
        //逻辑代码
        if (this.$refs.cloud) {
          let chart = this.$echarts.init(this.$refs.cloud)
          chart.resize()
        }
      },
      createRandomItemStyle(){
        return 'rgb(' + [
          Math.round(Math.random()*180),
          Math.round(Math.random()*180),
          Math.round(Math.random()*360)
        ].join(',')+')'
      },
      createRandomValue(){
        return Math.round(Math.random()*1000)
      },
      echartsInit() {
        this.flag = true
        var timer = setInterval(() => {
          if(!this.flag){
            clearInterval(timer)
          }
          if(this.$refs.cloud && this.flag){
            this.flag = false
            clearInterval(timer)
            this.$echarts.init(this.$refs.cloud).setOption({
              toolbox: {
                feature: {
                  dataView: { show: false, readOnly: false,},
                  restore: { show: false },
                  saveAsImage: { show: false }
                }
              },
              tooltip: {//提示框组件
                trigger: 'item',
                formatter: (params) => {
                  return `${params.data.name}: ${params.data.value}`
                }
              },
              series: [{
                type: 'wordCloud',
                width: '84%',
                sizeRange: [12, 40],
                rotationRange: [-90, 90],
                rotationStep: 45,
                gridSize: 8,
                drawOutOfBound: false,
                layoutAnimation: true,
                // data 数组格式, 必须有name和value属性,
                data: this.data
              }]
            })
            this.loading = false
          }
        },50)

      },
      eConsole(e){
        console.log(e)
      }
    }
  }
</script>

<style scoped lang="scss">
  .cloudOuter{
    position: relative;
    height: 220px;
    width: 100%;
    .cloud{
      height: 220px;
    }
  }
</style>