vue 实现词云图

最新推荐文章于 2024-12-01 16:05:17 发布

勿扰丶

最新推荐文章于 2024-12-01 16:05:17 发布

阅读量3.2k

点赞数 4

文章标签： echarts vue.js

本文链接：https://blog.csdn.net/weixin_46063007/article/details/120655150

版权

vue 实现词云图

准备工作：

echarts-wordcloud的git仓库地址
https://github.com/ecomfe/echarts-wordcloud
echarts官方文档
https://echarts.apache.org/zh/index.html
依赖版本号
“echarts”: “^5.0.1”,
“echarts-wordcloud”: “^2.0.0”,
版本号可以根据echarts-wordcloud依赖里面的版本号找到对应echarts的版本，否则很容易出现问题，echarts-wordcloud2.0 中使用textStyle 不可以加nomal 可以在上面的仓库里面看官方示例。

贴上完整代码

// 封装成组件
<template>
  <div>
    <div id="chart" style="width: 500px; height: 400px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-wordcloud";
// import "echarts-wordcloud/dist/echarts-wordcloud.min";
export default {
   
  data() {
   
    return {
   
      wordList: [
        {
   
          name: "珍珠奶茶",
          value: 15000,
        },
        {
   
          name: "冰激凌红茶",
          value: 10081,
        },
        {
   
          name: "椰果奶茶",
          value: 9386,
        },
        {