63 lines
1.7 KiB
Vue
63 lines
1.7 KiB
Vue
<template>
|
||
<div class="wordCloud" :id="id" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import 'echarts-wordcloud'
|
||
import { fitChartSize } from '@/utils/dataUtil'
|
||
import { getHotWordApi } from '@/api/sentiment'
|
||
import { useEchart } from '@/hooks/echart'
|
||
|
||
const { id, setOption } = useEchart()
|
||
const initChart = async () => {
|
||
let res = await getHotWordApi()
|
||
setOption({
|
||
series: [
|
||
{
|
||
type: 'wordCloud',
|
||
// 网格大小，各项之间间距
|
||
gridSize: fitChartSize(50),
|
||
// 形状 circle 圆，cardioid 心， diamond 菱形，
|
||
// triangle-forward 、triangle 三角，star五角星
|
||
shape: 'circle',
|
||
// 字体大小范围
|
||
sizeRange: [fitChartSize(14), fitChartSize(36)],
|
||
// 文字旋转角度范围
|
||
rotationRange: [0, 0],
|
||
// 旋转步值
|
||
rotationStep: 90,
|
||
// 自定义图形
|
||
// maskImage: maskImage,
|
||
left: 'center',
|
||
top: 'center',
|
||
// 画布宽
|
||
width: '100%',
|
||
// 画布高
|
||
height: '100%',
|
||
// 是否渲染超出画布的文字
|
||
drawOutOfBound: false,
|
||
textStyle: {
|
||
color: function () {
|
||
const colors = ['#165DFF', '#6aca37', '#05a4b6', '#f93920', '#f0b114']
|
||
return colors[parseInt(Math.random() * colors.length)]
|
||
},
|
||
padding: fitChartSize(10),
|
||
backgroundColor: 'rgba(0,255,255,.2)'
|
||
},
|
||
data: res.data
|
||
}
|
||
]
|
||
})
|
||
}
|
||
onMounted(() => {
|
||
initChart()
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.wordCloud {
|
||
width: 100%;
|
||
height: 80%;
|
||
}
|
||
</style>
|