vue使用echarts詞云圖的實(shí)戰(zhàn)記錄
更新時(shí)間：2021年05月12日 10:05:35 作者：Circle-C
這篇文章主要給大家介紹了關(guān)于vue使用echarts詞云圖的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
echarts詞云圖是echarts的一個(gè)擴(kuò)展
https://echarts.apache.org/zh/download-extension.html
1.安裝依賴
npm install echarts npm install echarts-wordcloud
2.main.js引入
import echarts from 'echarts'; Vue.prototype.$echarts = echarts
3.在用到的組件中引入擴(kuò)展
<script> import "echarts-wordcloud/dist/echarts-wordcloud"; import "echarts-wordcloud/dist/echarts-wordcloud.min"; </script>
4.配置
<template>
<div class="result">
<el-tabs type="border-card" v-model="name">
<el-tab-pane label="各省累計(jì)確診" name="0">
<div ref="chart1" style="width: 800px;height:600px;"></div>
</el-tab-pane>
<el-tab-pane label="各省現(xiàn)有確診" name="1">
<div ref="chart2" style="width: 800px;height:600px;" class="charts-two"></div>
</el-tab-pane>
<el-tab-pane label="各市累計(jì)確診" name="2">
<div ref="chart3" style="width: 800px;height:600px;"></div>
</el-tab-pane>
<el-tab-pane label="各市現(xiàn)有確診" name="3">
<div ref="chart4" style="width: 800px;height:600px;"></div>
</el-tab-pane>
</el-tabs>
</div>
</template>
// 詞云圖
<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': '香港', 'value': 11801},
{'name': '臺(tái)灣', 'value': 1178},
{'name': '上海', 'value': 2006},
{'name': '廣東', 'value': 2365},
{'name': '云南', 'value': 347},
{'name': '四川', 'value': 992},
{'name': '福建', 'value': 595},
{'name': '浙江', 'value': 1345},
{'name': '海南', 'value': 188},
{'name': '江蘇', 'value': 720},
{'name': '天津', 'value': 387},
{'name': '山西', 'value': 251},
{'name': '廣西', 'value': 275},
{'name': '陜西', 'value': 592},
{'name': '湖北', 'value': 38158},
{'name': '重慶', 'value': 597},
{'name': '內(nèi)蒙古', 'value': 382},
{'name': '湖南', 'value': 1045},
{'name': '山東', 'value': 879},
{'name': '北京', 'value': 1057},
{'name': '河南', 'value': 1312},
{'name': '甘肅', 'value': 193},
{'name': '西藏', 'value': 1},
{'name': '吉林', 'value': 573},
{'name': '河北', 'value': 1317},
{'name': '青海', 'value': 18},
{'name': '澳門(mén)', 'value': 49},
{'name': '新疆', 'value': 980},
{'name': '遼寧', 'value': 408},
{'name': '安徽', 'value': 994},
{'name': '黑龍江', 'value': 1610},
{'name': '貴州', 'value': 147},
{'name': '江西', 'value': 937},
{'name': '寧夏', 'value': 75}
]
var data2 = [
{'name': '香港', 'value': 118},
{'name': '臺(tái)灣', 'value': 89},
{'name': '上海', 'value': 56},
{'name': '廣東', 'value': 51},
{'name': '云南', 'value': 46},
{'name': '四川', 'value': 30},
{'name': '福建', 'value': 25},
{'name': '浙江', 'value': 22},
{'name': '海南', 'value': 17},
{'name': '江蘇', 'value': 8},
{'name': '天津', 'value': 7},
{'name': '山西', 'value': 7},
{'name': '廣西', 'value': 7},
{'name': '陜西', 'value': 6},
{'name': '湖北', 'value': 6},
{'name': '重慶', 'value': 6},
{'name': '內(nèi)蒙古', 'value': 4},
{'name': '湖南', 'value': 4},
{'name': '山東', 'value': 3},
{'name': '北京', 'value': 2},
{'name': '河南', 'value': 1},
{'name': '甘肅', 'value': 1},
{'name': '西藏', 'value': 0},
{'name': '吉林', 'value': 0},
{'name': '河北', 'value': 0},
{'name': '青海', 'value': 0},
{'name': '澳門(mén)', 'value': 0},
{'name': '新疆', 'value': 10},
{'name': '遼寧', 'value': 0},
{'name': '安徽', 'value': 0},
{'name': '黑龍江', 'value': 0},
{'name': '貴州', 'value': 0},
{'name': '江西', 'value': 0},
{'name': '寧夏', 'value': 0}
]
var data3 = [
{'name': '香港', 'value': 11801},
{'name': '臺(tái)灣', 'value': 1178},
{'name': '上海', 'value': 2006},
{'name': '廣東', 'value': 2365},
{'name': '云南', 'value': 347},
{'name': '四川', 'value': 992},
{'name': '福建', 'value': 595},
{'name': '浙江', 'value': 1345},
{'name': '海南', 'value': 188},
{'name': '江蘇', 'value': 720},
{'name': '天津', 'value': 387},
{'name': '山西', 'value': 251},
{'name': '廣西', 'value': 275},
{'name': '陜西', 'value': 592},
{'name': '湖北', 'value': 38158},
{'name': '重慶', 'value': 597},
{'name': '內(nèi)蒙古', 'value': 382},
{'name': '湖南', 'value': 1045},
{'name': '山東', 'value': 879},
{'name': '北京', 'value': 1057},
{'name': '河南', 'value': 1312},
{'name': '甘肅', 'value': 193},
{'name': '西藏', 'value': 1},
{'name': '吉林', 'value': 573},
{'name': '河北', 'value': 1317},
{'name': '青海', 'value': 18},
{'name': '澳門(mén)', 'value': 49},
{'name': '新疆', 'value': 980},
{'name': '遼寧', 'value': 408},
{'name': '安徽', 'value': 994},
{'name': '黑龍江', 'value': 1610},
{'name': '貴州', 'value': 147},
{'name': '江西', 'value': 937},
{'name': '寧夏', 'value': 75}
]
var data4 = [
{'name': '香港', 'value': 118},
{'name': '臺(tái)灣', 'value': 89},
{'name': '上海', 'value': 56},
{'name': '廣東', 'value': 51},
{'name': '云南', 'value': 46},
{'name': '四川', 'value': 30},
{'name': '福建', 'value': 25},
{'name': '浙江', 'value': 22},
{'name': '海南', 'value': 17},
{'name': '江蘇', 'value': 8},
{'name': '天津', 'value': 7},
{'name': '山西', 'value': 7},
{'name': '廣西', 'value': 7},
{'name': '陜西', 'value': 6},
{'name': '湖北', 'value': 6},
{'name': '重慶', 'value': 6},
{'name': '內(nèi)蒙古', 'value': 4},
{'name': '湖南', 'value': 4},
{'name': '山東', 'value': 3},
{'name': '北京', 'value': 2},
{'name': '河南', 'value': 1},
{'name': '甘肅', 'value': 1},
{'name': '西藏', 'value': 0},
{'name': '吉林', 'value': 0},
{'name': '河北', 'value': 0},
{'name': '青海', 'value': 0},
{'name': '澳門(mén)', 'value': 0},
{'name': '新疆', 'value': 10},
{'name': '遼寧', 'value': 0},
{'name': '安徽', 'value': 0},
{'name': '黑龍江', 'value': 0},
{'name': '貴州', 'value': 0},
{'name': '江西', 'value': 0},
{'name': '寧夏', 'value': 0}
]
var chart1Option = {
title: {
text: '各省累計(jì)確診-詞云',//標(biāo)題
x: 'center',
textStyle: {
fontSize: 23
}
},
backgroundColor: '#fff', //F7F7F7
tooltip: {
show: true
},
series: [{
name: '各省累計(jì)確診',//數(shù)據(jù)提示窗標(biāo)題
type: 'wordCloud',
sizeRange: [12, 64],//畫(huà)布范圍，如果設(shè)置太大會(huì)出現(xiàn)少詞（溢出屏幕）
rotationRange: [-45, 90],//數(shù)據(jù)翻轉(zhuǎn)范圍
//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: '各省現(xiàn)有確診-詞云',//標(biāo)題
x: 'center',
textStyle: {
fontSize: 23
}
},
backgroundColor: '#fff',
tooltip: {
show: true
},
series: [{
name: '各省現(xiàn)有確診',//數(shù)據(jù)提示窗標(biāo)題
type: 'wordCloud',
sizeRange: [12, 64],//畫(huà)布范圍，如果設(shè)置太大會(huì)出現(xiàn)少詞（溢出屏幕）
rotationRange: [-45, 90],//數(shù)據(jù)翻轉(zhuǎn)范圍
//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: '各市累計(jì)確診-詞云',//標(biāo)題
x: 'center',
textStyle: {
fontSize: 23
}
},
backgroundColor: '#fff',
tooltip: {
show: true
},
series: [{
name: '各市累計(jì)確診',//數(shù)據(jù)提示窗標(biāo)題
type: 'wordCloud',
sizeRange: [12, 64],//畫(huà)布范圍，如果設(shè)置太大會(huì)出現(xiàn)少詞（溢出屏幕）
rotationRange: [-45, 90],//數(shù)據(jù)翻轉(zhuǎn)范圍
//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: '各市現(xiàn)有確診-詞云',//標(biāo)題
x: 'center',
textStyle: {
fontSize: 23
}
},
backgroundColor: '#fff',
tooltip: {
show: true
},
series: [{
name: '各市現(xiàn)有確診',//數(shù)據(jù)提示窗標(biāo)題
type: 'wordCloud',
sizeRange: [12, 64],//畫(huà)布范圍，如果設(shè)置太大會(huì)出現(xiàn)少詞（溢出屏幕）
rotationRange: [-45, 90],//數(shù)據(jù)翻轉(zhuǎn)范圍
//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.完成圖
總結(jié)
到此這篇關(guān)于vue使用echarts詞云圖的文章就介紹到這了,更多相關(guān)vue echarts詞云圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
elementui源碼學(xué)習(xí)仿寫(xiě)el-collapse示例
這篇文章主要為大家介紹了elementui源碼學(xué)習(xí)之仿寫(xiě)el-collapse示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
vue3.0 proxy設(shè)置代理不成功的問(wèn)題及解決方案
這篇文章主要介紹了vue3.0 proxy設(shè)置代理不成功的問(wèn)題及解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
詳解vue3結(jié)合ts項(xiàng)目中使用mockjs
這篇文章主要為大家介紹了vue3結(jié)合ts項(xiàng)目中使用mockjs示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
隨著前端技術(shù)的發(fā)展,CSS?變量（也稱為?CSS?定制屬性）成為了現(xiàn)代?Web?開(kāi)發(fā)中不可或缺的一部分,在?Vue.js?應(yīng)用程序中,使用?CSS?變量不僅可以增強(qiáng)樣式的靈活性,還能提高開(kāi)發(fā)效率,本文將詳細(xì)介紹如何在?Vue?項(xiàng)目中引入并使用?CSS?變量,需要的朋友可以參考下2024-09-09
axios請(qǐng)求二次封裝之避免重復(fù)發(fā)送請(qǐng)求
在做vue中大型項(xiàng)目的時(shí)候,官方推薦使用axios,但是原生的axios可能對(duì)項(xiàng)目的適配不友好,所以在工程開(kāi)始的來(lái)封裝一下axios,下面這篇文章主要給大家介紹了關(guān)于axios請(qǐng)求二次封裝之避免重復(fù)發(fā)送請(qǐng)求的相關(guān)資料,需要的朋友可以參考下2022-10-10
vue3.0+ts引入詳細(xì)步驟以及語(yǔ)法校驗(yàn)報(bào)錯(cuò)問(wèn)題解決辦法
Vue?3.0是一個(gè)非常流行的JavaScript框架,不僅易于學(xué)習(xí)和使用,而且可以與許多UI框架集成,下面這篇文章主要給大家介紹了關(guān)于vue3.0+ts引入詳細(xì)步驟以及語(yǔ)法校驗(yàn)報(bào)錯(cuò)問(wèn)題的解決辦法,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Vue生成動(dòng)態(tài)表單功能，這是小編第一次接這個(gè)需求，作為前端開(kāi)發(fā)的我真的不知如何下手，今天小編通過(guò)一段代碼給大家分享vue生成動(dòng)態(tài)表單效果,需要的朋友可以參考下2019-11-11
vue中watch監(jiān)聽(tīng)不到變化的解決
本文主要介紹了vue中watch監(jiān)聽(tīng)不到變化的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01
對(duì)于一個(gè)中后臺(tái)類的項(xiàng)目,一個(gè)比較常見(jiàn)的展示形式就是Table了,這篇文章主要給大家介紹了關(guān)于Vue封裝通用table組件的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了vue中輸入框事件的使用及數(shù)值校驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08