vue使用echarts词云图的实战记录
更新时间：2021年05月12日 10:05:35 作者：Circle-C
这篇文章主要给大家介绍了关于vue使用echarts词云图的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
echarts词云图是echarts的一个扩展
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.在用到的组件中引入扩展
<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="各省累计确诊" name="0">
<div ref="chart1" style="width: 800px;height:600px;"></div>
</el-tab-pane>
<el-tab-pane label="各省现有确诊" name="1">
<div ref="chart2" style="width: 800px;height:600px;" class="charts-two"></div>
</el-tab-pane>
<el-tab-pane label="各市累计确诊" name="2">
<div ref="chart3" style="width: 800px;height:600px;"></div>
</el-tab-pane>
<el-tab-pane label="各市现有确诊" 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': '台湾', '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': '内蒙古', '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': '澳门', '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': '台湾', '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': '内蒙古', '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': '澳门', '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': '台湾', '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': '内蒙古', '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': '澳门', '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': '台湾', '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': '内蒙古', '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': '澳门', '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: '各省累计确诊-词云',//标题
x: 'center',
textStyle: {
fontSize: 23
}
},
backgroundColor: '#fff', //F7F7F7
tooltip: {
show: true
},
series: [{
name: '各省累计确诊',//数据提示窗标题
type: 'wordCloud',
sizeRange: [12, 64],//画布范围，如果设置太大会出现少词（溢出屏幕）
rotationRange: [-45, 90],//数据翻转范围
//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: '各省现有确诊-词云',//标题
x: 'center',
textStyle: {
fontSize: 23
}
},
backgroundColor: '#fff',
tooltip: {
show: true
},
series: [{
name: '各省现有确诊',//数据提示窗标题
type: 'wordCloud',
sizeRange: [12, 64],//画布范围，如果设置太大会出现少词（溢出屏幕）
rotationRange: [-45, 90],//数据翻转范围
//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: '各市累计确诊-词云',//标题
x: 'center',
textStyle: {
fontSize: 23
}
},
backgroundColor: '#fff',
tooltip: {
show: true
},
series: [{
name: '各市累计确诊',//数据提示窗标题
type: 'wordCloud',
sizeRange: [12, 64],//画布范围，如果设置太大会出现少词（溢出屏幕）
rotationRange: [-45, 90],//数据翻转范围
//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: '各市现有确诊-词云',//标题
x: 'center',
textStyle: {
fontSize: 23
}
},
backgroundColor: '#fff',
tooltip: {
show: true
},
series: [{
name: '各市现有确诊',//数据提示窗标题
type: 'wordCloud',
sizeRange: [12, 64],//画布范围，如果设置太大会出现少词（溢出屏幕）
rotationRange: [-45, 90],//数据翻转范围
//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.完成图
总结
到此这篇关于vue使用echarts词云图的文章就介绍到这了,更多相关vue echarts词云图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vueuse 是一个功能强大的 Vue.js 生态系统工具库,它提供了一系列的可重用的 Vue 组件和函数,本文将介绍 Vueuse 的主要特点和用法,以及它在 Vue.js 开发中的作用和优势,感兴趣的可以了解下2024-02-02
Electron自动更新失效报错Error: Object has been destroyed的问题解决
本文主要讲解如何解决 Error: Object has been destroyed 这个 Electron 中最常见的问题,以及 Electron 自动更新的流程,文中通过代码示例给大家讲解的非常详细,需要的朋友可以参考下2024-01-01
在Vue3中可以使用`ref`来获取DOM元素,下面这篇文章主要给大家介绍了关于如何在Vue3中使用Ref访问DOM元素的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要给大家介绍了关于vuex刷新后数据丢失的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
最近接了个项目需要开发一个app项目，由于是第一次接触这种app开发，经过一番思考，决定使用Vue3+Vant前端组件的模式进行开发，下面把问题分析及实现代码分享给大家，需要的朋友参考下吧2021-06-06
这篇文章主要介绍了在vue项目中如何获取视频的时长，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue3中使用Proxy实现数据劫持,解决了Vue2中数组和对象劫持的遗留问题,Proxy可以修改某些操作的默认行为,通过get和set方法实现数据的劫持和保护机制,感兴趣的朋友跟随小编一起看看吧2024-11-11
这篇文章主要介绍了vue el-upload手动上传实现过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-06-06
这篇文章主要给大家介绍了关于Vue项目中如何封装axios（统一管理http请求）的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
Vue+jsPlumb实现连线效果(支持滑动连线和点击连线)
jsPlumb 是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。本文将利用jsPlumb实现连线效果，同时支持滑动连线和点击连线，感兴趣的可以了解一下2023-01-01
最新评论