perf: 优化异常处理

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -53,6 +53,7 @@ const option = computed(() => {
 watch(
   () => props.chartConfig.option.dataset,
   (newData: { dimensions: any }, oldData) => {
+    try {
       if (!isObject(newData) || !('dimensions' in newData)) return
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
@@ -65,6 +66,9 @@ watch(
           replaceMergeArr.value = []
         })
       }
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     deep: false

src/packages/components/Charts/Bars/BarCrossrange/index.vue

@@ -52,6 +52,7 @@ const option = computed(() => {
 watch(
   () => props.chartConfig.option.dataset,
   (newData: { dimensions: any }, oldData) => {
+    try {
       if (!isObject(newData) || !('dimensions' in newData)) return
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
@@ -64,6 +65,9 @@ watch(
           replaceMergeArr.value = []
         })
       }
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     deep: false

src/packages/components/Charts/Lines/LineCommon/index.vue

@@ -53,6 +53,7 @@ const option = computed(() => {
 watch(
   () => props.chartConfig.option.dataset,
   (newData: { dimensions: any }, oldData) => {
+    try {
       if (!isObject(newData) || !('dimensions' in newData)) return
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
@@ -65,6 +66,9 @@ watch(
           replaceMergeArr.value = []
         })
       }
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     deep: false

src/packages/components/Charts/Lines/LineGradientSingle/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <v-chart 
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize>
-    ref="vChartRef" 
-    :theme="themeColor" 
-    :option="option.value" 
-    :manual-update="isPreview()" 
-    autoresize>
   </v-chart>
 </template>
 
@@ -37,14 +32,7 @@ const props = defineProps({
   }
 })
 
-use([
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
-  DatasetComponent,
-  CanvasRenderer,
-  LineChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-])
 const chartEditStore = useChartEditStore()
 
 const option = reactive({
@@ -52,7 +40,10 @@ const option = reactive({
 })
 
 // 渐变色处理
-watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof typeof chartColorsSearch) => {
+watch(
+  () => chartEditStore.getEditCanvasConfig.chartThemeColor,
+  (newColor: keyof typeof chartColorsSearch) => {
+    try {
       if (!isPreview()) {
         const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
         props.chartConfig.option.series.forEach((value: any, index: number) => {
@@ -70,14 +61,21 @@ watch(() => chartEditStore.getEditCanvasConfig.chartThemeColor, (newColor: keyof
       }
       option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
       props.chartConfig.option = option.value
-}, {
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
     immediate: true
-})
+  }
+)
 
-
+watch(
-watch(() => props.chartConfig.option.dataset, () => {
+  () => props.chartConfig.option.dataset,
+  () => {
     option.value = props.chartConfig.option
-})
+  }
+)
 
 const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Charts/Lines/LineGradients/index.vue

@@ -1,93 +1,79 @@
 <template>
-  <v-chart
+  <v-chart ref="vChartRef" :theme="themeColor" :option="option.value" :manual-update="isPreview()" autoresize></v-chart>
-    ref="vChartRef"
-    :theme="themeColor"
-    :option="option.value"
-    :manual-update="isPreview()"
-    autoresize
-  ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, PropType } from "vue";
+import { reactive, watch, PropType } from 'vue'
-import VChart from "vue-echarts";
+import VChart from 'vue-echarts'
-import { use, graphic } from "echarts/core";
+import { use, graphic } from 'echarts/core'
-import { CanvasRenderer } from "echarts/renderers";
+import { CanvasRenderer } from 'echarts/renderers'
-import { LineChart } from "echarts/charts";
+import { LineChart } from 'echarts/charts'
-import config, { includes } from "./config";
+import config, { includes } from './config'
-import { mergeTheme } from "@/packages/public/chart";
+import { mergeTheme } from '@/packages/public/chart'
-import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { chartColorsSearch, defaultTheme } from "@/settings/chartThemes/index";
+import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
-import {
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
-  DatasetComponent,
+import { useChartDataFetch } from '@/hooks'
-  GridComponent,
+import { isPreview } from '@/utils'
-  TooltipComponent,
-  LegendComponent,
-} from "echarts/components";
-import { useChartDataFetch } from "@/hooks";
-import { isPreview } from "@/utils";
 
 const props = defineProps({
   themeSetting: {
     type: Object,
-    required: true,
+    required: true
   },
   themeColor: {
     type: Object,
-    required: true,
+    required: true
   },
   chartConfig: {
     type: Object as PropType<config>,
-    required: true,
+    required: true
-  },
+  }
-});
+})
 
-use([
+use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
-  DatasetComponent,
+const chartEditStore = useChartEditStore()
-  CanvasRenderer,
-  LineChart,
-  GridComponent,
-  TooltipComponent,
-  LegendComponent,
-]);
-const chartEditStore = useChartEditStore();
 
 const option = reactive({
-  value: {},
+  value: {}
-});
+})
 
 // 渐变色处理
 watch(
   () => chartEditStore.getEditCanvasConfig.chartThemeColor,
   (newColor: keyof typeof chartColorsSearch) => {
+    try {
       if (!isPreview()) {
-      const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme];
+        const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
         props.chartConfig.option.series.forEach((value: any, index: number) => {
           value.areaStyle.color = new graphic.LinearGradient(0, 0, 0, 1, [
             {
               offset: 0,
-            color: themeColor[3 + index],
+              color: themeColor[3 + index]
             },
             {
               offset: 1,
-            color: "rgba(0,0,0, 0)",
+              color: 'rgba(0,0,0, 0)'
-          },
+            }
-        ]);
+          ])
-      });
+        })
+      }
+      option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+      props.chartConfig.option = option.value
+    } catch (error) {
+      console.log(error)
     }
-    option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes);
-    props.chartConfig.option = option.value;
   },
   {
-    immediate: true,
+    immediate: true
   }
-);
+)
 
 watch(
   () => props.chartConfig.option.dataset,
   () => {
-    option.value = props.chartConfig.option;
+    option.value = props.chartConfig.option
   }
-);
+)
-const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore);
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>

src/packages/components/Charts/Lines/LineLinearSingle/index.vue

@@ -43,6 +43,7 @@ const option = reactive({
 watch(
   () => chartEditStore.getEditCanvasConfig.chartThemeColor,
   (newColor: keyof typeof chartColorsSearch) => {
+    try {
       if (!isPreview()) {
         const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
         props.chartConfig.option.series.forEach((value: any) => {
@@ -54,6 +55,9 @@ watch(
       }
       option.value = mergeTheme(props.chartConfig.option, props.themeSetting, includes)
       props.chartConfig.option = option.value
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     immediate: true

src/packages/components/Charts/Maps/MapBase/index.vue

@@ -64,7 +64,7 @@ registerMap(props.chartConfig.option.mapRegion.adcode, { geoJSON: {} as any, spe
 // 进行更换初始化地图 如果为china 单独处理
 const registerMapInitAsync = async () => {
   await nextTick()
-  if (props.chartConfig.option.mapRegion.adcode!="china") {
+  if (props.chartConfig.option.mapRegion.adcode != 'china') {
     await getGeojson(props.chartConfig.option.mapRegion.adcode)
   } else {
     await hainanLandsHandle(props.chartConfig.option.mapRegion.showHainanIsLands)
@@ -113,8 +113,12 @@ watch(
 watch(
   () => props.chartConfig.option.mapRegion.showHainanIsLands,
   async newData => {
+    try {
       await hainanLandsHandle(newData)
       vEchartsSetOption()
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     deep: false
@@ -125,12 +129,16 @@ watch(
 watch(
   () => props.chartConfig.option.mapRegion.adcode,
   async newData => {
+    try {
       await getGeojson(newData)
       props.chartConfig.option.geo.map = newData
       props.chartConfig.option.series.forEach((item: any) => {
         if (item.type === 'map') item.map = newData
       })
       vEchartsSetOption()
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     deep: false

src/packages/components/Charts/Mores/Heatmap/index.vue

@@ -75,7 +75,11 @@ const dataSetHandle = (dataset: typeof dataJson) => {
 watch(
   () => props.chartConfig.option.dataset,
   newData => {
+    try {
       dataSetHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     deep: false

src/packages/components/Charts/Mores/Process/index.vue

@@ -57,7 +57,11 @@ const option = shallowReactive({
 watch(
   () => props.chartConfig.option.dataset,
   (newData: any) => {
+    try {
       option.dataset = toNumber(newData, 2)
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     deep: false

src/packages/components/Charts/Mores/Radar/index.vue

@@ -57,7 +57,11 @@ const dataSetHandle = (dataset: typeof dataJson) => {
 watch(
   () => props.chartConfig.option.dataset,
   newData => {
+    try {
       dataSetHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     deep: false

src/packages/components/Charts/Mores/TreeMap/index.vue

@@ -49,8 +49,12 @@ const dataSetHandle = (dataset: typeof dataJson) => {
 watch(
   () => props.chartConfig.option.dataset,
   newData => {
+    try {
       if (!isArray(newData)) return
       dataSetHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     deep: false

src/packages/components/Charts/Mores/WaterPolo/index.vue

@@ -42,6 +42,7 @@ const option = reactive({
 watch(
   () => chartEditStore.getEditCanvasConfig.chartThemeColor,
   (newColor: keyof typeof chartColorsSearch) => {
+    try {
       if (!isPreview()) {
         const themeColor = chartColorsSearch[newColor] || chartColorsSearch[defaultTheme]
         // 背景颜色
@@ -59,6 +60,9 @@ watch(
         ]
       }
       option.value = props.chartConfig.option
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     immediate: true

src/packages/components/Charts/Pies/PieCircle/index.vue

@@ -48,7 +48,13 @@ const dataHandle = (newData: any) => {
 // 配置时
 watch(
   () => props.chartConfig.option.dataset,
-  newData => dataHandle(newData),
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
   {
     immediate: true,
     deep: false

src/packages/components/Charts/Pies/PieCommon/index.vue

@@ -39,6 +39,7 @@ const option = computed(() => {
 watch(
   () => props.chartConfig.option.type,
   newData => {
+    try {
       if (newData === 'nomal') {
         props.chartConfig.option.series[0].radius = '70%'
         props.chartConfig.option.series[0].roseType = false
@@ -49,6 +50,9 @@ watch(
         props.chartConfig.option.series[0].radius = '70%'
         props.chartConfig.option.series[0].roseType = true
       }
+    } catch (error) {
+      console.log(error)
+    }
   },
   { deep: false, immediate: true }
 )

src/packages/components/Charts/Scatters/ScatterCommon/index.vue

@@ -69,6 +69,7 @@ const option = computed(() => {
 watch(
   () => props.chartConfig.option.dataset,
   (newData, oldData) => {
+    try {
       if (!isArray(newData)) return
       if (Array.isArray(newData)) {
         replaceMergeArr.value = ['series']
@@ -81,6 +82,9 @@ watch(
           replaceMergeArr.value = []
         })
       }
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     deep: false

src/packages/components/Decorates/Mores/CountDown/index.vue

@@ -133,10 +133,14 @@ const renderCountdown: CountdownProps['render'] = ({ hours, minutes, seconds })
 }
 
 const updateTotalDuration = () => {
+  try {
     countdownActive.value = false
     totalDuration.value = useEndDate.value ? endDate.value - new Date().getTime() : dataset.value * 1000
     countdownRef.value?.reset && countdownRef.value?.reset()
     countdownActive.value = true
+  } catch (error) {
+    console.log(error)
+  }
 }
 
 watch(

src/packages/components/Decorates/Mores/FlipperNumber/index.vue

@@ -60,7 +60,11 @@ const updateDatasetHandler = (newVal: string | number) => {
 watch(
   () => props.chartConfig.option,
   newVal => {
+    try {
       updateDatasetHandler((newVal as OptionType).dataset)
+    } catch (error) {
+      console.log(error)
+    }
   },
   {
     immediate: true,

src/packages/components/Decorates/Mores/TimeCommon/index.vue

@@ -11,23 +11,23 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, ref, reactive, watch, onMounted, onUnmounted } from "vue";
+import { PropType, toRefs, ref, reactive, watch, onMounted, onUnmounted } from 'vue'
-import { CreateComponentType } from "@/packages/index.d";
+import { CreateComponentType } from '@/packages/index.d'
-import { useChartEditStore } from "@/store/modules/chartEditStore/chartEditStore";
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { useChartDataFetch } from "@/hooks";
+import { useChartDataFetch } from '@/hooks'
 
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
-    required: true,
+    required: true
-  },
+  }
-});
+})
-let yearMonthDay = ref("2021-2-3");
+let yearMonthDay = ref('2021-2-3')
-let nowData = ref("08:00:00");
+let nowData = ref('08:00:00')
-let newData = ref("2021-2-3 08:00:00");
+let newData = ref('2021-2-3 08:00:00')
-let boxShadow = ref("none");
+let boxShadow = ref('none')
 
-const { w, h } = toRefs(props.chartConfig.attr);
+const { w, h } = toRefs(props.chartConfig.attr)
 
 let {
   timeColor,
@@ -39,54 +39,55 @@ let {
   hShadow,
   vShadow,
   blurShadow,
-  colorShadow,
+  colorShadow
-} = toRefs(props.chartConfig.option);
+} = toRefs(props.chartConfig.option)
 
 watch(
   props.chartConfig.option,
   () => {
+    try {
       if (props.chartConfig.option.showShadow) {
-      boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`;
+        boxShadow.value = `${props.chartConfig.option.hShadow}px ${props.chartConfig.option.vShadow}px ${props.chartConfig.option.blurShadow}px ${props.chartConfig.option.colorShadow}`
       } else {
-      boxShadow.value = "none";
+        boxShadow.value = 'none'
+      }
+    } catch (error) {
+      console.log(error)
     }
   },
   {
-    immediate: true,
+    immediate: true
   }
-);
+)
 onMounted(() => {
   const timer = setInterval(() => {
-    var datetime = new Date();
+    var datetime = new Date()
-    var year = datetime.getFullYear();
+    var year = datetime.getFullYear()
-    var month =
+    var month = datetime.getMonth() + 1 < 10 ? '0' + (datetime.getMonth() + 1) : datetime.getMonth() + 1
-      datetime.getMonth() + 1 < 10
+    var date = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate()
-        ? "0" + (datetime.getMonth() + 1)
+    var hh = datetime.getHours() // 时
-        : datetime.getMonth() + 1;
+    var mm = datetime.getMinutes() // 分
-    var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
+    var ss = datetime.getSeconds() // 分
-    var hh = datetime.getHours(); // 时
+    let time = ''
-    var mm = datetime.getMinutes(); // 分
+    if (hh < 10) time += '0'
-    var ss = datetime.getSeconds(); // 分
+    time += hh + ':'
-    let time = "";
+    if (mm < 10) time += '0'
-    if (hh < 10) time += "0";
+    time += mm + ':'
-    time += hh + ":";
+    if (ss < 10) time += '0'
-    if (mm < 10) time += "0";
+    time += ss
-    time += mm + ":";
+    yearMonthDay.value = `${year}-${month}-${date}`
-    if (ss < 10) time += "0";
+    nowData.value = time
-    time += ss;
+    newData.value = yearMonthDay.value + ' ' + nowData.value
-    yearMonthDay.value = `${year}-${month}-${date}`;
+  }, 500)
-    nowData.value = time;
+})
-    newData.value = yearMonthDay.value + " " + nowData.value;
-  }, 500);
-});
 onUnmounted(() => {
-  clearInterval();
+  clearInterval()
-});
+})
-useChartDataFetch(props.chartConfig, useChartEditStore);
+useChartDataFetch(props.chartConfig, useChartEditStore)
 </script>
 
 <style lang="scss" scoped>
-@include go("decorates-number") {
+@include go('decorates-number') {
   text-align: center;
 }
 </style>

src/packages/components/Informations/Mores/WordCloud/index.vue

@@ -47,9 +47,12 @@ const option = computed(() => {
 })
 
 const dataSetHandle = (dataset: typeof dataJson) => {
+  try {
     dataset && (props.chartConfig.option.series[0].data = dataset)
-
     vChartRef.value && isPreview() && vChartRef.value.setOption(props.chartConfig.option)
+  } catch (error) {
+    console.log(error)
+  }
 }
 
 // dataset 无法变更条数的补丁

src/packages/components/Tables/Tables/TableList/index.vue

@@ -10,19 +10,12 @@
         <div class="rank" :style="`color: ${color};font-size: ${indexFontSize}px`">No.{{ item.ranking }}</div>
         <div class="info-name" :style="`font-size: ${leftFontSize}px`" v-html="item.name" />
         <div class="ranking-value" :style="`color: ${textColor};font-size: ${rightFontSize}px`">
-          {{
+          {{ status.mergedConfig.valueFormatter ? status.mergedConfig.valueFormatter(item) : item.value }}
-            status.mergedConfig.valueFormatter
-              ? status.mergedConfig.valueFormatter(item)
-              : item.value
-          }}
           {{ unit }}
         </div>
       </div>
       <div class="ranking-column" :style="`border-color: ${borderColor}`">
-        <div
+        <div class="inside-column" :style="`width: ${item.percent}%;background-color: ${color}`">
-          class="inside-column"
-          :style="`width: ${item.percent}%;background-color: ${color}`"
-        >
           <div class="shine" />
         </div>
       </div>
@@ -39,8 +32,8 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
-    required: true,
+    required: true
-  },
+  }
 })
 const { w, h } = toRefs(props.chartConfig.attr)
 const { rowNum, unit, color, textColor, borderColor, indexFontSize, leftFontSize, rightFontSize } = toRefs(
@@ -50,13 +43,15 @@ const { rowNum, unit, color, textColor, borderColor, indexFontSize, leftFontSize
 const status = reactive({
   mergedConfig: props.chartConfig.option,
   rowsData: [],
-  rows: [{
+  rows: [
+    {
       scroll: 0,
       ranking: 1,
       name: '',
       value: '',
       percent: 0
-  }],
+    }
+  ],
   heights: [0],
   animationIndex: 0,
   animationHandler: 0,
@@ -84,7 +79,7 @@ const calcRowsData = () => {
   dataset = dataset.map((row: any, i: number) => ({
     ...row,
     ranking: i + 1,
-    percent: ((row.value + minAbs) / total) * 100,
+    percent: ((row.value + minAbs) / total) * 100
   }))
   const rowLength = dataset.length
   if (rowLength > rowNum && rowLength < 2 * rowNum) {
@@ -134,11 +129,15 @@ const stopAnimation = () => {
 }
 
 const onRestart = async () => {
+  try {
     if (!status.mergedConfig) return
     stopAnimation()
     calcRowsData()
     calcHeights(true)
     animation(true)
+  } catch (error) {
+    console.log(error)
+  }
 }
 
 onRestart()

src/packages/components/Tables/Tables/TableScrollBoard/index.vue

@@ -1,24 +1,47 @@
 <template>
   <div class="dv-scroll-board">
-    <div class="header" v-if="status.header.length && status.mergedConfig"
+    <div
-      :style="`background-color: ${status.mergedConfig.headerBGC};`">
+      class="header"
-      <div class="header-item" v-for="(headerItem, i) in status.header" :key="`${headerItem}${i}`" :style="`
+      v-if="status.header.length && status.mergedConfig"
+      :style="`background-color: ${status.mergedConfig.headerBGC};`"
+    >
+      <div
+        class="header-item"
+        v-for="(headerItem, i) in status.header"
+        :key="`${headerItem}${i}`"
+        :style="`
         height: ${status.mergedConfig.headerHeight}px;
         line-height: ${status.mergedConfig.headerHeight}px;
         width: ${status.widths[i]}px;
-      `" :align="status.aligns[i]" v-html="headerItem" />
+      `"
+        :align="status.aligns[i]"
+        v-html="headerItem"
+      />
     </div>
 
-    <div v-if="status.mergedConfig" class="rows"
+    <div
-      :style="`height: ${h - (status.header.length ? status.mergedConfig.headerHeight : 0)}px;`">
+      v-if="status.mergedConfig"
-      <div class="row-item" v-for="(row, ri) in status.rows" :key="`${row.toString()}${row.scroll}`" :style="`
+      class="rows"
+      :style="`height: ${h - (status.header.length ? status.mergedConfig.headerHeight : 0)}px;`"
+    >
+      <div
+        class="row-item"
+        v-for="(row, ri) in status.rows"
+        :key="`${row.toString()}${row.scroll}`"
+        :style="`
         height: ${status.heights[ri]}px;
         line-height: ${status.heights[ri]}px;
         background-color: ${status.mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
-      `">
+      `"
-        <div class="ceil" v-for="(ceil, ci) in row.ceils" :key="`${ceil}${ri}${ci}`"
+      >
-          :style="`width: ${status.widths[ci]}px;`" :align="status.aligns[ci]" v-html="ceil" />
+        <div
-
+          class="ceil"
+          v-for="(ceil, ci) in row.ceils"
+          :key="`${ceil}${ri}${ci}`"
+          :style="`width: ${status.widths[ci]}px;`"
+          :align="status.aligns[ci]"
+          v-html="ceil"
+        />
       </div>
     </div>
   </div>
@@ -35,8 +58,8 @@ import cloneDeep from 'lodash/cloneDeep'
 const props = defineProps({
   chartConfig: {
     type: Object as PropType<CreateComponentType>,
-    required: true,
+    required: true
-  },
+  }
 })
 
 // 这里能拿到图表宽高等
@@ -138,11 +161,13 @@ const status = reactive({
   mergedConfig: props.chartConfig.option,
   header: [],
   rowsData: [],
-  rows: [{
+  rows: [
+    {
       ceils: [],
       rowIndex: 0,
       scroll: 0
-  }],
+    }
+  ],
   widths: [],
   heights: [0],
   avgHeight: 0,
@@ -187,7 +212,9 @@ const calcRowsData = () => {
   if (index) {
     dataset = dataset.map((row: any, i: number) => {
       row = [...row]
-      const indexTag = `<span class="index" style="background-color: ${headerBGC};border-radius: 3px;padding: 0px 3px;">${i + 1}</span>`
+      const indexTag = `<span class="index" style="background-color: ${headerBGC};border-radius: 3px;padding: 0px 3px;">${
+        i + 1
+      }</span>`
       row.unshift(indexTag)
       return row
     })
@@ -279,9 +306,13 @@ const stopAnimation = () => {
 }
 
 const onRestart = async () => {
+  try {
     if (!status.mergedConfig) return
     stopAnimation()
     calcData()
+  } catch (error) {
+    console.log(error)
+  }
 }
 
 watch(
@@ -316,7 +347,6 @@ useChartDataFetch(props.chartConfig, useChartEditStore, (resData: any[]) => {
 onUnmounted(() => {
   stopAnimation()
 })
-
 </script>
 
 <style lang="scss" scoped>