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

2024-09-30 09:13:29

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词云图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解Vue2+Echarts实现多种图表数据可视化Dashboard（附源码）

数据可视化将数据通过图表的形式展现出来将大大的提升可读性和阅读效率本例包含柱状图.折线图.散点图.热力图.复杂柱状图.预览面板等技术栈 vue2.x vuex 存储公共变量,如色值等 vue-router 路由 element-ui 饿了么基于vue2开发组件库,本例使用了其中的datePicker echarts 一款丰富的图表库 webpack.ES6.Babel.Stylus... 项目截图开发组件化本项目完全采用组件化的思想进行开发.使用vue-router作为路由,每个页面
vue+echarts实现动态绘制图表及异步加载数据的方法

前言背景:vue写的后台管理,需要将表格数据绘制成图表(折线图,柱状图),图表数据都是通过接口请求回来的. 安装 cnpm install echarts --s (我这里用了淘宝镜像,不知道同学自行百度) 实例化在已有的项目中下载好了echarts 之后,可以打开官方文档,但是我觉得官方文档对于实例化介绍的不够清晰,这也是我为什么在这么多的文章中还要写的原因,前辈写的太模糊了,我决定好好给后来人,需要在项目中引用图表的人,一些实用,快捷的东西. 官方文档:http://echart
在vue中添加Echarts图表的基本使用教程

前言我们在项目中经常需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts,后来觉得这货不开源,只是做展示的话又点浪费时间,于是看了下eCharts,于是在vue-cli搭建的项目中添加了eCharts,下面是具体步骤和自己的一些学习笔记,参照于Echarts3官网现在的前端一般需要完成将大量的数据,实现可视化.现在是大数据和云计算的时代,所以数据可视化逐渐变成一种趋势.而ECharts和d3.js则是可视化的成熟框架.对于制作的图表可以说是满足你的创造力. 两者相比,D
vue在使用ECharts时的异步更新和数据加载详解

前言最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章:http://www.jb51.net/article/128790.htm 下面话不多说了,来一起看看详细的介绍吧. 使用方法使用Echarts首先得先把Echarts.js引进来(放在文件的入口html文件里面) <script src="public/js/echarts.common.min.js&quo
在Vue中使用echarts的实例代码（3种图）

前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图以下数据已做脱敏处理这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换
vue.js中使用echarts实现数据动态刷新功能

在vue使用echarts时,可能会遇到这样的问题,就是直接刷新浏览器,或者数据变化时,echarts不更新? 这是因为Echarts是数据驱动的,这意味着只要我们重新设置数据,那么图表就会随之重新渲染,这是实现本需求的基础.我们再设想一下, 如果想要支持数据的自动刷新,必然需要一个监听器能够实时监听到数据的变化然后告知Echarts重新设置数据. 所幸Vue为我们提供了==watcher==功能,通过它我们可以很方便的实现上述功能: watch:{ option:function(newval
Vue Echarts实现可视化世界地图代码实例

Echarts实现可视化世界地图模拟迁徙,以我自己开发过程. 下载Echarts依赖: npm install echarts 成功以后引入依赖: import echarts from 'echarts' peopleInsertCharts为生成echarts容器. let myChart = echarts.init(document.getElementById('peopleInsertCharts')) 容器一定要给宽高,否则echarts生成初始化页面不会显示.需要自适应的可以js
详解vue文件中使用echarts.js的两种方式

最近工作中需要用到echarts,由于项目是用的vue-cli开发的.在网上搜到vue中合成了vue-echarts,但是不想使用vue中规定好的数据格式,于是就自己做了一个vue项目引用原生echarts的简单demo,实现过程如下:用了两种实现方式准备工作 1.安装echarts依赖控制台输入:npm install echarts --save 2.全局引入 main.js中引入 import echarts from 'echarts' Vue.prototype.$echarts
使用Vue开发动态刷新Echarts组件的教程详解

需求背景:dashboard作为目前企业中后台产品的"门面",如何更加实时.高效.炫酷的对统计数据进行展示,是值得前端开发工程师和UI设计师共同思考的一个问题.今天就从0开始,封装一个动态渲染数据的Echarts折线图组件,抛砖引玉,一起来思考更多有意思的组件. 准备工作项目结构搭建因为生产需要(其实是懒),所以本教程使用了 ==vue-cli==进行了项目的基础结构搭建. npm install -g vue-cli vue init webpack vue-charts cd
基于vue+echarts 数据可视化大屏展示的方法示例

获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm

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

相关推荐

随机推荐