202012G07/echarts-screen/src/components/wordCloud.vue

<template>
  <div class="word-container"> 
    <div class="chart" id="chart_right1"></div>
  </div>
</template>

<script>
import '@/assets/js/echarts-wordcloud.min'

export default {
  name: "wordCloud",
  data() {
    return {
      timer: null
    }
  },
  mounted() {
    this.getEchartRight1();
    this.timer = setInterval(() => {
      this.getEchartRight1();
    }, 5000)
  },
  methods: {
    getEchartRight1() {
      let myChart = echarts.init(document.getElementById('chart_right1'));
      let option = {
        // tooltip: {
        //   show: false
        // },
        series: [{
          type: 'wordCloud',
          gridSize: 1,
          sizeRange: [12, 50],
          rotationRange: [-90, 90],
          rotationStep: 45,
          shape: 'diamond',
          width: '90%',
          textPadding: 0,
          autoSize: {
            enable: true,
            minSize: 6
          },
          textStyle: {
            normal: {
              textBorderColor: 'rgba(255,255,255,0.3)',
              textBorderWidth: 1,
              color: () => {
                return 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160)
                ].join(',') + ')';
              }
            },
            emphasis: {
              fontSize: 20,
              // shadowBlur: 10,
              // shadowColor: 'rgba(255,255,255, .1)'
            }
          },
          data: [{
            name: '钟南山',
            value: 810
          }, {
            name: '武汉',
            value: 520
          },{
            name: "隔离",
            value: 928
          },{
            name: "白衣天使",
            value: 906
          },{
            name: "健康码",
            value: 825
          },{
            name: "口罩",
            value: 514
          },{
            name: "火神山",
            value: 486
          },{
            name: "清零",
            value: 53
          },{
            name: "驰援",
            value: 927
          },{
            name: "方舱医院",
            value: 1308
          },{
            name: "一级响应",
            value: 693
          },{
            name: "休舱",
            value: 611
          },{
            name: "集中救治",
            value: 512
          },{
            name: "中国速度",
            value: 382
          },{
            name: "大国担当",
            value: 312
          },{
            name: "制造自信",
            value: 187
          },{
            name: "科学防治",
            value: 163
          },{
            name: "依法防控",
            value: 104
          },{
            name: "中国加油",
            value: 3
          },{
            name: "致敬",
            value: 31
          },{
            name: "最美逆行",
            value: 941
          },{
            name: "会师武汉",
            value: 585
          },{
            name: "战胜疫情",
            value: 473
          },{
            name: "捐赠",
            value: 358
          },{
            name: "共渡难关",
            value: 246
          },{
            name: "共抗疫情",
            value: 207
          },{
            name: "众志成城",
            value: 194
          },{
            name: "山河无恙",
            value: 104
          },{
            name: "守望相助",
            value: 87
          },{
            name: "大爱无疆",
            value: 415
          },{
            name: "隔离",
            value: 253
          },{
            name: "隔空喊话",
            value: 211
          },{
            name: "人类命运共同体",
            value: 116
          },{
            name: "人民战疫",
            value: 1309
          }]
        }]
      }

      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style lang="scss" scoped>
.word-container {
  .chart {
    height: 3rem;
  }
}
</style>