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

<template>
  <div class="wrap-container sn-container" id="wordcloud">
    <div class="sn-content">
<!--      <div class="sn-title"></div>-->
      <div class="sn-body">
    <div class="wrap-container">
    <div class="chart" id="chart_right1"></div>
    </div>
      </div>
    </div>
  </div>
</template>

<script>
  import '@/assets/js/echarts-wordcloud.min'
  import screenfull from "screenfull";

  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 = {
        toolbox: {
          feature: {
            mytool: {
              show: true,
              title: "全屏",
              icon: 'path://M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z',
              onclick: function () {
                const element = document.getElementById('chart_right1');
                if (!screenfull.isEnabled) {//判断是否支持全屏
                  this.$message({
                    message: '您的浏览器暂时不支持全屏切换',
                    type: 'warning'
                  })
                  return false
                }
                screenfull.toggle(element)
              },
            }
          },
        },
        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,
            }
          },
          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>
.sn-container {
  width: 99%;
  height: 98.4%;
  .chart {
    height: 99%;
    width: 98.4%;
    //margin-top: 1%;
    //margin-right: 1%;
  }
}
</style>