<template>
  <div>
    <div>【关键词条】</div>
    <div ref="target" class="w-full h-full" style='width:300px;height:300px'></div>
  </div>
</template>

<script setup>
import { ref, onMounted,watch } from 'vue';
import * as echarts from "echarts";
import 'echarts-wordcloud'//需要安装 npm install echarts-wordcloud
// 1.初始化
let myChart = null;
const target = ref(null);
onMounted(() => {
  myChart = echarts.init(target.value);
  renderChart();
});
const randowRGB = () => {
  const r = Math.floor(Math.random() * 255)
  const g = Math.floor(Math.random() * 255)
  const b = Math.floor(Math.random() * 255)
  return `rgb(${r},${g},${b})`
}
// 2.构建 option 配置对象
const renderChart = () => {
  const options = {
    series: [
      {
        type: 'wordCloud',
        //数据中的值将映射到的文本大小范围。默认大小为最小12px，最大60px。
        sizeRange: [8, 46],
        //文本旋转范围和步进度。
        rotationRange: [0, 0],
        //以像素为单位的网格大小，用于标记画布的可用性
		  //网格尺寸越大，单词之间的间距越大。
        gridSize: 0,
        layoutAnimation: true,//渲染动画
        textStyle: { //文本颜色
          color:randowRGB
        },
        emphasis: { //高亮的效果
          textStyle: {
            fontWeight: 'bold',
            color:'#ffffff'
          }
        },
        //数据是一个数组。每个数组项必须具有名称和值属性。
        data:[
			  {
			    "value": 36,
			    "name": "企联网"
			  },
			  {
			    "value": 14,
			    "name": "智农通"
			  },
			  {
			    "value": 39,
			    "name": "OPPO"
			  },
			  {
			    "value": 38,
			    "name": "HONOR"
			  },
			  {
			    "value": 26,
			    "name": "红米"
			  },
			  {
			    "value": 44,
			    "name": "小米"
			  },
			  {
			    "value": 37,
			    "name": "美图"
			  },
			  {
			    "value": 39,
			    "name": "ONEPLUS"
			  },
			  {
			    "value": 12,
			    "name": "魅族"
			  },
			  {
			    "value": 32,
			    "name": "红手指"
			  },
			  {
			    "value": 34,
			    "name": "SAMSUNG"
			  },
			  {
			    "value": 11,
			    "name": "金立"
			  },
			  {
			    "value": 20,
			    "name": "BLACKBERRY"
			  },
			  {
			    "value": 22,
			    "name": "诺基亚"
			  },
			  {
			    "value": 13,
			    "name": "锤子"
			  },
			  {
			    "value": 27,
			    "name": "大疆"
			  },
			  {
			    "value": 14,
			    "name": "361"
			  },
			  {
			    "value": 25,
			    "name": "摩托罗拉"
			  },
			  {
			    "value": 30,
			    "name": "联想"
			  },
			  {
			    "value": 27,
			    "name": "玩家国度"
			  }
			]
	}
] 
  }
  // 3.通过实例.setOptions(option)
  myChart.setOption(options);
};
watch(() => data,renderChart)
</script>

<style lang="scss" scoped>

</style>