vue3 + echarts-wordcloud 绘制词云图
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
前言
词云图,是一种文本数据的视觉展示,由词汇组成类似云的彩色图形。
echarts-wordcloud是基于echarts的一个词云库,本篇主要介绍它的使用方法。
安装
npm install echarts
npm install echarts-wordcloud
引用
import * as echarts from 'echarts';
import 'echarts-wordcloud';
基本配置
接下来让我们来看一下echarts-wordcloud的具体配置,我把他封装成了子组件,具体代码如下:
// ChartWordCloud.vue
<template>
<div id="charts-content"></div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import { onMounted } from "vue";
// 引入 lodash 中的 merge、深克隆
import merge from 'lodash/merge';
const props = withDefaults(
defineProps<{
options: any
}>(),
{},
)
// 词云图默认属性
const defaultSeries = [{
type: 'wordCloud',
/**
* 绘制词云的形状, 值为回调函数 或 关键字, 默认 circle
* 关键字:
*
* circle(圆形) 词的数量不太多的时候,效果不明显,它会趋向于画一个椭圆
* cardioid(苹果形或心形曲线)
* diamond(菱形 正方形)
* triangle-forward(三角形-向前)
* triangle(三角形-直立)
* pentagon(五边形)
* star(星形)
*/
shape: 'circle',
// 保持 maskImage 的纵横比或形状的纵横比为 1:1
keepAspect: false,
/**
* 词云轮廓图,支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串, 不包含白色区域; 可选选项
* shape选项将随着云的形状增长而继续应用
* 有形状限制的时候,最好用背景图来实现,而且这个背景图一定要放base64的,不然词云画不出来
*/
// maskImage: maskImage,
// 词云整个图表放置的位置 和 尺寸大小
left: 'center',
top: 'center',
width: '100%',
height: '100%',
right: null,
bottom: null,
// 词云文本大小范围, 默认为最小12像素,最大60像素
sizeRange: [12, 60],
// 词云文字旋转范围和步长。 文本将通过旋转在[-90,90]范围内随机旋转步骤45
// 如果都设置为 0 , 则是水平显示
rotationRange: [-90, 90],
rotationStep: 45,
/**
* 词间距, 距离越大,单词之间的间距越大, 单位像素
* 这里间距太小的话,会出现大词把小词套住的情况,比如一个大的口字,中间会有比较大的空隙,这时候他会把一些很小的字放在口字里面,这样的话,鼠标就无法选中里面的那个小字
*/
gridSize: 8,
// 设置为true可以使单词部分在画布之外绘制, 允许绘制大于画布大小的单词
drawOutOfBound: false,
/**
* 布局的时候是否有动画
* 注意:禁用时,当单词较多时,将导致UI阻塞。
*/
layoutAnimation: true,
// 这是全局的文字样式,相对应的还可以对每个词设置字体样式
textStyle: {
fontFamily: 'sans-serif',
fontWeight: 'bold',
// 颜色可以用一个函数来返回字符串
color: function () {
// 随机颜色
return (
'rgb(' +
[
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
Math.round(Math.random() * 160),
].join(',') +
')'
)
},
},
// 鼠标hover的特效样式
emphasis: {
focus: 'self',
textStyle: {
textShadowBlur: 10,
textShadowColor: '#999'
}
},
/**
* 词云数据,必须是一个数组,每个数组项必须有name和value属性
* 设置单个文本的样式: textStyle
*
* 例:{
name: '',
value: 40,
textStyle: {
}
},
*/
data: []
}]
let seriesData = props.options.series;
const series = merge({}, defaultSeries[0], seriesData[0]) // {}表示合并后的新对象,可以传入一个空对象作为初始值
function DrawWordCloud() {
// 词云
let mychart = echarts.init(document.getElementById("charts-content")) // 可以设置主题色'dark'
mychart.setOption({
series: series
})
}
onMounted(() => {
DrawWordCloud()
})
</script>
<style scoped lang="scss"></style>
父组件调用:
<template>
<div class="bestsellers-container">
<chart-word-cloud :options="state.chartOptions"></chart-word-cloud>
</div>
</template>
<script setup lang="ts">
import ChartWordCloud from './BestsellersNephogram/ChartWordCloud.vue'
import { onMounted, reactive } from 'vue'
const state = reactive({
chartOptions: {
series: [
{
gridSize: 20,
data: [
{
name: '娜娜米',
value: 30,
// textStyle: {
// color: 'rgba(0, 0, 0, .4)',
// },
},
{name: '五条悟',value: 30},
{ name: '狗卷', value: 28 },
{ name: 'Shoto', value: 28 },
{ name: 'Vox', value: 25 },
{ name: "Aza", value: 23 },
{ name: 'Mysta', value: 20 },
{ name: 'Uki', value: 18 },
{ name: 'Luca', value: 15 },
{ name: 'Shu', value: 10 },
{ name: 'Ike', value: 10 },
{ name: "Fulgun", value: 10 }
],
},
],
},
})
onMounted(() => {})
</script>
<style scoped lang="less">
.bestsellers-container {
height: 18.56rem;
background: #f0f0f0;
#charts-content {
/* 需要设置宽高后才会显示 */
width: 100%;
height: 100%;
}
}
</style>
效果图:
字体平行且按预设颜色数组展示
如果想实现字体平行且按预设颜色数组展示的效果,只需将rotationRange都设为0即可,再传入自定义的color数组:
// 父组件
chartOptions: {
color: ['#FFFFFF', '#FFFFFF', '#FFFFFF', 'rgba(255,255,255,0.7)', 'rgba(255,255,255,0.5)'],
series: [
{
rotationRange: [0, 0],
gridSize: 45,
sizeRange: [15, 35],
data: [...],
},
],
},
子组件则需要相对应的把将color改为:
color: function (v: any) {
// 根据dataIndex属性作为下标去访问定义的color色系数组
return `${props.options.color[v.dataIndex]}`
},
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献13条内容
所有评论(0)