<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>