新增加云词组件

2022-05-25 18:39:08 +08:00
parent a5d4e854e4
commit c0140b24ba
3 changed files with 158 additions and 7 deletions
@@ -0,0 +1,96 @@
+<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>