components.d.ts

@@ -16,6 +16,7 @@ declare module 'vue' {
     CustomCarouselPicture: typeof import('./src/components/custom-carousel-picture/index.vue')['default']
     CustomEchartBar: typeof import('./src/components/custom-echart-bar/index.vue')['default']
     CustomEchartBubble: typeof import('./src/components/custom-echart-bubble/index.vue')['default']
+    CustomEchartHyaline: typeof import('./src/components/custom-echart-hyaline/index.vue')['default']
     CustomEchartHyalineCake: typeof import('./src/components/custom-echart-hyaline-cake/index.vue')['default']
     CustomEchartLine: typeof import('./src/components/custom-echart-line/index.vue')['default']
     CustomEchartLineLine: typeof import('./src/components/custom-echart-line-line/index.vue')['default']

src/components/custom-echart-line/index.vue

@@ -2,7 +2,7 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script>
-import { ref, reactive, watchEffect } from 'vue';
+import { ref, reactive, watchEffect, watch } from 'vue';
 import { cloneDeep } from 'lodash';
 import { useEcharts } from '@/hooks/useEcharts';
 
@@ -66,6 +66,18 @@ export default {
       props.chartData && initCharts();
     });
 
+    watch(
+      () => props.chartData,
+      () => {
+        console.info('props.chartData变化', props.chartData);
+        props.chartData && initCharts();
+      },
+      {
+        deep: true,
+        immediate: true,
+      }
+    );
+
     function hexToRGBA(hex, alpha = 1) {
       let hexCode = hex.replace('#', '');
       if (hexCode.length === 3) {
@@ -143,8 +155,8 @@ export default {
         seriesIndex: 0,
         showTooltip: true,
       });
-      // getInstance()?.off('click', onClick);
+      getInstance()?.off('click', onClick);
-      // getInstance()?.on('click', onClick);
+      getInstance()?.on('click', onClick);
     }
 
     function onClick(params) {

src/hooks/useEcharts.js

@@ -141,13 +141,14 @@ export const useEcharts = (elRef, theme = 'default') => {
   function setOptions(options = {}, clear = true) {
     const mergedOptions = {
       animation: true,
-      animationDuration: 1000,
+      animationDuration: 3000,
       animationEasing: 'cubicOut',
       ...unref(options),
       animationThreshold: 2000, // 数据量超过2000自动关闭动画
       animationDelayUpdate: (idx) => idx * 50, // 数据项延迟
     };
     cacheOptions.value = mergedOptions;
+    cacheOptions.value = options;
     if (unref(elRef)?.offsetHeight === 0) {
       useTimeoutFn(() => {
         setOptions(unref(getOptions));
@@ -163,6 +164,7 @@ export const useEcharts = (elRef, theme = 'default') => {
         }
         clear && chartInstance?.clear();
         chartInstance?.setOption(unref(getOptions));
+
         // 立即绑定事件
         chartInstance.off('click');
         chartInstance.on('click', handleMapClick);

src/views/land/components/landPatrol.vue

@@ -1,16 +1,34 @@
 <template>
-  <custom-echart-line ref="lineCharts" :chart-data="state.data" height="100%" :option="state.option" />
+  <custom-echart-line :chart-data="dataList" height="100%" :option="state.option" />
 </template>
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive } from 'vue';
-let dataList = [
+let dataList = reactive([
-  { value: 10, name: '2020' },
+  {
-  { value: 66, name: '2021' },
+    value: 10,
-  { value: 100, name: '2022' },
+    name: '2020',
-  { value: 120, name: '2023' },
+  },
-  { value: 150, name: '2024' },
+  {
-  { value: 80, name: '2025' },
+    value: 66,
-];
+    name: '2021',
+  },
+  {
+    value: 100,
+    name: '2022',
+  },
+  {
+    value: 120,
+    name: '2023',
+  },
+  {
+    value: 150,
+    name: '2024',
+  },
+  {
+    value: 80,
+    name: '2025',
+  },
+]);
 const state = reactive({
   option: {
     color: ['#35D0C0'],
@@ -58,16 +76,35 @@ const state = reactive({
   },
   data: dataList,
 });
-const lineCharts = ref(null);
+
 const refresData = () => {
-  state.data = [
+  console.info('landPatrol********************refresData');
-    { value: 5, name: '2020' },
+  state.data = dataList = reactive([
-    { value: 36, name: '2021' },
+    {
-    { value: 70, name: '2022' },
+      value: 20,
-    { value: 56, name: '2023' },
+      name: '2020',
-    { value: 70, name: '2024' },
+    },
-    { value: 20, name: '2025' },
+    {
-  ];
+      value: 86,
+      name: '2021',
+    },
+    {
+      value: 120,
+      name: '2022',
+    },
+    {
+      value: 140,
+      name: '2023',
+    },
+    {
+      value: 170,
+      name: '2024',
+    },
+    {
+      value: 100,
+      name: '2025',
+    },
+  ]);
 };
 
 defineExpose({