echart封装词云图

最新推荐文章于 2024-07-24 14:12:36 发布

清华小菜

最新推荐文章于 2024-07-24 14:12:36 发布

阅读量161

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/C90283/article/details/129592882

版权

本文介绍了如何使用Echarts库封装一个自定义的词云图组件，详细讲解了前端开发中JavaScript与Echarts结合的步骤，包括数据处理、Echart配置项设置等关键点。

摘要由CSDN通过智能技术生成

在这里插入图片描述
ps:忽略箭头

<template>
  <div :id="id" :style="{ width: width, height: height }" />
</template>

<script lang="ts" setup>
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";

interface dataInter{
   
  name: string,
  value: number,
}
interface Props{
   
    id?:string,
    cloudData?:dataInter[],
    width?:string,
    height?:string,
    color?:string[],
    textStyleColor?:string
  }
  const props = withDefaults(defineProps<Props>(),{
   
    id: "wordCloud",
    cloudData: () =&