vue3项目中引入词云图

前言：

公司产品要求项目中使用词云图，我算是第一次用，于是在网上查找资料，最后做出来了。

先看效果图

步骤如下

npm i echarts-wordcloud -S

<template>
<div ref='wordcloudEcharts' style="width:100%;height:200px"></div>
</template>
<script setup>
import 'echarts-wordcloud'
import * as echarts from 'echarts'
import {ref,onMounted} from "vue"
const wordcloudEcharts =ref(null)
const myecharts = ref('')
//初始化配置
const initOption=()=>{
let wordCloudData= [
        { name: '快餐', value: 13 },
        { name: '酸菜鱼', value: 20 },
        { name: '充电宝', value: 11 },
        { name: '面包', value: 17 },
        { name: '炸鸡', value: 27 },
        { name: '牛杂', value: 47 },
        { name: '螺蛳粉', value: 53 },
        { name: '猪脚饭', value: 35 },
      ],

let option = {
        series: [
          {
            type: 'wordCloud',
            shape: 'circle',
            size: [1000, 600],
            textStyle: {
              fontFamily: 'TencentSans, Microsoft YaHei',
              fontSize: [10, 50],
              color:'#00E4BA',
            },
            data: wordCloudData,
            left: 'center',
            top: 'center',
            gridSize:15, //文字间隔
            drawOutOfBound: false,
            rotationRange: [0, 0],
            rotationStep: 45,
            rotationLimit: 0,
            animation: false,
            animationDuration: 1000,
            animationEasing: 'cubicInOut',
            animationDelay: (idx) => {
              return idx * 20;
            },
            animationDurationUpdate: 1000,
            animationEasingUpdate: 'cubicInOut',
            animationDelayUpdate: (idx) => {
              return idx * 20;
            },
          },
        ],
      };
     myecharts.value.setOption(option) 

}
//创建echarts实例
const initEcharts = ()=>{
myecharts.value = echarts.init(wordcloudEcharts.value)
initOption()
}

onMounted(()=>{
initEcharts()
})

</script>