vue使用ecahrts词云图

最新推荐文章于 2024-10-16 10:57:41 发布
最新推荐文章于 2024-10-16 10:57:41 发布
阅读量3.7k 收藏 60
点赞数 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
关注
专栏目录
vue页面引用echart的词云图
Lisa_Xiaotouzi的博客
04-27 1840
效果图 （1）安装依赖 npm install echarts npm install echarts-wordcloud （2）main.js加入 import echarts from 'echarts' Vue.prototype.$echarts = echarts （3）在新建的echar.vue页面中添加以下div和样式 div:绑定词云图的数据 &...
【vue项目使用echarts词云图】
weixin_46902217的博客
04-06 2847
注意Echarts5.0的版本要对应echarts-wordcloud的2.0版本，注意Echarts4.0的版本要对应echarts-wordcloud的1.0版本，版本不对应可能会出现报错或者不显示的问题。 第一步npm安装词云包（echarts官网没有可能的上github找） npm install echarts-wordcloud 第二步引入词云图文件 import "echarts-wordcloud/dist/echarts-wordcloud" 第三步使用 sho
vue3 + echarts-wordcloud（详细配置） 绘制词云图
qq_40912618的博客
12-29 6150
词云图，是一种文本数据的视觉展示，由词汇组成类似云的彩色图形。echarts-wordcloud是基于echarts的一个词云库，本篇主要介绍它的使用方法。
vue3 + echarts-wordcloud 绘制词云图表
最新发布
阿乐的博客
10-16 743
首先要找到一张图片，为了成功率较高，一定要是。
vue使用Echarts5实现词云图
qq_34082921的博客
11-08 977
词云图有些特殊，它属于Echarts 的扩展，需要额外安装Echarts-wordcloud包。
vue项目中使用echarts做词云图
小小•愿望的博客
08-21 3905
vue项目中使用echarts做词云图
【JavaScript源代码】vue使用echarts词云图的实战记录.docx
12-29
本文将详细介绍如何在Vue项目中集成ECharts词云图，并通过实战案例进行演示。 #### 二、准备工作 在开始之前，请确保已经具备以下环境： 1. **Node.js**：最新稳定版本。 2. **Vue CLI**：用于快速构建Vue项目。 ...
Vue引入Echarts词云图实现数据可视化（实现源码+案例）
weixin_45745641的博客
10-06 1918
词云图实现数据可视化Echarts利用echarts-wordcloud实现安装依赖页面引入使用效果其他样式v-charts实现 Echarts利用echarts-wordcloud实现 安装依赖 npm install echarts-wordcloud -S 页面引入使用 很简单，直接给大家上案例源码 <template> <div id="container"/> </template> <script> import 'echarts-word
极致呈现系列之：Echarts词云图的数据共振
九仞山的专栏
06-24 647
详细介绍了词云图的特性及应用场景，通过一个实例演示了vue3中使用词云图的方法
vue的echarts词云图
10-07
vue的echarts词云图是echarts的一个扩展，可以通过安装echarts和echarts-wordcloud的依赖来实现。首先，你需要安装echarts和echarts-wordcloud的包，可以使用npm install echarts和npm install echarts-wordcloud...
Vue使用echarts-wordcloud生成词云
孔彬的技术专栏
10-17 2万+
介绍 Echarts词云控件，可方便的对词组进行可视化的显示。 源码工程地址：WordCloud 安装 npm install echarts npm install echarts-wordcloud 使用方式 let echarts = require('echarts/lib/echarts') require('echarts-wordcloud'); import 'echarts/t...
Vue3 + Echarts 实现词云图
Lyrelion的博客
04-19 6577
Vue3 + Echarts 实现词云图
vue中，echarts词云图的使用
weixin_66496801的博客
08-12 916
vue 中 echarts的词云图的使用
vue中使用echarts词云
热门推荐
xy405580364的博客
11-10 7万+
1. 安装 cnpm install echarts-wordcloud 2. 创建模板组件 WordCloudChart <template> <div :id="id" :style="{ height:height,width:width }" /> </template> <script> import echarts from "echarts/lib/echarts"; import resize from "@/m
Vue项目 使用echarts实现词云图
小猫爪子
07-19 1358
配置依赖 未安装淘宝镜像 npm install echarts-wordcloud --save 安装淘宝镜像 cnpm install echarts-wordcloud --save 默认加载的是最新版本依赖"echarts-wordcloud": "^2.0.0"，需要echarts更新到 5.0.1+ 的版本。我一开始使用了4.9.0版本的echarts，报错：...createTextStyle is not a function，所以版本不匹配需要进行更改。 方法一：更新echar
vue3 echarts词云图代码
09-24
对于Vue3中使用echarts词云图的代码，您可以按照以下步骤进行操作： 1. 首先，确保您已经安装了echarts和echarts-wordcloud这两个依赖包。您可以使用以下命令进行安装： ```shell npm install echarts echarts-...
鲜活数据的艺术：使用Vue和ECharts绘制交互式词云图的完整指南
前端驰骋，技艺飞升，奇遇尽在其中！
12-16 1456
本文将向您展示如何在Vue.js项目中整合ECharts图表库，以创造令人惊艳的交互式词云图！
【vue】【javascript】【echarts】实现词云图
weixin_47351913的博客
07-26 493
ECharts 是一个由百度开发的强大的图表库，它可以生成多种类型的图表，包括词云图。要使用 ECharts 绘制词云图，你需要首先引入 ECharts 的核心库以及词云图的扩展库 echarts-wordcloud。
vue中使用词云图
qq_37146616的博客
01-25 6823
在vue中, 查找到有两种方法来实现词云图, 分别是echarts 和 highcharts ** Echarts: ** 注意,wordcloud对应的echarts版本有要求: echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts@4 需要下载echartsjs 和 wordcloud, 全局注册引用echarts npm install echarts@5 npm install echarts-wordc
评论 23
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值