<template>
  <m-card title="重点工作">
    <!-- <div id="cloud" class="box"></div> -->
    <img src="@/assets/images/key-task.png" />
  </m-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

export default defineComponent({
  name: 'KeyTask',
  setup() {
    console.log(echarts)
    setTimeout(() => {
      init()
      console.log(document.getElementById('cloud'))
    }, 1000)

    const init = () => {
      const cloudCharts = echarts.init(document.getElementById('cloud'))
      //说明
      //项目需要echarts-wordcloud.min.js
      /*      itemStyle: {
                    normal: {
                        opacity: .2 //自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
                    }
                },*/
      //1、自己项目中上面的属性设置0全透明。
      //2、然后在页面上写一个div样式背景，加载一个美化过的云图片。
      //3、重合放在这个图表下面。-----绝对定位浮动等等方式
      //4、最后的效果就是进来时头像效果。
      //必须是全黑背景，echarts-wordcloud按背景渲染必须是黑色背景图
      //必须是全黑背景，echarts-wordcloud按背景渲染必须是黑色背景图
      const symbolUrl = ''
      const colorList = [
        '#3a96f5',
        '#5faaf7',
        '#78bafe',
        '#1563f2',
        '#add2f8',
        '#e24bf4',
        '#1acaff',
        '#ffde00',
        '#89fda5',
      ]
      const presents = [
        '明厨亮灶',
        '民宿群租',
        '垃圾分类',
        '小型工程纳管',
        '非机动车停放',
        '马桶改造',
        '电梯加装',
        '居改非',
        '无证无照整治',
      ]

      const data = []
      for (var i = 0; i < presents.length; ++i) {
        data.push({
          name: presents[i],
          value: (presents.length - i) * 20,
        })
      }
      for (var i = 10; i < presents.length; ++i) {
        const cnt = Math.floor(Math.random() * 10)
        for (let j = 0; j < cnt; ++j) {
          data.push({
            name: presents[i],
            value: Math.random() * 10,
          })
        }
      }
      // const maskImage = new Image()
      // maskImage.src = symbolUrl
      const option = {
        backgroundColor: '#0A2E5D',
        tooltip: {
          show: true,
        },
        grid: {
          left: 0,
          bottom: 0,
          top: 0,
          right: 0,
        },
        xAxis: {
          type: 'category',
          show: false,
        },
        yAxis: {
          max: 100,
          show: false,
        },
        series: [
          {
            zlevel: -1,
            type: 'pictorialBar',
            name: 'pictorial',
            silent: true,
            symbol: 'image://' + symbolUrl, //按背景渲染云词
            symbolSize: ['45.2%', '35.2%'],
            symbolPosition: 'center',
            barWidth: '100%',
            barMaxWidth: '100%',
            itemStyle: {
              normal: {
                opacity: 0, //自己项目中这里可以设置0全透明，然后可以写一个div背景加载一个美化过的云图片，重合放在这个图表下面。
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
          {
            type: 'wordCloud',
            sizeRange: [15, 15],
            rotationRange: [0, 0],
            maskImage: cloudCharts,
            textPadding: 0,
            gridSize: 24, //用于标记画布可用性的网格大小（以像素为单位）//字距越大，字距越大。
            width: '45%',
            height: '35%',
            left: 'center',
            top: 'center',
            drawOutOfBound: false,
            textStyle: {
              normal: {
                fontFamily: 'sans-serif',
                color: function () {
                  const index = Math.floor(Math.random() * colorList.length)
                  return colorList[index]
                },
              },
            },
            data: data,
          },
        ],
      }

      cloudCharts.setOption(option)
    }
  },
})
</script>

<style lang="stylus" scoped>
.box
  height 95%
  width 100%
  border 1px solid red
  background #000
</style>
