<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>
echarts绘制 联系词(关键字)
于 2024-03-12 16:53:51 首次发布