Practical record of vue using echarts word cloud chart

Practical record of vue using echarts word cloud chart

echarts word cloud is an extension of echarts

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

1. Install dependencies

 npm install echarts
 
 npm install echarts-wordcloud

2. Import main.js

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

3. Introduce extensions in the components used

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

4. Configuration

<template>
  <div class="result">
      <el-tabs type="border-card" v-model="name">
        <el-tab-pane label="Accumulated confirmed cases in each province" name="0">
          <div ref="chart1" style="width: 800px;height:600px;"></div>
        </el-tab-pane>
        <el-tab-pane label="Confirmed cases in each province" name="1">
          <div ref="chart2" style="width: 800px;height:600px;" class="charts-two"></div>
        </el-tab-pane>
        <el-tab-pane label="Accumulated confirmed cases in each city" name="2">
          <div ref="chart3" style="width: 800px;height:600px;"></div>
        </el-tab-pane>
        <el-tab-pane label="Current confirmed cases in each city" name="3">
          <div ref="chart4" style="width: 800px;height:600px;"></div>
        </el-tab-pane>
      </el-tabs>
  </div>
</template>
 
 
// Word cloud chart <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': 'Hong Kong', 'value': 11801},
         {'name': 'Taiwan', 'value': 1178},
         {'name': 'Shanghai', 'value': 2006},
         {'name': 'Guangdong', 'value': 2365},
         {'name': 'Yunnan', 'value': 347},
         {'name': 'Sichuan', 'value': 992},
         {'name': 'Fujian', 'value': 595},
         {'name': 'Zhejiang', 'value': 1345},
         {'name': 'Hainan', 'value': 188},
         {'name': 'Jiangsu', 'value': 720},
         {'name': 'Tianjin', 'value': 387},
         {'name': 'Shanxi', 'value': 251},
         {'name': 'Guangxi', 'value': 275},
         {'name': 'Shaanxi', 'value': 592},
         {'name': 'Hubei', 'value': 38158},
         {'name': 'Chongqing', 'value': 597},
         {'name': 'Inner Mongolia', 'value': 382},
         {'name': 'Hunan', 'value': 1045},
         {'name': 'Shandong', 'value': 879},
         {'name': 'Beijing', 'value': 1057},
         {'name': 'Henan', 'value': 1312},
         {'name': 'Gansu', 'value': 193},
         {'name': 'Tibet', 'value': 1},
         {'name': 'Jilin', 'value': 573},
         {'name': 'Hebei', 'value': 1317},
         {'name': 'Qinghai', 'value': 18},
         {'name': 'Macao', 'value': 49},
         {'name': 'Xinjiang', 'value': 980},
         {'name': 'Liaoning', 'value': 408},
         {'name': 'Anhui', 'value': 994},
         {'name': 'Heilongjiang', 'value': 1610},
         {'name': 'Guizhou', 'value': 147},
         {'name': 'Jiangxi', 'value': 937},
         {'name': 'Ningxia', 'value': 75}
      ]
      var data2 = [
         {'name': 'Hong Kong', 'value': 118},
         {'name': 'Taiwan', 'value': 89},
         {'name': 'Shanghai', 'value': 56},
         {'name': 'Guangdong', 'value': 51},
         {'name': 'Yunnan', 'value': 46},
         {'name': 'Sichuan', 'value': 30},
         {'name': 'Fujian', 'value': 25},
         {'name': 'Zhejiang', 'value': 22},
         {'name': 'Hainan', 'value': 17},
         {'name': 'Jiangsu', 'value': 8},
         {'name': 'Tianjin', 'value': 7},
         {'name': 'Shanxi', 'value': 7},
         {'name': 'Guangxi', 'value': 7},
         {'name': 'Shaanxi', 'value': 6},
         {'name': 'Hubei', 'value': 6},
         {'name': 'Chongqing', 'value': 6},
         {'name': 'Inner Mongolia', 'value': 4},
         {'name': 'Hunan', 'value': 4},
         {'name': 'Shandong', 'value': 3},
         {'name': 'Beijing', 'value': 2},
         {'name': 'Henan', 'value': 1},
         {'name': 'Gansu', 'value': 1},
         {'name': 'Tibet', 'value': 0},
         {'name': 'Jilin', 'value': 0},
         {'name': 'Hebei', 'value': 0},
         {'name': 'Qinghai', 'value': 0},
         {'name': 'Macao', 'value': 0},
         {'name': 'Xinjiang', 'value': 10},
         {'name': 'Liaoning', 'value': 0},
         {'name': 'Anhui', 'value': 0},
         {'name': 'Heilongjiang', 'value': 0},
         {'name': 'Guizhou', 'value': 0},
         {'name': 'Jiangxi', 'value': 0},
         {'name': 'Ningxia', 'value': 0}
         ]
      var data3 = [
         {'name': 'Hong Kong', 'value': 11801},
         {'name': 'Taiwan', 'value': 1178},
         {'name': 'Shanghai', 'value': 2006},
         {'name': 'Guangdong', 'value': 2365},
         {'name': 'Yunnan', 'value': 347},
         {'name': 'Sichuan', 'value': 992},
         {'name': 'Fujian', 'value': 595},
         {'name': 'Zhejiang', 'value': 1345},
         {'name': 'Hainan', 'value': 188},
         {'name': 'Jiangsu', 'value': 720},
         {'name': 'Tianjin', 'value': 387},
         {'name': 'Shanxi', 'value': 251},
         {'name': 'Guangxi', 'value': 275},
         {'name': 'Shaanxi', 'value': 592},
         {'name': 'Hubei', 'value': 38158},
         {'name': 'Chongqing', 'value': 597},
         {'name': 'Inner Mongolia', 'value': 382},
         {'name': 'Hunan', 'value': 1045},
         {'name': 'Shandong', 'value': 879},
         {'name': 'Beijing', 'value': 1057},
         {'name': 'Henan', 'value': 1312},
         {'name': 'Gansu', 'value': 193},
         {'name': 'Tibet', 'value': 1},
         {'name': 'Jilin', 'value': 573},
         {'name': 'Hebei', 'value': 1317},
         {'name': 'Qinghai', 'value': 18},
         {'name': 'Macao', 'value': 49},
         {'name': 'Xinjiang', 'value': 980},
         {'name': 'Liaoning', 'value': 408},
         {'name': 'Anhui', 'value': 994},
         {'name': 'Heilongjiang', 'value': 1610},
         {'name': 'Guizhou', 'value': 147},
         {'name': 'Jiangxi', 'value': 937},
         {'name': 'Ningxia', 'value': 75}
      ]
      var data4 = [
         {'name': 'Hong Kong', 'value': 118},
         {'name': 'Taiwan', 'value': 89},
         {'name': 'Shanghai', 'value': 56},
         {'name': 'Guangdong', 'value': 51},
         {'name': 'Yunnan', 'value': 46},
         {'name': 'Sichuan', 'value': 30},
         {'name': 'Fujian', 'value': 25},
         {'name': 'Zhejiang', 'value': 22},
         {'name': 'Hainan', 'value': 17},
         {'name': 'Jiangsu', 'value': 8},
         {'name': 'Tianjin', 'value': 7},
         {'name': 'Shanxi', 'value': 7},
         {'name': 'Guangxi', 'value': 7},
         {'name': 'Shaanxi', 'value': 6},
         {'name': 'Hubei', 'value': 6},
         {'name': 'Chongqing', 'value': 6},
         {'name': 'Inner Mongolia', 'value': 4},
         {'name': 'Hunan', 'value': 4},
         {'name': 'Shandong', 'value': 3},
         {'name': 'Beijing', 'value': 2},
         {'name': 'Henan', 'value': 1},
         {'name': 'Gansu', 'value': 1},
         {'name': 'Tibet', 'value': 0},
         {'name': 'Jilin', 'value': 0},
         {'name': 'Hebei', 'value': 0},
         {'name': 'Qinghai', 'value': 0},
         {'name': 'Macao', 'value': 0},
         {'name': 'Xinjiang', 'value': 10},
         {'name': 'Liaoning', 'value': 0},
         {'name': 'Anhui', 'value': 0},
         {'name': 'Heilongjiang', 'value': 0},
         {'name': 'Guizhou', 'value': 0},
         {'name': 'Jiangxi', 'value': 0},
         {'name': 'Ningxia', 'value': 0}
         ]
			var chart1Option = {
          title:
              text: 'Accumulated confirmed cases in each province - word cloud', //Title x: 'center',
              textStyle: {
                  fontSize: 23
              }
 
          },
          backgroundColor: '#fff', //F7F7F7
          tooltip: {
              show: true
          },
          series: [{
              name: 'Accumulated confirmed cases in each province', //Data prompt window title type: 'wordCloud',
              sizeRange: [12, 64], //Canvas range. If the setting is too large, there will be fewer words (overflowing the screen)
              rotationRange: [-45, 90], //Data flip range //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: 'Confirmed cases in each province - word cloud', //Title x: 'center',
              textStyle: {
                  fontSize: 23
              }
 
          },
          backgroundColor: '#fff',
          tooltip: {
              show: true
          },
          series: [{
              name: 'Confirmed cases in each province', //Data prompt window title type: 'wordCloud',
              sizeRange: [12, 64], //Canvas range. If the setting is too large, there will be fewer words (overflowing the screen)
              rotationRange: [-45, 90], //Data flip range //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: 'Accumulated confirmed cases in each city - word cloud', //Title x: 'center',
              textStyle: {
                  fontSize: 23
              }
 
          },
          backgroundColor: '#fff',
          tooltip: {
              show: true
          },
          series: [{
              name: 'Accumulated confirmed cases in each city', //Data prompt window title type: 'wordCloud',
              sizeRange: [12, 64], //Canvas range. If the setting is too large, there will be fewer words (overflowing the screen)
              rotationRange: [-45, 90], //Data flip range //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: 'Current confirmed cases in each city - word cloud', //Title x: 'center',
              textStyle: {
                  fontSize: 23
              }
 
          },
          backgroundColor: '#fff',
          tooltip: {
              show: true
          },
          series: [{
              name: 'Confirmed cases in each city', //Data prompt window title type: 'wordCloud',
              sizeRange: [12, 64], //Canvas range. If the setting is too large, there will be fewer words (overflowing the screen)
              rotationRange: [-45, 90], //Data flip range //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. Finished drawing

Summarize

This is the end of this article about vue using echarts word cloud chart. For more relevant vue echarts word cloud chart content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Basic tutorial for adding Echarts charts in vue
  • Detailed tutorial on using Vue to develop dynamic refresh Echarts components
  • Example code of using echarts in Vue (3 types of pictures)
  • Detailed explanation of Vue2+Echarts to realize multiple chart data visualization Dashboard (with source code)
  • Detailed explanation of two ways to use echarts.js in vue files
  • Using echarts in vue.js to implement dynamic data refresh function
  • An example of a method for displaying data visualization on a large screen based on vue+echarts
  • Vue Echarts implements a visual world map code example
  • Detailed explanation of asynchronous update and data loading when using ECharts in Vue
  • Vue+echarts realizes the method of dynamically drawing charts and asynchronously loading data

<<:  Detailed explanation of the use of MySQL select cache mechanism

>>:  mysql settings to change the root password, mysql server connection, mysql common commands diagram

Recommend

How much do you know about JavaScript inheritance?

Table of contents Preface The relationship betwee...

How to implement ansible automated installation and configuration of httpd in Linux system

1. Use ansible's playbook to automatically in...

Architecture and component description of docker private library Harbor

This article will explain the composition of the ...

Let's talk in detail about the props attributes of components in Vue

Table of contents Question 1: How are props used ...

Node.js solves the problem of Chinese garbled characters in client request data

Node.js solves the problem of Chinese garbled cha...

The front-end page pop-up mask prohibits page scrolling

A problem that front-end developers often encount...

A brief discussion on using Cartesian product principle to query multiple tables in MySQL

MySQL multi-table query (Cartesian product princi...

JavaScript implements draggable modal box

This article shares the specific code of JavaScri...

Detailed explanation of Linux text processing command sort

sort Sort the contents of a text file Usage: sort...

Common operation commands of MySQL in Linux system

Serve: # chkconfig --list List all system service...

Implementation of CSS text shadow gradually blurring effect

text-shadow Add a shadow to the text. You can add...

The ultimate solution for writing bash scripts with nodejs

Table of contents Preface zx library $`command` c...

Example code of vue icon selector

Source: http://www.ruoyi.vip/ import Vue from ...

The process of installing MySQL 8.0.26 on CentOS7

1. First, download the corresponding database fro...

React component communication routing parameter transfer (react-router-dom)

Table of contents I've been learning React re...