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
Encoding problems and solutions when mysql associates two tables
When Mysql associates two tables, an error messag...
Detailed explanation of CSS margin collapsing
Previous This is a classic old question. Since a ...
Should I use Bootstrap or jQuery Mobile for mobile web wap
Solving the problem Bootstrap is a CSS framework ...
js to achieve 3D carousel effect
This article shares the specific code for impleme...
JavaScript operation elements teach you how to change the page content style
Table of contents 1. Operation elements 1.1. Chan...
Detailed explanation of scheduled tasks for ordinary users in Linux
Preface Ordinary users define crontab scheduled t...
Detailed explanation of Mencached cache configuration based on Nginx
Introduction Memcached is a distributed caching s...
Detailed explanation of the idea of installing mysql8.0.11 and changing the root password and connecting navicat for mysql
1.1. Download: Download the zip package from the ...
Difference between MySQL update set and and
Table of contents Problem Description Cause Analy...
How to build your own Angular component library with DevUI
Table of contents Preface Creating a component li...
Detailed application of Vue dynamic form
Overview There are many form requirements in the ...
HTML background image and background color_PowerNode Java Academy
1. HTML Image <img> 1. The <img> tag ...
Example of implementing the Graphql interface in Vue
Note: This article is about the basic knowledge p...
Solution for FileZilla 425 Unable to connect to FTP (Alibaba Cloud Server)
Alibaba Cloud Server cannot connect to FTP FileZi...
HTML Web Page List Tags Learning Tutorial
HTML web page list tag learning tutorial. In HTML ...