<template>
  <div class="wordCloud" :id="id" />
</template>

<script setup>
  import 'echarts-wordcloud'
  import { fitChartSize } from '@/utils/dataUtil'
  import { getHotWordApi } from '@/api/sentiment'
  import { useEchart } from '@/hooks/echart'

  const { id, setOption } = useEchart()
  const initChart = async () => {
    let res = await getHotWordApi()
    setOption({
      series: [
        {
          type: 'wordCloud',
          // 网格大小，各项之间间距
          gridSize: fitChartSize(50),
          // 形状 circle 圆，cardioid  心， diamond 菱形，
          // triangle-forward 、triangle 三角，star五角星
          shape: 'circle',
          // 字体大小范围
          sizeRange: [fitChartSize(14), fitChartSize(36)],
          // 文字旋转角度范围
          rotationRange: [0, 0],
          // 旋转步值
          rotationStep: 90,
          // 自定义图形
          // maskImage: maskImage,
          left: 'center',
          top: 'center',
          // 画布宽
          width: '100%',
          // 画布高
          height: '100%',
          // 是否渲染超出画布的文字
          drawOutOfBound: false,
          textStyle: {
            color: function () {
              const colors = ['#165DFF', '#6aca37', '#05a4b6', '#f93920', '#f0b114']
              return colors[parseInt(Math.random() * colors.length)]
            },
            padding: fitChartSize(10),
            backgroundColor: 'rgba(0,255,255,.2)'
          },
          data: res.data
        }
      ]
    })
  }
  onMounted(() => {
    initChart()
  })
</script>

<style scoped lang="scss">
  .wordCloud {
    width: 100%;
    height: 80%;
  }
</style>
