区域分析

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

@@ -0,0 +1,249 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="zoom-bg"/>
+    <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,
+    })
+    const ref_chart = ref();
+    const ref_main = ref();
+    const initChart = () => {
+      const chart = echarts.init(ref_chart.value);
+      const xLabel = props.data.map(v => v.area)
+      let yLMax = 0
+      let yRMax = 0
+      const powerValue = props.data.map(v => {
+        if (v.power > yLMax) {
+          yLMax = v.power
+        }
+        return v.power
+      })
+      const clueValue = props.data.map(v => {
+        if (v.clue > yRMax) {
+          yRMax = v.clue
+        }
+        return v.clue
+      })
+      const yStyle = {
+        splitNumber: 4,
+        alignTicks: true,
+        axisLine: {show: false},
+        axisTick: {show: false},
+        axisLabel: {
+          color: 'rgba(67,67,67,0.5)',
+          fontSize: 10
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(5,201,201,0.35)',
+            type: 'dotted',
+          }
+        },
+        nameGap: 10
+      }
+      const lineStyle = {
+        symbol: 'none',
+        smooth: true,
+        z: 3
+      }
+      const option = {
+        grid: {
+          top: 52,
+          bottom: 40,
+          left: 24 + String(yLMax).length * 10,
+          right: 12 + String(yLMax).length * 10
+        },
+        legend: {
+          data: ['处置力量数量', '有效线索数量'],
+          left: 10,
+          top: 6,
+          icon: 'rect',
+          itemWidth: 10,
+          itemHeight: 4,
+          align: 'right',
+          textStyle: {
+            color: 'rgba(67,67,67,0.5)',
+            fontSize: 10,
+            padding: [20, 0, 0, 0]
+          }
+        },
+        dataZoom: [
+          {
+            type: 'slider',
+            bottom: 14,
+            height: 0,
+            end: 36,
+            zoomLock: true,
+            borderColor: 'transparent',
+            showDetail: false,
+            moveHandleSize: 4,
+            moveHandleIcon: 'none',
+            moveHandleStyle: {
+              color: 'rgba(67, 67, 67, 0.3)'
+            },
+            emphasis: {
+              moveHandleStyle: {
+                color: 'rgba(67, 67, 67, 0.4)'
+              }
+            }
+          }
+        ],
+        tooltip: {
+          trigger: 'axis'
+        },
+        xAxis: {
+          type: 'category',
+          data: xLabel,
+          axisLine: {show: false},
+          axisTick: {show: false},
+          axisLabel: {
+            color: 'rgba(67,67,67,0.5)',
+            fontSize: 10,
+            interval: 0
+          },
+          splitNumber: 7,
+          boundaryGap: false
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name: '条',
+            nameTextStyle: {
+              color: 'rgba(67,67,67,0.5)',
+              fontSize: 10,
+              padding: [0, 30 + String(yLMax).length / 2 * 6, 0, 0]
+            },
+            ...yStyle
+          },
+          {
+            type: 'value',
+            name: '人',
+            nameTextStyle: {
+              color: 'rgba(67,67,67,0.5)',
+              fontSize: 10,
+              padding: [0, 0, 0, 20 + String(yRMax).length / 2 * 6]
+            },
+            ...yStyle
+          }
+        ],
+        series: [
+          {
+            name: '有效线索数量',
+            data: clueValue,
+            type: 'line',
+            areaStyle: {},
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 渐变色的起止位置，可根据需要调整
+                  [
+                    { offset: 0, color: 'rgba(242, 45, 106, 1)' }, // 渐变色起始颜色
+                    { offset: 1, color: 'rgba(242, 45, 106, 0.3)' } // 渐变色结束颜色
+                  ]
+              )
+            },
+            ...lineStyle
+          },
+          {
+            name: '处置力量数量',
+            yAxisIndex: 1,
+            data: powerValue,
+            type: 'line',
+            areaStyle: {},
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(
+                  0, 0, 0, 1, // 渐变色的起止位置，可根据需要调整
+                  [
+                    { offset: 0, color: 'rgba(34, 135, 255, 1)' }, // 渐变色起始颜色
+                    { offset: 1, color: 'rgba(34, 135, 255, 0.3)' } // 渐变色结束颜色
+                  ]
+              )
+            },
+            ...lineStyle
+          }
+        ]
+      }
+      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;
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+  .zoom-bg {
+    position: absolute;
+    width: 283px;
+    height: 4px;
+    background-color: rgba(67, 67, 67, 0.2);
+    bottom: 10px;
+    left: 57px;
+    z-index: -1;
+  }
+}
+</style>

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

@@ -53,7 +53,9 @@
           <Top5ChartCom :data="clueTop5"/>
         </FocusContentCom>
         <div class="__gis-business-main_title">区域分析</div>
-        <FocusContentCom class="two">2</FocusContentCom>
+        <FocusContentCom class="two">
+          <AreaChartCom :data="areaAnalysis"/>
+        </FocusContentCom>
         <div class="__gis-business-main_title">审核情况</div>
         <div class="sh-area">
           <CusFormColumn
@@ -92,6 +94,7 @@ 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'
+import AreaChartCom from './area-chart.vue'
 
 export default defineComponent({
   name: '',
@@ -99,6 +102,7 @@ export default defineComponent({
     BusinessMainCom,
     FocusContentCom,
     Top5ChartCom,
+    AreaChartCom,
   },
   props: {},
   setup(props, {emit}) {
@@ -130,6 +134,27 @@ export default defineComponent({
         {num: 147, name: '琼海市'},
         {num: 124, name: '东方市'},
         {num: 99, name: '三亚市'},
+      ],
+      areaAnalysis: [
+        {area: '海口市1', clue: 300, power: 30},
+        {area: '海口市2', clue: 400, power: 311},
+        {area: '海口市3', clue: 700, power: 32},
+        {area: '海口市4', clue: 2100, power: 43},
+        {area: '海口市5', clue: 3300, power: 63},
+        {area: '海口市6', clue: 55500, power: 3},
+        {area: '海口市7', clue: 1200, power: 321},
+        {area: '海口市8', clue: 34500, power: 344},
+        {area: '海口市9', clue: 1100, power: 32},
+        {area: '海口市10', clue: 2200, power: 13},
+        {area: '海口市11', clue: 45600, power: 33},
+        {area: '海口市12', clue: 2200, power: 93},
+        {area: '海口市13', clue: 200, power: 3},
+        {area: '海口市14', clue: 200, power: 3},
+        {area: '海口市15', clue: 200, power: 3},
+        {area: '海口市16', clue: 200, power: 3},
+        {area: '海口市17', clue: 200, power: 3},
+        {area: '海口市18', clue: 200, power: 3},
+        {area: '海口市19', clue: 200, power: 3},
       ]
     })
     const onSearch = () => {