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:
|
<<: Detailed explanation of the use of MySQL select cache mechanism
Recommend
Sample code for achieving three-dimensional picture placement effect with pure CSS
1. Percentage basis for element width/height/padd...
Why web page encoding uses utf-8 instead of gbk or gb2312?
If you have a choice, you should use UTF-8 In fac...
MySQL ID starts to increase from 1 to quickly solve the problem of discontinuous ID
mysql id starts from 1 and increases automaticall...
Installation, activation and configuration of ModSecurity under Apache
ModSecurity is a powerful packet filtering tool t...
MySQL 8.0.15 installation and configuration method graphic tutorial under Windows
This article shares with you the graphic tutorial...
Detailed explanation of using JavaScript WeakMap
A WeakMap object is a collection of key/value pai...
CSS3 implements missing corner rectangle, folded corner rectangle and missing corner border
Preface A few days ago, I came across the feature...
Web designers should optimize web pages from three aspects
<br />With the increase of bandwidth, there ...
MySQL full-text index to achieve a simple version of the search engine example code
Preface Only Innodb and MyISAM storage engines ca...
Detailed explanation of Vue's monitoring properties
Table of contents Vue monitor properties What is ...
Detailed explanation of nginx's default_server definition and matching rules
The default_server directive of nginx can define ...
Detailed tutorial on installing qt5.12.8 and environment configuration on ubuntu18.04
environment System: Ubuntu 18.04 Software: qt5.12...
Detailed explanation of Javascript basics
Table of contents variable Data Types Extension P...
Implementation of local migration of docker images
I've been learning Docker recently, and I oft...
Summary of several common ways to abbreviate javascript code
Table of contents Preface Arrow Functions Master ...