<!-- 词云图 -->
<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
// import { fontSize } from '@/views/groupPage/util'
// import imgages from '../image/词云图.png'
import imgages from '../../../assets/images/词云图.png'
export default {
  name: 'ComWordCloudChart', //热词云图
  props: {
    chartData: {},
    title: {}
  },
  data() {
    return { myChart: null }
  },
  watch: {
    chartData(val) {
      this.$nextTick(() => {
        this.initialChart()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initialChart()
    })
    //图表大小自适应
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    destroyChart() {
      if (this.myChart != null) {
        this.myChart.dispose()
        this.myChart = null
      }
    },
    onResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    initialChart() {
      var maskImage = new Image()
      let that = this
      let option = {
        tooltip: {
          borderWidth: 0,
          textStyle: {
            color: '#fff'
          },
          backgroundColor: 'rgba(50,50,50,0.7)',
          confine: true
        },
        graphic: {
          type: 'image',
          // right: 'center',
          // bottom: 'middle',
          left: 'center',
          top: 'center',
          z: 0,
          bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
          style: {
            image: maskImage,
            heght: 300,
            width: 260,
          }
        },
        series: [
          {
            type: 'wordCloud',
            sizeRange: [15, 25], //词云的文字字号范围，默认是[12, 60]
            rotationRange: [0, 0],
            gridSize: 10, //词云中每个词的间距。
            shape: 'pentagon', //词云的形状 pentagon五边形
            width: '100%',
            height: '100%',
            maskImage: maskImage,
            drawOutOfBound: false,
            layoutAnimation: true,
            keepAspect: true,
            textStyle: {
              fontWeight: 'bold',
              color: function () {
                return (
                  'rgb(' +
                  [
                    Math.round(Math.random() * 200) + 50,
                    Math.round(Math.random() * 150),
                    Math.round(Math.random() * 50) + 50
                  ].join(',') +
                  ')'
                )
              }
            },
            emphasis: {
              textStyle: {
                color: '#528'
              }
            },
            data: [
              {
                name: '冰川泥石流（3）',
                value: 3
              },
              {
                name: '崩塌（1）',
                value: 1
              },
              {
                name: '潜在失稳块体（5）',
                value: 5
              },
              {
                name: '泥石流（3）',
                value: 3
              },
              {
                name: '滑坡（1）',
                value: 345
              },
              {
                name: '雪崩（2）',
                value: 2
              },
              {
                name: '冰湖（3）',
                value: 3
              },
            ]
          }
        ]
      }
      maskImage.onload = function () {
        option.series[0].maskImage
        that.creatChart(option, that.$refs.chart)
      }
      maskImage.src = imgages
    },
    creatChart(option, ref) {
      this.myChart = echarts.init(ref) //this.$refs.chart
      this.myChart.resize()
      this.myChart.setOption(option, {
        notMerge: true
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
    this.destroyChart()
  }
}
</script>

<style lang='less' scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>