Newer
Older
CloudBrainNew / src / components / text / wordCloud / wordCloud.vue
StephanieGitHub on 4 Feb 2021 23 KB first commit
<!--
 * @Description: 词云
 * @Author: 王晓颖
 * @Date: 2020-08-17
 -->
<template>
  <div :id="id" :class="className" :style="{ height:curHeight,width:curWidth }" />
</template>

<script>
// import resize from './mixins/resize'
import 'echarts-wordcloud/dist/echarts-wordcloud'
import 'echarts-wordcloud/dist/echarts-wordcloud.min'

export default {
  name: 'WordCloud',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    data: {
      type: Array,
      default: () => { return [] }
    },
    title: {
      type: String,
      default: ''
    },
    shape: {
      type: String,
      default: 'circle'
    }
  },
  watch: {
    width (newVal, oldVal) {
      this.curWidth = newVal
      this.refreshEchart()
    },
    height (newVal, oldVal) {
      this.curHeight = newVal
      this.refreshEchart()
    },
    shape (newVal, oldVal) {
      this.refreshEchart()
    },
    data (newVal, oldVal) {
      this.option.series[0].data = newVal
      this.refreshEchart()
    }
  },
  data () {
    return {
      chart: null,
      curWidth: this.width, // 宽
      curHeight: this.height, // 高
      options: {
        title: {
          text: '', // 标题
          x: 'center',
          color: '#ffffff'
        },
        backgroundColor: 'transparent', // 背景颜色, 透明
        series: [
          {
            type: 'wordCloud',
            shape: 'circle', // circle, cardioid, diamond, triangle, triangle-forward
            gridSize: 20, // 用来调整词之间的距离
            sizeRange: [10, 30], // 用来调整字的大小范围
            rotationRange: [0, 0], // 字体旋转的角度,[-45, 0, 45, 90],[[ 0,90]]
            textStyle: {
              normal: {
                color: function () {
                  return 'rgb(' + [
                    // Math.round(Math.random() * 255),
                    // Math.round(Math.random() * 255),
                    // Math.round(Math.random() * 255)
                    255, 255, 255
                  ].join(',') + ')' // 字体的随机颜色
                }
              },
              emphasis: {// 鼠标移入的特效样式
                shadowBlur: 10,
                shadowColor: '#b8b8b8'
              }
            },
            // 位置相关设置
            // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
            // Default to be put in the center and has 75% x 80% size.
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            width: '100%',
            height: '100%',
            data: this.data // 数据
          }
        ]
      },
      shapeList: ['circle', 'cardioid', 'diamond', 'triangle', 'triangle-forward'],
      images: {
        'circle': 'data:image/png;base64,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',
        'heart': 'data:image/png;base64,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',
        'bird': 'data:image/png;base64,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'
      }
    }
  },
  mounted () {
    this.initChart()
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      // 处理标题
      if (this.title) {
        this.options.title.text = this.title
      }
      // 有图片
      if (this.shape) {
        if (this.shapeList.indexOf(this.shape)) {
          this.options.shape = this.shape
          this.setEchart()
        } else {
          const image = this.images[this.shape]
          const maskImage = new Image()
          maskImage.src = image
          this.options.maskImage = maskImage
          maskImage.onload = () => {
            this.setEchart()
          }
        }
      } else {
        this.setEchart()
      }
    },
    setEchart () {
      setTimeout(() => {
        const _div = document.getElementById(this.id)
        this.chart = this.$echarts.init(_div)
        this.chart.setOption(this.options)
      }, 500)
    },
    refreshEchart () {
      if (this.curWidth && this.curHeight && this.data.length > 0) {
        this.initEchart()
      }
    }
  }
}
</script>
<style lang='scss' scoped>
  .chartsClass {
    padding-left: 1.2rem;
  }
</style>