<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { fontSize } from '@/views/groupPage/util'
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',
          z: 0,
          bounding: 'all', // 决定此图形元素在定位时，对自身的包围盒计算方式
          style: {
            image: maskImage
          }
        },
        series: [
          {
            type: 'wordCloud',
            sizeRange: [12, 20], //词云的文字字号范围，默认是[12, 60]
            rotationRange: [0, 0],
            gridSize: 5, //词云中每个词的间距。
            shape: 'pentagon', //词云的形状 pentagon五边形
            width: '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: '智能安全脱落',
                value: 150
              },
              {
                name: '工程进度滞后',
                value: 13
              },
              {
                name: 'AI视频异常',
                value: 124
              },
              {
                name: '人员闯入',
                value: 231
              },
              {
                name: '工程进度滞后',
                value: 345
              },
              {
                name: 'PM2.5超标',
                value: 53
              },
              {
                name: 'PM10超标',
                value: 534
              },
              {
                name: '噪声超标',
                value: 342
              },
              {
                name: '智能安全脱落',
                value: 150
              },
              {
                name: '工程进度滞后',
                value: 13
              },
              {
                name: 'AI视频异常',
                value: 124
              },
              {
                name: '人员闯入',
                value: 231
              },
              {
                name: '工程进度滞后',
                value: 345
              },
              {
                name: 'PM2.5超标',
                value: 53
              },
              {
                name: 'PM10超标',
                value: 534
              },
              {
                name: '噪声超标',
                value: 342
              }
            ]
          }
        ]
      }
      maskImage.onload = function () {
        option.series[0].maskImage
        that.creatChart(option, that.$refs.chart)
      }
      maskImage.src = require('@/views/groupPage/images/模块图标/智慧预警/词云图.png')
    },
    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='scss' scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>