<template>
  <div class="product-type-word-clould">
    <custom-echart-word-cloud :chart-data="chartsData.valData" height="100%" :option="chartsData.option" />
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';

const chartsData = reactive({
  option: {
    backgroundColor: 'transparent',
    tooltip: {
      show: true,
      textStyle: {
        fontSize: '16',
        color: '#3c3c3c',
      },
      backgroundColor: '#fff',
      borderColor: '#ddd',
      borderWidth: 1,
    },
    series: [],
  },
  valData: [
    {
      type: 'wordCloud',
      // 网格大小，各项之间间距
      gridSize: 22,
      // 形状 circle 圆，cardioid  心， diamond 菱形，
      // triangle-forward 、triangle 三角，star五角星
      shape: 'circle',
      // 字体大小范围
      sizeRange: [10, 30],
      // 文字旋转角度范围
      rotationRange: [0, 0],
      // 旋转步值
      rotationStep: 90,
      // 自定义图形
      // maskImage: maskImage,
      left: 'center',
      top: 'center',
      right: null,
      bottom: null,
      // 画布宽
      width: '90%',
      // 画布高
      height: '90%',
      // 是否渲染超出画布的文字
      drawOutOfBound: false,
      textStyle: {
        color: function () {
          const colors = ['#165DFF', '#6aca37', '#05a4b6', '#f93920', '#f0b114', '#ab1489', '#149cab', '#ab1414', '#27b30f', '#7e11b3', '#11b32e'];
          return colors[parseInt(Math.random() * colors.length)];
        },
        emphasis: {
          shadowBlur: 10,
          shadowColor: '#2ac',
        },
      },
      data: [
        { value: 11.7392043070835, name: '有机白菜' },
        { value: 9.23723855786, name: '土鸡蛋' },
        { value: 7.75434839431, name: '猪肉' },
        { value: 11.3865516372, name: '牛肉' },
        { value: 7.75434839431, name: '零添加' },
        { value: 5.83541244308, name: '原产地' },
        { value: 15.83541244308, name: '菠萝' },
        { value: 2.83541244308, name: '甘蔗' },
        { value: 5.83541244308, name: '土豆' },
        { value: 10.83541244308, name: '绿色' },
        { value: 5.83541244308, name: '美味' },
        { value: 5.83541244308, name: '特产' },
      ],
    },
  ],
});

onMounted(() => {
  if (chartsData.valData && chartsData.valData.length) {
    chartsData.valData.forEach((m, index) => {
      let num = 100;
      m.value = (Number(m.value) + Math.random() + num).toFixed(2);
    });
  }
});
</script>
<style lang="scss" scoped>
.product-type-word-clould {
  height: 100%;
}
</style>
