feat：完善舆情页面

2024-12-19 18:21:28 +08:00
parent 42a680c9c3
commit 188e233c7f
25 changed files with 641 additions and 139 deletions
--- a/src/views/sentiment/components/wordCloud.vue
+++ b/src/views/sentiment/components/wordCloud.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="wordCloud" id="wordCloud" />
+</template>
+
+<script setup>
+  import * as echarts from 'echarts'
+  import 'echarts-wordcloud'
+  import { fitChartSize } from '@/utils/dataUtil'
+
+  let wordChart = null
+  const initChart = () => {
+    const dom = document.getElementById('wordCloud')
+    wordChart = echarts.init(dom)
+    wordChart.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: [
+            {
+              value: 2,
+              name: '体外循环'
+            },
+            {
+              value: 1,
+              name: '偏好现金'
+            },
+            {
+              value: 7.75434839431,
+              name: '新成立公司'
+            },
+            {
+              value: 11.3865516372,
+              name: '相同董监高'
+            },
+            {
+              value: 7.75434839431,
+              name: '司法风险'
+            },
+            {
+              value: 5.83541244308,
+              name: '小微企业'
+            },
+            {
+              value: 15.83541244308,
+              name: '同名称交易'
+            },
+            {
+              value: 2.83541244308,
+              name: '高频交易'
+            },
+            {
+              value: 5.83541244308,
+              name: '大额交易'
+            },
+            {
+              value: 10.83541244308,
+              name: '贸易公司'
+            },
+            {
+              value: 5.83541244308,
+              name: '票据偏好'
+            },
+            {
+              value: 5.83541244308,
+              name: '空转走单'
+            }
+          ]
+        }
+      ]
+    })
+  }
+  const resize = () => {
+    if (wordChart) {
+      wordChart.dispose()
+      wordChart = null
+      initChart()
+    }
+  }
+  onMounted(() => {
+    initChart()
+    window.addEventListener('resize', resize)
+  })
+</script>
+
+<style scoped lang="scss">
+  .wordCloud {
+    width: vw(760);
+    height: vh(420);
+  }
+</style>