图表刷新

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

@@ -2,7 +2,7 @@
   <div ref="chartRef" :style="{ height, width }"></div>
 </template>
 <script>
-import { ref, reactive, watchEffect, watch } from 'vue';
+import { ref, reactive, watchEffect } from 'vue';
 import { cloneDeep } from 'lodash';
 import { useEcharts } from '@/hooks/useEcharts';
 
@@ -66,18 +66,6 @@ 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) {
@@ -155,8 +143,8 @@ export default {
         seriesIndex: 0,
         showTooltip: true,
       });
-      getInstance()?.off('click', onClick);
-      getInstance()?.on('click', onClick);
+      // getInstance()?.off('click', onClick);
+      // getInstance()?.on('click', onClick);
     }
 
     function onClick(params) {

src/hooks/useEcharts.js

@@ -141,14 +141,13 @@ export const useEcharts = (elRef, theme = 'default') => {
   function setOptions(options = {}, clear = true) {
     const mergedOptions = {
       animation: true,
-      animationDuration: 3000,
+      animationDuration: 1000,
       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));
@@ -164,7 +163,6 @@ 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,34 +1,16 @@
 <template>
-  <custom-echart-line :chart-data="dataList" height="100%" :option="state.option" />
+  <custom-echart-line ref="lineCharts" :chart-data="state.data" height="100%" :option="state.option" />
 </template>
 <script setup>
-import { reactive } from 'vue';
-let dataList = reactive([
-  {
-    value: 10,
-    name: '2020',
-  },
-  {
-    value: 66,
-    name: '2021',
-  },
-  {
-    value: 100,
-    name: '2022',
-  },
-  {
-    value: 120,
-    name: '2023',
-  },
-  {
-    value: 150,
-    name: '2024',
-  },
-  {
-    value: 80,
-    name: '2025',
-  },
-]);
+import { reactive, ref } from 'vue';
+let dataList = [
+  { value: 10, name: '2020' },
+  { 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'],
@@ -76,35 +58,19 @@ const state = reactive({
   },
   data: dataList,
 });
-
+const lineCharts = ref(null);
 const refresData = () => {
-  console.info('landPatrol********************refresData');
-  state.data = dataList = reactive([
-    {
-      value: 20,
-      name: '2020',
-    },
-    {
-      value: 86,
-      name: '2021',
-    },
-    {
-      value: 120,
-      name: '2022',
-    },
-    {
-      value: 140,
-      name: '2023',
-    },
-    {
-      value: 170,
-      name: '2024',
-    },
-    {
-      value: 100,
-      name: '2025',
-    },
-  ]);
+  state.data = [
+    { value: 5, name: '2020' },
+    { value: 36, name: '2021' },
+    { value: 70, name: '2022' },
+    { value: 56, name: '2023' },
+    { value: 70, name: '2024' },
+    { value: 20, name: '2025' },
+  ];
+
+  // console.info('landPatrol********************refresData', dataList);
+  lineCharts.value && lineCharts.value.refreshCharts(state.data);
 };
 
 defineExpose({