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
![A little-known JS problem: [] == ![] is true, but {} == !{} is false](/upload/images/67cae75dbccda.webp)
Recommend
How to insert batch data into MySQL database under Node.js
In the project (nodejs), multiple data need to be...
MySQL database monitoring software lepus usage problems and solutions
When using lepus3.7 to monitor the MySQL database...
Optimize the storage efficiency of BLOB and TEXT columns in InnoDB tables
First, let's introduce a few key points about...
Detailed explanation of the new CSS display:box property
1. display:box; Setting this property on an eleme...
Do you know how to use mock in vue project?
Table of contents first step: The second step is ...
Design theory: people-oriented design concept
<br />When thoughts were divided into East a...
JavaScript to implement the most complete code analysis of simple carousel (ES6 object-oriented)
This article shares the specific code of JavaScri...
How to install Nginx in a specified location in Centos system
How to install Nginx in a specified location in C...
Detailed explanation of Linux commands sort, uniq, tr tools
Sort Tool The Linux sort command is used to sort ...
Detailed example of using js fetch asynchronous request
Table of contents Understanding Asynchrony fetch(...
What do CN2, GIA, CIA, BGP and IPLC mean?
What is CN2 line? CN2 stands for China Telecom Ne...
JavaScript closure details
Table of contents 1. What is a closure? 2. The ro...
Methods and steps for deploying multiple war packages in Tomcat
1 Background JDK1.8-u181 and Tomcat8.5.53 were in...
How to implement digital paging effect code and steps in CSS
A considerable number of websites use digital pagi...
A brief discussion on the characteristics of CSS float
This article introduces the characteristics of CS...