97 lines
1.9 KiB
Vue
97 lines
1.9 KiB
Vue
<template>
|
||
<div ref="chartRef" :class="className" :style="{ height: props.height, width: props.width }" />
|
||
</template>
|
||
|
||
<script setup>
|
||
import * as echarts from 'echarts'
|
||
|
||
import { useDebounceFn } from '@vueuse/core'
|
||
// import 'echarts-wordcloud'
|
||
|
||
const { proxy } = getCurrentInstance()
|
||
|
||
const props = defineProps({
|
||
name: {
|
||
type: String,
|
||
default: '',
|
||
},
|
||
min: {
|
||
type: [Object, Number],
|
||
default: 0,
|
||
},
|
||
max: {
|
||
type: [Object, Number],
|
||
default: 0,
|
||
},
|
||
data: {
|
||
type: Array,
|
||
default: () => [{}],
|
||
},
|
||
className: {
|
||
type: String,
|
||
default: 'chart',
|
||
},
|
||
width: {
|
||
type: String,
|
||
default: '100%',
|
||
},
|
||
height: {
|
||
type: String,
|
||
default: '300px',
|
||
},
|
||
})
|
||
let chart = null
|
||
const chartRef = ref()
|
||
|
||
//重绘图表函数
|
||
const resizeHandler = () => {
|
||
chart.resize()
|
||
}
|
||
function initChart() {
|
||
chart = echarts.init(proxy.$refs.chartRef, 'macarons')
|
||
|
||
chart.setOption({
|
||
tooltip: {
|
||
formatter: '{a} <br/>{b} : {c}',
|
||
},
|
||
series: [
|
||
{
|
||
type: 'wordCloud',
|
||
// shape这个属性虽然可配置，但是在词的数量不太多的时候，效果不明显，它会趋向于画一个椭圆
|
||
shape: 'circle',
|
||
gridSize: 1,
|
||
sizeRange: [12, 55],
|
||
rotationRange: [-45, 0, 45, 90],
|
||
textStyle: {
|
||
normal: {
|
||
color: function () {
|
||
return (
|
||
'rgb(' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ', ' + Math.round(Math.random() * 255) + ')'
|
||
)
|
||
},
|
||
},
|
||
},
|
||
left: 'center',
|
||
top: 'center',
|
||
right: null,
|
||
bottom: null,
|
||
data: props.data,
|
||
},
|
||
],
|
||
})
|
||
}
|
||
const debouncedFn = useDebounceFn(() => {
|
||
// do something
|
||
resizeHandler()
|
||
}, 500)
|
||
|
||
document.addEventListener('resize', debouncedFn)
|
||
|
||
onMounted(() => {
|
||
initChart()
|
||
})
|
||
onBeforeUnmount(() => {
|
||
window.removeEventListener('resize', debouncedFn)
|
||
})
|
||
</script>
|