vue使用echarts词云图的实战记录

2024-04-02 19:04:59 365人浏览薄情痞子

摘要

echarts词云图是echarts的一个扩展 https://echarts.apache.org/zh/download-extension.html 1.安装依赖 &nb

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.完成图

总结

到此这篇关于vue使用echarts词云图的文章就介绍到这了,更多相关vue echarts词云图内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: vue使用echarts词云图的实战记录

本文链接: https://www.lsjlt.com/news/125703.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

vue使用echarts词云图的实战记录

echarts词云图是echarts的一个扩展 https://echarts.apache.org/zh/download-extension.html 1.安装依赖 &nb...

99+

2024-04-02
vue+echarts图表使用的问题记录

前言 echarts是我最常用的一直图表工具，而且也是一个很完整的生态和内容，足够我们平常的使用了。最近在做一个大数据平台的页面，需要用到比较多的图表，就使用了echarts。使用过...

99+

2024-04-02
vue中使用词云图的实现示例

在vue中, 查找到有两种方法来实现词云图, 分别是echarts 和 highcharts Echarts: 注意,wordcloud对应的echarts版本有要求:echarts...

99+

2024-04-02
vue引入iconfont图标库的优雅实战记录

目录前言生成SVG svg sprites简介获取项目图标项目设置图标引用组件引用多主题支持配置多主题样式 Icon改造页面校验尾言前言本文撰写的初衷是为了向...

99+

2024-04-02
vue使用echarts实现折线图

本文实例为大家分享了vue使用echarts实现折线图的具体代码，供大家参考，具体内容如下效果图：代码： <template> <di...

99+

2024-04-02
vue中使用词云图的实现方法

这篇文章将为大家详细讲解有关vue中使用词云图的实现方法，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。在vue中, 查找到有两种方法来实现词云图, 分别是echarts 和 highchar...

99+

2023-06-29
Vue router应用问题实战记录

目录前言问题记录路由守卫的应用动态路由实现权限控制hash模式的路由参数被干扰跳转同组件路由，不刷新？总结前言本文记录vue2的vue-router在使用过程中遇到的一些问题。问...

99+

2024-04-02
vue使用ECharts实现折线图和饼图

在开发后台管理项目时，需要统计后台用户数据，以折线图和饼图的形式显示，这边采用apache-echarts来实现需求。 1.安装echarts和引入 npm install ec...

99+

2024-04-02
Go使用proto3的踩坑实战记录

开发环境：windows10，golang1.18.2，goland2022.2 最近在写项目时，一些数据类的结构以protobuf文件给定。因此，需要将这些protobuf文件转换...

99+

2023-02-13

go proto3 go使用proto3
vue3使用socket.io的踩坑实战记录

目录问题一：vue-socket.io与socket.io的区别一、socket.io二、vue-socket.io问题二：受同源策略的影响，怎样跨域总结我们的项目出现聊天室、客服等...

99+

2023-03-19

vue3 socket.io vue3使用socket.io
vue使用echarts实现立体柱形图

本文实例为大家分享了vue使用echarts实现立体柱形图的具体代码，供大家参考，具体内容如下立体柱形图是由前面、右面、上面三部分组成，绘制时需要先绘制前面为一个图形，右面和上面绘...

99+

2024-04-02
vue怎么使用echarts实现折线图

这篇文章主要讲解了“vue怎么使用echarts实现折线图”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue怎么使用echarts实现折线图”吧！效果图：代码：<template&g...

99+

2023-06-29
Vue使用Echarts实现立体柱状图

本文实例为大家分享了Vue使用Echarts实现立体柱状图的具体代码，供大家参考，具体内容如下预览：代码：页面部分: <template> <div ...

99+

2024-04-02
vue使用echarts实现地图的方法详解

目录全局安装echarts将echarts绑定在原型上(main.js文件中)准备画布地图配置option中国地图包（china.json）总结全局安装echarts npm i ...

99+

2024-04-02
Vue实战记录之登陆页面的实现

目录1 前期准备1.1 安装Node.js1.2 安装webpack1.3 安装vue-cli2 搭建Vue项目2.1 创建项目2.2 项目目录2.3 导入Element UI3 实...

99+

2024-04-02
Vue项目中如何运用vuex的实战记录

目录Vuex是什么？vuex使用周期图我的store目录实现一个vuex的示例总结Vuex 是什么？ TIP 👉 官网解释：Vuex 是一个专为 Vue.js 应用...

99+

2024-04-02
vue中怎么使用echarts和echarts-gl实现3D饼图环形饼图

今天小编给大家分享一下vue中怎么使用echarts和echarts-gl实现3D饼图环形饼图的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一...

99+

2023-07-05
SpringBoot+VUE实现前后端分离的实战记录

一，前端VUE项目这里使用VUE UI创建一个VUE项目命令行输入vue ui进入手动配置项目选中这三个点击下一步->点击创建项目用IDEA打开刚才创建的项目...

99+

2024-04-02
vue怎么使用echarts实现立体柱形图

今天小编给大家分享一下vue怎么使用echarts实现立体柱形图的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。立体柱形图是由...

99+

2023-06-29
一次在vue中使用post进行excel表下载的实战记录

目录一、一般大家下载excel都是使用get方法，直接点击下载二、vue用post下载excel表三、下面是具体的实现3.1 post的封装3.2 请求的方法3.3 download...

99+

2024-04-02