线索一张图

src/views/gis/business/clue/index.vue

@@ -25,7 +25,7 @@
               :disabled="datetimeType !== '0'"
               :disabled-date="handleDisabledDate"
               @calendar-change="(val) => calendarDate = val"
-              @clear="calendarStart = []"
+              @clear="calendarDate = []"
           />
           <el-tooltip
               effect="dark"
@@ -49,7 +49,9 @@
       </div>
       <div class="statistic-content">
         <div class="__gis-business-main_title">有效线索TOP5</div>
-        <FocusContentCom class="one">1</FocusContentCom>
+        <FocusContentCom class="one">
+          <Top5ChartCom :data="clueTop5"/>
+        </FocusContentCom>
         <div class="__gis-business-main_title">区域分析</div>
         <FocusContentCom class="two">2</FocusContentCom>
         <div class="__gis-business-main_title">审核情况</div>
@@ -89,12 +91,14 @@ import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
 import BusinessMainCom from '../common/business-main.vue'
 import FocusContentCom from '../common/focus-content.vue'
+import Top5ChartCom from './top5-chart.vue'
 
 export default defineComponent({
   name: '',
   components: {
     BusinessMainCom,
     FocusContentCom,
+    Top5ChartCom,
   },
   props: {},
   setup(props, {emit}) {
@@ -119,7 +123,14 @@ export default defineComponent({
         {label: '自定义', value: '0'},
       ],
       calendarDate: <any>[],
-      shArea: ''
+      shArea: '',
+      clueTop5: [
+        {num: 189, name: '海口市'},
+        {num: 158, name: '儋州市'},
+        {num: 147, name: '琼海市'},
+        {num: 124, name: '东方市'},
+        {num: 99, name: '三亚市'},
+      ]
     })
     const onSearch = () => {
       state.clue.form = JSON.parse(JSON.stringify(state.clue.tempForm))
@@ -209,7 +220,7 @@ export default defineComponent({
 @import "../main";
 .clue {
   flex: 1;
-  padding: 0 12px 10px 12px;
+  padding: 20px 12px 10px 12px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -252,7 +263,7 @@ export default defineComponent({
         height: 100%;
         border-radius: 2px;
         border: 1px solid #0093FF;
-        font-size: 14px;
+        font-size: 12px;
         font-family: PingFang SC, PingFang SC;
         font-weight: 400;
         color: #108DF3;
@@ -268,6 +279,9 @@ export default defineComponent({
     }
     .__cus-buttons-2 {
       height: 28px;
+      >div {
+        font-size: 12px;
+      }
     }
   }
   .statistic-content {

src/views/gis/business/clue/top5-chart.vue

@@ -0,0 +1,179 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="value">
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+    </div>
+    <div class="chart-ref" ref="ref_chart"/>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick, onUnmounted
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import * as echarts from 'echarts';
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    data: {
+      required: true,
+      default: () => []
+    },
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      resizeObserver: <any>null,
+      chart: <any>null,
+      colors: [
+          ['#5A88EA', '#89AFFF'],
+          ['#4EA5E3', '#6CC1F7'],
+          ['#16B2E3', '#75EAFF'],
+          ['#30C3C2', '#64EDE5'],
+          ['#38C491', '#46FFBD'],
+      ]
+    })
+    const ref_chart = ref();
+    const ref_main = ref();
+    const initChart = () => {
+      const chart = echarts.init(ref_chart.value);
+      const d = props.data.map((v, i) => {
+        v.value = 100 - i * 20
+        v.label = {
+          position: i % 2 === 0 ? 'right' : 'left'
+        }
+        v.itemStyle = {
+          color: new echarts.graphic.LinearGradient(
+              0, 0, 0, 1, // 渐变色的起止位置，可根据需要调整
+              [
+                { offset: 0, color: state.colors[i][0] }, // 渐变色起始颜色
+                { offset: 1, color: state.colors[i][1] } // 渐变色结束颜色
+              ]
+          )
+        }
+        return v
+      })
+      const option = {
+        series: [
+          {
+            name: 'Funnel',
+            type: 'funnel',
+            top: 10,
+            bottom: 10,
+            width: 142,
+            left: 'center',
+            min: 0,
+            max: 100,
+            gap: 3,
+            emphasis: {
+              disabled: true
+            },
+            label: {
+              fontSize: 10,
+              color: 'rgba(52,52,52,0.5)',
+              formatter: (p) => {
+                console.log(p)
+                return `{name|${p.name}} {num|${p.data.num}}`
+              },
+              rich: {
+                name: {
+                  fontSize: 12,
+                  fontWeight: 600,
+                  color: 'rgba(52,52,52,0.5)',
+                },
+                num: {
+                  fontSize: 14,
+                  fontFamily: 'YouSheBiaoTiHei',
+                  fontWeight: 400,
+                  color: '#43AEFE',
+                  padding: [0, 0, 2, 4]
+                }
+              }
+            },
+            labelLine: {
+              length: 35
+            },
+            data: d
+          }
+        ]
+      }
+      chart.setOption(option)
+      state.resizeObserver = new ResizeObserver((entries) => {
+        for (const entry of entries) {
+          chart && chart.resize()
+        }
+      })
+      state.resizeObserver.observe(ref_main.value);
+      return chart
+    }
+    watch(() => props.data, () => {
+      state.chart = initChart()
+    })
+    onMounted(() => {
+      nextTick(() => {
+        state.chart = initChart()
+      })
+      return () => {
+        state.resizeObserver?.unobserve(ref_main?.value)
+        state.resizeObserver?.disconnect()
+      }
+    })
+    return {
+      ...toRefs(state),
+      ref_chart,
+      ref_main,
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.chart-main {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+  .value {
+    position: absolute;
+    z-index: 2;
+    height: 100%;
+    padding: 11px 0;
+    display: grid;
+    grid-template-rows: repeat(5, 22px);
+    row-gap: 3px;
+    >div {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-family: YouSheBiaoTiHei;
+      color: #FFFFFF;
+    }
+  }
+}
+</style>

src/views/gis/business/situation/index.vue

@@ -244,7 +244,7 @@ export default defineComponent({
         height: 100%;
         border-radius: 2px;
         border: 1px solid #0093FF;
-        font-size: 14px;
+        font-size: 12px;
         font-family: PingFang SC, PingFang SC;
         font-weight: 400;
         color: #108DF3;
@@ -260,6 +260,9 @@ export default defineComponent({
     }
     .__cus-buttons-2 {
       height: 28px;
+      >div {
+        font-size: 12px;
+      }
     }
   }
   .statistic-content {

src/views/gis/layout/tools/select-chart.vue

@@ -64,7 +64,7 @@ export default defineComponent({
               color: '#4C4C4C' ,
               fontWeight: 400,
               fontFamily: 'Microsoft YaHei' ,
-              fontSize: 14 ,
+              fontSize: 12,
             },
             labelLine: {
               length: 15,

src/views/gis/layout/tools/select.vue

@@ -278,6 +278,7 @@ export default defineComponent({
     }
   }
   .result {
+    width: 404px;
     position: fixed;
     height: calc(100% - 100px - 60px - 2px);
     bottom: 10px;