feat：对接舆情监测相关接口

src/views/sentiment/components/area.vue

@@ -1,15 +1,18 @@
 <template>
-  <div class="emotion" id="emotion" />
+  <div class="area" id="area" />
 </template>
 
 <script setup>
   import * as echarts from 'echarts'
   import { fitChartSize } from '@/utils/dataUtil'
-  let emotionChart = null
-  const initChart = () => {
-    const dom = document.getElementById('emotion')
-    emotionChart = echarts.init(dom)
-    emotionChart.setOption({
+  import { getAreaApi } from '@/api/sentiment.js'
+
+  let areaChart = null
+  const initChart = async () => {
+    const dom = document.getElementById('area')
+    areaChart = echarts.init(dom)
+    let res = await getAreaApi()
+    areaChart.setOption({
       legend: {
         top: 'top',
         itemWidth: fitChartSize(30),
@@ -23,30 +26,27 @@
         {
           name: 'Nightingale Chart',
           type: 'pie',
-          radius: ['10%', '70%'],
+          radius: ['30%', '60%'],
           center: ['50%', '56%'],
           roseType: 'area',
+          labelLine: {
+            normal: {
+              show: true,
+              length: 1
+            }
+          },
           itemStyle: {
             borderRadius: fitChartSize(10)
           },
-          data: [
-            { value: 40, name: 'rose 1' },
-            { value: 38, name: 'rose 2' },
-            { value: 32, name: 'rose 3' },
-            { value: 30, name: 'rose 4' },
-            { value: 28, name: 'rose 5' },
-            { value: 26, name: 'rose 6' },
-            { value: 22, name: 'rose 7' },
-            { value: 18, name: 'rose 8' }
-          ]
+          data: res.data
         }
       ]
     })
   }
   const resize = () => {
-    if (emotionChart) {
-      emotionChart.dispose()
-      emotionChart = null
+    if (areaChart) {
+      areaChart.dispose()
+      areaChart = null
       initChart()
     }
   }
@@ -57,7 +57,7 @@
 </script>
 
 <style scoped lang="scss">
-  .emotion {
+  .area {
     width: vw(740);
     height: vh(400);
   }

src/views/sentiment/components/dataSource.vue

@@ -8,18 +8,44 @@
       <p>敏感舆情</p>
     </div>
     <div class="list">
-      <div class="cell" v-for="(item, index) in 10" :key="index">
-        <p><span class="index">排名</span></p>
-        <p><span class="name">手机新浪网</span></p>
-        <p><span class="name">新闻</span></p>
-        <p><span class="number">580</span></p>
-        <p><span class="status">1000</span></p>
+      <div class="cell" v-for="(item, index) in list" :key="index">
+        <p>
+          <span
+            class="index"
+            :class="{ first: item.rank == 1, second: item.rank == 2, third: item.rank == 3 }"
+          >
+            {{ item.rank }}
+          </span>
+        </p>
+        <p>
+          <span class="name">{{ item.title }}</span>
+        </p>
+        <p>
+          <span class="name">{{ item.type }}</span>
+        </p>
+        <p>
+          <span class="number">{{ item.num }}</span>
+        </p>
+        <p>
+          <span class="status">{{ item.num_sensitive }}</span>
+        </p>
       </div>
     </div>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+  import { getMediaTypeApi } from '@/api/sentiment.js'
+
+  let list = ref([])
+  const getMediaType = async () => {
+    let res = await getMediaTypeApi()
+    list.value = res.data
+  }
+  onMounted(() => {
+    getMediaType()
+  })
+</script>
 
 <style scoped lang="scss">
   .table {
@@ -84,6 +110,18 @@
           border-radius: vw(2);
           background-color: #495c77;
         }
+        .first {
+          @extend .index;
+          background-color: #d9011b;
+        }
+        .second {
+          @extend .index;
+          background-color: #feae00;
+        }
+        .third {
+          @extend .index;
+          background-color: #2380fb;
+        }
         .name {
           font-weight: 400;
           font-size: vw(15);

src/views/sentiment/components/wordCloud.vue

@@ -6,11 +6,13 @@
   import * as echarts from 'echarts'
   import 'echarts-wordcloud'
   import { fitChartSize } from '@/utils/dataUtil'
+  import { getHotWordApi } from '@/api/sentiment'
 
   let wordChart = null
-  const initChart = () => {
+  const initChart = async () => {
     const dom = document.getElementById('wordCloud')
     wordChart = echarts.init(dom)
+    let res = await getHotWordApi()
     wordChart.setOption({
       //你的代码
       series: [
@@ -45,56 +47,7 @@
             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: '空转走单'
-            }
-          ]
+          data: res.data
         }
       ]
     })
@@ -115,6 +68,6 @@
 <style scoped lang="scss">
   .wordCloud {
     width: vw(760);
-    height: vh(420);
+    height: vh(410);
   }
 </style>