标签：vue false name newValue 词云 cloud data echarts Math

父组件传值dataList

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

debounce防抖文件防抖和节流 - 从入门到入土 - 博客园 (cnblogs.com)

<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>
  import {debounce} from "@/utils/utils";

  export default {
    name: "cloud",
    props:{
      dataList:Array,
    },
    data() {
      return {
        loading:false,
        data:[],
        showEchart:false,
        num:1
      }
    }, //图表实例
    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: debounce(function () {
        //逻辑代码
        if(this.$refs.cloud){
          let chart = this.$echarts.init(this.$refs.cloud)
          chart.resize()
        }
      }, 300),
      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
        let timer = setInterval(() => {
          if(this.$refs.cloud && this.flag){
            this.flag = false
            console.log('this.data',this.data)
            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>

标签：vue,false,name,newValue,词云,cloud,data,echarts,Math
来源： https://www.cnblogs.com/myqinyh/p/16693067.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。