修复贴花显示切换导致主题渲染丢失, 新增渲染回调函数

src/components/RayChart/index.tsx

@@ -116,8 +116,22 @@ const RayChart = defineComponent({
       type: Object,
       default: () => ({}),
     },
-    renderSuccess: {
-      type: Function as PropType<AnyFunc>,
+    success: {
+      /**
+       *
+       * @param `chart` 实例
+       *
+       * 渲染成功回调函数
+       */
+      type: Function,
+      default: () => ({}),
+    },
+    error: {
+      /**
+       *
+       * 渲染失败回调函数
+       */
+      type: Function,
       default: () => ({}),
     },
     theme: {
@@ -212,17 +226,34 @@ const RayChart = defineComponent({
     /**
      *
      * 渲染 `echart`
+     *
+     * 缓存两个实例
+     *
+     * 直接使用响应式代理实例会出现诡异的问题, 例如 `legend` 点击时报错
      */
     const renderChart = (theme: ChartTheme) => {
       const element = rayChartRef.value as HTMLElement
       const options = useMergeOptions()
 
-      echartInstance = echarts.init(element, theme)
-      echartInstanceRef.value = echartInstance
+      try {
+        echartInstance = echarts.init(element, theme)
+        echartInstanceRef.value = echartInstance
 
-      options && echartInstance.setOption(options)
+        options && echartInstance.setOption(options)
+
+        props.success?.(echartInstance)
+      } catch (e) {
+        props.error?.()
+      }
     }
 
+    /**
+     *
+     * @param bool 渲染带有主题色的可视化图
+     * @returns void 0
+     *
+     * 区别自动跟随模板主题切换与指定主题切换
+     */
     const renderThemeChart = (bool?: boolean) => {
       if (props.autoChangeTheme) {
         bool ? renderChart('dark') : renderChart('')
@@ -253,8 +284,8 @@ const RayChart = defineComponent({
     }
 
     watch(
-      () => themeValue.value,
-      (theme) => {
+      () => [themeValue.value],
+      ([theme]) => {
         if (props.autoChangeTheme) {
           destroyChart()
 
@@ -268,7 +299,15 @@ const RayChart = defineComponent({
       () => {
         destroyChart()
 
-        renderThemeChart()
+        /**
+         *
+         * 贴花跟随主题渲染
+         *
+         * 自动跟随模板主题或者指定主题皆可
+         */
+        props.autoChangeTheme || props.theme
+          ? renderChart('dark')
+          : renderChart('')
       },
     )
 

src/views/echart/index.tsx

@@ -10,9 +10,7 @@ const Echart = defineComponent({
     const chartAria = ref(false)
 
     const baseOptions = {
-      legend: {
-        // data: ['日期'],
-      },
+      legend: {},
       tooltip: {},
       xAxis: {
         type: 'category',
@@ -33,6 +31,137 @@ const Echart = defineComponent({
         },
       ],
     }
+    const basePieOptions = {
+      title: {
+        text: 'Referer of a Website',
+        subtext: 'Fake Data',
+        left: 'center',
+      },
+      tooltip: {
+        trigger: 'item',
+      },
+      legend: {
+        orient: 'vertical',
+        left: 'left',
+      },
+      series: [
+        {
+          name: 'Access From',
+          type: 'pie',
+          radius: '50%',
+          data: [
+            { value: 1048, name: 'Search Engine' },
+            { value: 735, name: 'Direct' },
+            { value: 580, name: 'Email' },
+            { value: 484, name: 'Union Ads' },
+            { value: 300, name: 'Video Ads' },
+          ],
+          emphasis: {
+            itemStyle: {
+              shadowBlur: 10,
+              shadowOffsetX: 0,
+              shadowColor: 'rgba(0, 0, 0, 0.5)',
+            },
+          },
+        },
+      ],
+    }
+    const baseLineOptions = {
+      title: {
+        text: 'Stacked Area Chart',
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985',
+          },
+        },
+      },
+      legend: {
+        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {},
+        },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '3%',
+        containLabel: true,
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        },
+      ],
+      yAxis: [
+        {
+          type: 'value',
+        },
+      ],
+      series: [
+        {
+          name: 'Email',
+          type: 'line',
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series',
+          },
+          data: [120, 132, 101, 134, 90, 230, 210],
+        },
+        {
+          name: 'Union Ads',
+          type: 'line',
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series',
+          },
+          data: [220, 182, 191, 234, 290, 330, 310],
+        },
+        {
+          name: 'Video Ads',
+          type: 'line',
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series',
+          },
+          data: [150, 232, 201, 154, 190, 330, 410],
+        },
+        {
+          name: 'Direct',
+          type: 'line',
+          stack: 'Total',
+          areaStyle: {},
+          emphasis: {
+            focus: 'series',
+          },
+          data: [320, 332, 301, 334, 390, 330, 320],
+        },
+        {
+          name: 'Search Engine',
+          type: 'line',
+          stack: 'Total',
+          label: {
+            show: true,
+            position: 'top',
+          },
+          areaStyle: {},
+          emphasis: {
+            focus: 'series',
+          },
+          data: [820, 932, 901, 934, 1290, 1330, 1320],
+        },
+      ],
+    }
 
     const handleLoadingShow = (bool: boolean) => {
       if (baseChartRef.value) {
@@ -46,6 +175,16 @@ const Echart = defineComponent({
       chartAria.value = bool
     }
 
+    const handleChartRenderSuccess = (chart: EChartsInstance) => {
+      window.$notification.info({
+        title: '可视化图渲染成功回调函数',
+        content: '可视化图渲染成功, 并且返回了当前可视化图实例',
+        duration: 5 * 1000,
+      })
+
+      console.log(chart)
+    }
+
     return {
       baseOptions,
       baseChartRef,
@@ -53,6 +192,9 @@ const Echart = defineComponent({
       handleLoadingShow,
       chartAria,
       handleAriaShow,
+      handleChartRenderSuccess,
+      basePieOptions,
+      baseLineOptions,
     }
   },
   render() {
@@ -69,9 +211,21 @@ const Echart = defineComponent({
             <RayChart options={this.baseOptions} />
           </div>
         </NCard>
+        <NCard title="渲染成功后运行回调函数">
+          <div class="chart--container">
+            <RayChart
+              options={this.basePieOptions}
+              success={this.handleChartRenderSuccess.bind(this)}
+            />
+          </div>
+        </NCard>
         <NCard title="能跟随主题切换的可视化图">
           <div class="chart--container">
-            <RayChart autoChangeTheme options={this.baseOptions} />
+            <RayChart
+              autoChangeTheme
+              options={this.baseLineOptions}
+              showAria={this.chartAria}
+            />
           </div>
         </NCard>
         <NCard title="不跟随主题切换的暗色主题可视化图">