echarts词云图（echarts版本 5.3.3）

<template>
  <div class="cont">

    <div ref="chart" :style="{width: '100%', height: '2.3rem'}"></div>

  </div>
</template>

<script>
import { getlargeScreen } from '@/service/index'
import wordcloud from 'echarts-wordcloud'
export default {
  components: {

  },
  props: {
    tabActive: {
      type: String,
      default: () => ''
    },
    realTimeData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {

      chartInstance: null,


      cockpitData: [
        {
          "unit": "个",
          "areaname": "沈阳",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "0"
        },
        {
          "unit": "个",
          "areaname": "大连",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "3"
        },
        {
          "unit": "个",
          "areaname": "鞍山",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "0"
        },
        {
          "unit": "个",
          "areaname": "抚顺",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "2"
        },
        {
          "unit": "个",
          "areaname": "本溪",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "3"
        },
        {
          "unit": "个",
          "areaname": "丹东",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "8"
        },
        {
          "unit": "个",
          "areaname": "锦州",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "1"
        },
        {
          "unit": "个",
          "areaname": "营口",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "4"
        },
        {
          "unit": "个",
          "areaname": "阜新",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "1"
        },
        {
          "unit": "个",
          "areaname": "辽阳",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "1"
        },
        {
          "unit": "个",
          "areaname": "盘锦",
          "time": "2021-08-30 15:38:00",
          "title": "各地市水源数",
          "value": "0"
        },
      ],
    }
  },
  watch: {
    tabActive(val) {
      console.log('值2', val);
      this.areacodel = val
      this.getlargeScreen()
    },
    deep: true
  },
  methods: {
    open() {
      // setTimeout(() => {
      //   this.drawLine()

      // }, 500);
      this.$nextTick(() => {
        //  执行echarts方法
        this.drawLine()

      })
    },

    //  图表初始化
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.statusChart = this.$echarts.init(this.$refs.chart)
      // 绘制图表
      this.statusChart.setOption({
        title: {
          text: '',
          x: 'center',
          textStyle: {
            fontSize: 23
          }

        },
        backgroundColor: '',
        tooltip: {
          show: false
        },
        toolbox: {
          feature: {

          }
        },
        series: [{
          name: '',
          type: 'wordCloud',
          //size: ['9%', '99%'],
          sizeRange: [6, 66],
          //textRotation: [0, 45, 90, -45],
          rotationRange: [-45, 90],
          //shape: 'circle',
          textPadding: 0,
          autoSize: {
            enable: true,
            minSize: 6
          },
          textStyle: {
            fontFamily: '微软雅黑',
            color: function () {
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 150),
                Math.round(Math.random() * 130)
              ].join(',') + ')';
            },

            emphasis: {
              shadowBlur: 20,
              shadowColor: '#333'
            }
          },
          data: this.cockpitData
        }]
      });

    },
    async getlargeScreen() {
      var sw = await getlargeScreen({
        areacodel: this.areacodel
      })
      console.log(2222222, sw);
      this.list = sw.result
    },

  },
  created() {
    this.$emit('changeCity', this.city)
    // this.getData1()
    this.getlargeScreen()
    let lists = [];
    for (let i = 0; i < this.cockpitData.length; i++) {
      let res = JSON.parse(
        JSON.stringify(this.cockpitData[i])
          .replace(/areaname/g, 'name')
      );
      lists.push(res);
    }
    console.log(111, lists)
    this.cockpitData = lists
  },
  mounted() {
    this.$nextTick(function () {
      this.drawLine()
    })
    //根据窗口变化自动调节图表大小


  },
  beforeDestroy() {
    // 页面组件销毁，移除echart自适应事件
    window.removeEventListener("resize", () => {
      this.chartInstance.resize()
    })
  }
}
</script>

<style lang="scss"  scoped>
//弹出层
</style>

词云图依赖

npm install echarts-wordcloud