vue使用ecahrts词云图

最新推荐文章于 2024-06-14 16:11:00 发布
最新推荐文章于 2024-06-14 16:11:00 发布
阅读量3.7k 收藏 59
点赞数 14
分类专栏： JavaScript 数据可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38316655/article/details/116595572
版权

echarts词云图是echarts的一个扩展

https://echarts.apache.org/zh/download-extension.html


1.安装依赖

 npm install echarts

 npm install echarts-wordcloud


2.main.js引入

import echarts from 'echarts';
Vue.prototype.$echarts = echarts


3.在用到的组件中引入扩展

<script>
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min"; 

</script>

4.配置

<template>
  <div class="result">
      <el-tabs type="border-card" v-model="name">
        <el-tab-pane label="各省累计确诊" name="0">
          <div ref="chart1" style="width: 800px;height:600px;"></div>
        </el-tab-pane>
        <el-tab-pane label="各省现有确诊" name="1">
          <div ref="chart2" style="width: 800px;height:600px;" class="charts-two"></div>
        </el-tab-pane>
        <el-tab-pane label="各市累计确诊" name="2">
          <div ref="chart3" style="width: 800px;height:600px;"></div>
        </el-tab-pane>
        <el-tab-pane label="各市现有确诊" name="3">
          <div ref="chart4" style="width: 800px;height:600px;"></div>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>


// 词云图
<script>
import * as echarts from "echarts";
import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-wordcloud/dist/echarts-wordcloud.min";

export default {
  name: "VisitShow",
  data() {
    return {
      userVisitNum: [],
      date: [],
      goodVisitNum: [],
      goodsName: [],
      name: "0",
    };
  },
  mounted() {
    this.showEeharts();
  },

  methods: {
    showEeharts() {
      var chart1 = echarts.init(this.$refs.chart1);
      var chart2 = echarts.init(this.$refs.chart2);
      var chart3 = echarts.init(this.$refs.chart3);
      var chart4 = echarts.init(this.$refs.chart4);
      var data1 = [
         {'name': '香港', 'value': 11801},
         {'name': '台湾', 'value': 1178},
         {'name': '上海', 'value': 2006},
         {'name': '广东', 'value': 2365},
         {'name': '云南', 'value': 347},
         {'name': '四川', 'value': 992},
         {'name': '福建', 'value': 595},
         {'name': '浙江', 'value': 1345},
         {'name': '海南', 'value': 188},
         {'name': '江苏', 'value': 720},
         {'name': '天津', 'value': 387},
         {'name': '山西', 'value': 251},
         {'name': '广西', 'value': 275},
         {'name': '陕西', 'value': 592},
         {'name': '湖北', 'value': 38158},
         {'name': '重庆', 'value': 597},
         {'name': '内蒙古', 'value': 382},
         {'name': '湖南', 'value': 1045},
         {'name': '山东', 'value': 879},
         {'name': '北京', 'value': 1057},
         {'name': '河南', 'value': 1312},
         {'name': '甘肃', 'value': 193},
         {'name': '西藏', 'value': 1},
         {'name': '吉林', 'value': 573},
         {'name': '河北', 'value': 1317},
         {'name': '青海', 'value': 18},
         {'name': '澳门', 'value': 49},
         {'name': '新疆', 'value': 980},
         {'name': '辽宁', 'value': 408},
         {'name': '安徽', 'value': 994},
         {'name': '黑龙江', 'value': 1610},
         {'name': '贵州', 'value': 147},
         {'name': '江西', 'value': 937},
         {'name': '宁夏', 'value': 75}
      ]
      var data2 = [
         {'name': '香港', 'value': 118},
         {'name': '台湾', 'value': 89},
         {'name': '上海', 'value': 56},
         {'name': '广东', 'value': 51},
         {'name': '云南', 'value': 46},
         {'name': '四川', 'value': 30},
         {'name': '福建', 'value': 25},
         {'name': '浙江', 'value': 22},
         {'name': '海南', 'value': 17},
         {'name': '江苏', 'value': 8},
         {'name': '天津', 'value': 7},
         {'name': '山西', 'value': 7},
         {'name': '广西', 'value': 7},
         {'name': '陕西', 'value': 6},
         {'name': '湖北', 'value': 6},
         {'name': '重庆', 'value': 6},
         {'name': '内蒙古', 'value': 4},
         {'name': '湖南', 'value': 4},
         {'name': '山东', 'value': 3},
         {'name': '北京', 'value': 2},
         {'name': '河南', 'value': 1},
         {'name': '甘肃', 'value': 1},
         {'name': '西藏', 'value': 0},
         {'name': '吉林', 'value': 0},
         {'name': '河北', 'value': 0},
         {'name': '青海', 'value': 0},
         {'name': '澳门', 'value': 0},
         {'name': '新疆', 'value': 10},
         {'name': '辽宁', 'value': 0},
         {'name': '安徽', 'value': 0},
         {'name': '黑龙江', 'value': 0},
         {'name': '贵州', 'value': 0},
         {'name': '江西', 'value': 0},
         {'name': '宁夏', 'value': 0}
         ]
      var data3 = [
         {'name': '香港', 'value': 11801},
         {'name': '台湾', 'value': 1178},
         {'name': '上海', 'value': 2006},
         {'name': '广东', 'value': 2365},
         {'name': '云南', 'value': 347},
         {'name': '四川', 'value': 992},
         {'name': '福建', 'value': 595},
         {'name': '浙江', 'value': 1345},
         {'name': '海南', 'value': 188},
         {'name': '江苏', 'value': 720},
         {'name': '天津', 'value': 387},
         {'name': '山西', 'value': 251},
         {'name': '广西', 'value': 275},
         {'name': '陕西', 'value': 592},
         {'name': '湖北', 'value': 38158},
         {'name': '重庆', 'value': 597},
         {'name': '内蒙古', 'value': 382},
         {'name': '湖南', 'value': 1045},
         {'name': '山东', 'value': 879},
         {'name': '北京', 'value': 1057},
         {'name': '河南', 'value': 1312},
         {'name': '甘肃', 'value': 193},
         {'name': '西藏', 'value': 1},
         {'name': '吉林', 'value': 573},
         {'name': '河北', 'value': 1317},
         {'name': '青海', 'value': 18},
         {'name': '澳门', 'value': 49},
         {'name': '新疆', 'value': 980},
         {'name': '辽宁', 'value': 408},
         {'name': '安徽', 'value': 994},
         {'name': '黑龙江', 'value': 1610},
         {'name': '贵州', 'value': 147},
         {'name': '江西', 'value': 937},
         {'name': '宁夏', 'value': 75}
      ]
      var data4 = [
         {'name': '香港', 'value': 118},
         {'name': '台湾', 'value': 89},
         {'name': '上海', 'value': 56},
         {'name': '广东', 'value': 51},
         {'name': '云南', 'value': 46},
         {'name': '四川', 'value': 30},
         {'name': '福建', 'value': 25},
         {'name': '浙江', 'value': 22},
         {'name': '海南', 'value': 17},
         {'name': '江苏', 'value': 8},
         {'name': '天津', 'value': 7},
         {'name': '山西', 'value': 7},
         {'name': '广西', 'value': 7},
         {'name': '陕西', 'value': 6},
         {'name': '湖北', 'value': 6},
         {'name': '重庆', 'value': 6},
         {'name': '内蒙古', 'value': 4},
         {'name': '湖南', 'value': 4},
         {'name': '山东', 'value': 3},
         {'name': '北京', 'value': 2},
         {'name': '河南', 'value': 1},
         {'name': '甘肃', 'value': 1},
         {'name': '西藏', 'value': 0},
         {'name': '吉林', 'value': 0},
         {'name': '河北', 'value': 0},
         {'name': '青海', 'value': 0},
         {'name': '澳门', 'value': 0},
         {'name': '新疆', 'value': 10},
         {'name': '辽宁', 'value': 0},
         {'name': '安徽', 'value': 0},
         {'name': '黑龙江', 'value': 0},
         {'name': '贵州', 'value': 0},
         {'name': '江西', 'value': 0},
         {'name': '宁夏', 'value': 0}
         ]
			var chart1Option = {
          title: {
              text: '各省累计确诊-词云',//标题
              x: 'center',
              textStyle: {
                  fontSize: 23
              }

          },
          backgroundColor: '#fff', //F7F7F7
          tooltip: {
              show: true
          },
          series: [{
              name: '各省累计确诊',//数据提示窗标题
              type: 'wordCloud',
              sizeRange: [12, 64],//画布范围，如果设置太大会出现少词（溢出屏幕）
              rotationRange: [-45, 90],//数据翻转范围
              //shape: 'circle',
              textPadding: 0,
              autoSize: {
                  enable: true,
                  minSize: 6
              },
              textStyle: {
                  normal: {
                      color: function() {
                          return 'rgb(' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  emphasis: {
                      shadowBlur: 10,
                      shadowColor: '#333'
                  }
              },
              data: data1,
          }]
      };

      var chart2Option = {
          title: {
              text: '各省现有确诊-词云',//标题
              x: 'center',
              textStyle: {
                  fontSize: 23
              }

          },
          backgroundColor: '#fff',
          tooltip: {
              show: true
          },
          series: [{
              name: '各省现有确诊',//数据提示窗标题
              type: 'wordCloud',
              sizeRange: [12, 64],//画布范围，如果设置太大会出现少词（溢出屏幕）
              rotationRange: [-45, 90],//数据翻转范围
              //shape: 'circle',
              textPadding: 0,
              autoSize: {
                  enable: true,
                  minSize: 6
              },
              textStyle: {
                  normal: {
                      color: function() {
                          return 'rgb(' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  emphasis: {
                      shadowBlur: 10,
                      shadowColor: '#333'
                  }
              },
              data: data2,
          }]
      };
      var chart3Option = {
          title: {
              text: '各市累计确诊-词云',//标题
              x: 'center',
              textStyle: {
                  fontSize: 23
              }

          },
          backgroundColor: '#fff',
          tooltip: {
              show: true
          },
          series: [{
              name: '各市累计确诊',//数据提示窗标题
              type: 'wordCloud',
              sizeRange: [12, 64],//画布范围，如果设置太大会出现少词（溢出屏幕）
              rotationRange: [-45, 90],//数据翻转范围
              //shape: 'circle',
              textPadding: 0,
              autoSize: {
                  enable: true,
                  minSize: 6
              },
              textStyle: {
                  normal: {
                      color: function() {
                          console.log('rgb(' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(',') + ')')
                          return 'rgb(' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  emphasis: {
                      shadowBlur: 10,
                      shadowColor: '#333'
                  }
              },
              data: data3,
          }]
      };
      var chart4Option = {
          title: {
              text: '各市现有确诊-词云',//标题
              x: 'center',
              textStyle: {
                  fontSize: 23
              }

          },
          backgroundColor: '#fff',
          tooltip: {
              show: true
          },
          series: [{
              name: '各市现有确诊',//数据提示窗标题
              type: 'wordCloud',
              sizeRange: [12, 64],//画布范围，如果设置太大会出现少词（溢出屏幕）
              rotationRange: [-45, 90],//数据翻转范围
              //shape: 'circle',
              textPadding: 0,
              autoSize: {
                  enable: true,
                  minSize: 6
              },
              textStyle: {
                  normal: {
                      color: function() {
                          console.log('rgb(' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(',') + ')')
                          return 'rgb(' + [
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160),
                              Math.round(Math.random() * 160)
                          ].join(',') + ')';
                      }
                  },
                  emphasis: {
                      shadowBlur: 10,
                      shadowColor: '#333'
                  }
              },
              data: data4,
          }]
      };
      chart1.setOption(chart1Option);
      chart2.setOption(chart2Option);
      chart3.setOption(chart3Option);
      chart4.setOption(chart4Option);
    },
  },
};
</script>
<style lang="less">

</style>


5.完成图

 

Circle-C
关注
  • 14
    点赞
  • 踩
  • 59
    收藏
    觉得还不错? 一键收藏
  • 23
    评论
专栏目录
vue使用Echarts5实现词云图
qq_34082921的博客
11-08 801
词云图有些特殊，它属于Echarts 的扩展，需要额外安装Echarts-wordcloud包。
VueWordCloud：可视化词云构建利器
gitblog_00022的博客
04-27 720
VueWordCloud：可视化词云构建利器 项目地址:https://gitcode.com/SeregPie/VueWordCloud 项目简介 VueWordCloud 是一个基于 Vue.js 框架开发的可自定义词云生成器。它允许开发者在 Vue 项目中轻松集成动态、交互式的词云图，用于数据可视化的精彩呈现。 技术解析 VueWordCloud 是对 d3-cloud 的 Vue 封装，后...
Vue3--词云图
最新发布
m0_59246072的博客
06-14 225
2、在外部文件夹中创建vue文件（SonCloud.vue），写词云图基本配置。
vue使用echarts实现词云效果
weixin_42823060的博客
06-14 2199
vue echarts
vue词云组件
yemuxia_sinian的博客
04-15 2866
无需引入第三方库， 原文地址：sample-reels/index.vue at master · zhaowhY/sample-reels · GitHub 基于上面源码做了修改，可直接复制到组件中使用。 具体代码： <template> <div> <div class="wordCloud__tagBall" :style="{width:`${this.width}px`,height:`${this.height}px`}
vue3.0 中使用 echarts 的 echarts-wordcloud 插件开发词云图
m0_52611940的博客
12-20 1781
vue3.0 中使用 echarts 的 echarts-wordcloud 插件开发词云图
使用vue-wordcloud实现文字云/词云
热门推荐
西洲
01-07 1万+
1、下载 在项目里面，通过npm安装下载 npm install vue-wordcloud --save 2、使用demo <template> <div class="hello"> <div id="app"> <wordcloud :data="defaultWords" nameKey=...
vue中，echarts词云图的使用
weixin_66496801的博客
08-12 853
vue 中 echarts的词云图的使用
【JavaScript源代码】vue使用echarts词云图的实战记录.docx
12-29
vue使用echarts词云图的实战记录 　echarts词云图是echarts的一个扩展　https://echarts.apache.org/zh/download-extension.html　　1.安装依赖　npm install echarts　npm install echarts-wordcloud　2.main.js...
echarts 实现词云worldcloud效果demo(亲测有效，下载打开).zip
09-11
"WorldCloud"是ECharts中的一个插件，用于创建美观且动态的词云图，常用于展示文本数据的频率分布或重要性。 首先，让我们深入理解ECharts的核心概念： 1. **ECharts实例**：在JavaScript中，你需要通过`echarts....
echarts地图jason数据.7z
09-18
开发者可以将这些资源导入到Vue或React项目中，通过JavaScript代码调用ECharts API，结合JSON地图数据来创建动态、交互式的地图图表，同时也能生成词云图展示文本数据。对于需要进行数据可视化的Web开发者来说，这是...
基于vue3.0的大数据分析系统，包含各种echarts和vue3.0新API
05-28
- 词云图 - 漏斗图 - 水球图 - 折线图 - 仪表盘 - 雷达图 - 矩形树图 - 关系图 - 地图 --- 分布图 - 地图 --- 散点图 - 地图 --- 热力图 ``` ## 使用说明 ``` - 首页时间自动轮播，每次时间切换都会调接口，所有的...
一个基于vue3.0的大数据分析系统，包含各种echarts和vue3.0新API-Vue.js开发
05-27
vue3-bigData是一个可视化系统，基于vue3.0 和 echarts实现，使用vue的最新的技术栈，包括各种可视化图表。...- 词云图 - 漏斗图 - 水球图 - 折线图 - 仪表盘 - 雷达图 - 矩形树图 - 关系图 - 地图 --
vue项目中使用词云_vue项目中使用echarts实现词云
weixin_39637386的博客
12-22 702
0、先上效果图 1、安装插件 -- vue项目中npm install echartsnpm install echarts-wordcloud2、vue页面中引入组件id="echarts05":title="chartsTitle[4]":data="echarts05Data":width="width":height="height"/>3、创建组件--WordCloudChart....
vue3【echarts 做的词云图】
weixin_49066399的博客
09-21 761
vue3【echarts 做的词云图】
极致呈现系列之：Echarts词云图的数据共振
九仞山的专栏
06-24 590
详细介绍了词云图的特性及应用场景，通过一个实例演示了vue3中使用词云图的方法
vue中实现3d词云效果（已封装组件）
博客简介
03-10 1021
【代码】vue中实现3d词云效果（已封装组件）
vue页面引用echart的词云图
Lisa_Xiaotouzi的博客
04-27 1801
效果图 （1）安装依赖 npm install echarts npm install echarts-wordcloud （2）main.js加入 import echarts from 'echarts' Vue.prototype.$echarts = echarts （3）在新建的echar.vue页面中添加以下div和样式 div:绑定词云图的数据 &...
Echarts词云图
W_051的博客
04-08 2549
词云，又称文字云，英文名：Word Cloud。是文本数据的视觉表示形式。就是对指定范围文本中出现频率较高的“关键词”予以视觉上的突出表现，从而过滤掉大量的文本信息，形成“关键词云层”或“关键词渲染”，使浏览网页者只要一眼扫过文本就可以领略文本的主题宗旨。
vue的echarts词云图
10-07
vue的echarts词云图是echarts的一个扩展，可以通过安装echarts和echarts-wordcloud的依赖来实现。首先，你需要安装echarts和echarts-wordcloud的包，可以使用npm install echarts和npm install echarts-wordcloud...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 23
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值