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
Six weird and useful things about JavaScript
Table of contents 1. Deconstruction Tips 2. Digit...
Example code for implementing hollowing effect with CSS
Effect principle Mainly use CSS gradient to achie...
Copy and paste is the enemy of packaging
Before talking about OO, design patterns, and the ...
Basic application methods of javascript embedded and external links
Table of contents Basic application of javascript...
How CSS affects the white screen time during initial loading
Rendering pipeline with external css files In the...
Full-screen drag upload component based on Vue3
This article mainly introduces the full-screen dr...
MySQL knowledge points and commonly used MYSQL commands for the second-level computer exam
The basics of MySQL knowledge points for the seco...
Connector configuration in Tomcat
JBoss uses Tomcat as the Web container, so the co...
CentOS 8 custom directory installation nginx (tutorial details)
1. Install tools and libraries # PCRE is a Perl l...
15-minute parallel artifact GNU Parallel Getting Started Guide
GNU Parallel is a shell tool for executing comput...
How to install golang under linux
Go is an open source programming language that ma...
css Get all elements starting from the nth one
The specific code is as follows: <div id="...
How to get the width and height of the image in WeChat applet
origin Recently, I am working on requirement A, i...
Docker-compose installation yml file configuration method
Table of contents 1. Offline installation 2. Onli...
The difference between HTML name id and class_PowerNode Java Academy
name Specify a name for the tag. Format <input...