feat(packages/external): 重写部分柱状图和部分折线图，新增开启关闭动画效果和全屏效果

@@ -5,11 +5,10 @@ import cloneDeep from 'lodash/cloneDeep'
 import dataJson from './data.json'
 
 export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
-
 // 其它配置项比如新增（动画）
 const otherConfig = {
   // 轮播动画
-  isCarousel: false,
+  isCarousel: false
 }
 export const seriesItem = {
   type: 'bar',
@@ -35,7 +34,7 @@ export const option = {
       type: 'shadow'
     }
   },
-xAxis: {
+  xAxis: {
     show: true,
     type: 'category'
   },

@@ -11,7 +11,8 @@
     autoresize
     @mouseover="handleHighlight"
     @mouseout="handleDownplay"
-  ></v-chart>
+  >
+  </v-chart>
 </template>
 
 <script setup lang="ts">
@@ -30,6 +31,7 @@ import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 import dataJson from './data.json'
+import { isFullScreen } from '../../utls/isFullScreen'
 
 const props = defineProps({
   themeSetting: {
@@ -56,6 +58,28 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
+const toolBoxOption = {
+  show: true,
+  right: 20,
+  feature: {
+    myFullButton: {
+      show: true,
+      title: '全屏查看',
+      icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
+      onclick: () => {
+        const getEchartDom = vChartRef.value?.getDom()
+        const domName = document.getElementById(getEchartDom.id) as any
+        const htmlName = document.querySelector('html') as any
+        isFullScreen(domName, htmlName)
+      }
+    }
+  }
+}
+props.chartConfig.option = {
+  ...props.chartConfig.option,
+  ...{ toolbox: toolBoxOption }
+}
+
 // dataset 无法变更条数的补丁
 watch(
   () => props.chartConfig.option.dataset,
@@ -161,7 +185,6 @@ const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (n
 
 onMounted(() => {
   seriesDataMaxLength = dataJson.source.length
-  console.log(props.chartConfig.option.isCarousel)
   if (props.chartConfig.option.isCarousel) {
     addPieInterval(undefined, true)
   }

@@ -30,6 +30,7 @@ import { isPreview } from '@/utils'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import isObject from 'lodash/isObject'
 import dataJson from './data.json'
+import { isFullScreen } from '../../utls/isFullScreen'
 
 const props = defineProps({
   themeSetting: {
@@ -56,6 +57,28 @@ const option = computed(() => {
   return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
 })
 
+const toolBoxOption = {
+  show: true,
+  right: 20,
+  feature: {
+    myFullButton: {
+      show: true,
+      title: '全屏查看',
+      icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
+      onclick: () => {
+        const getEchartDom = vChartRef.value?.getDom()
+        const domName = document.getElementById(getEchartDom.id) as any
+        const htmlName = document.querySelector('html') as any
+        isFullScreen(domName, htmlName)
+      }
+    }
+  }
+}
+props.chartConfig.option = {
+  ...props.chartConfig.option,
+  ...{ toolbox: toolBoxOption }
+}
+
 // dataset 无法变更条数的补丁
 watch(
   () => props.chartConfig.option.dataset,

 <template>
-  <v-chart 
-  ref="vChartRef" 
-  :init-options="initOptions" 
-  :theme="themeColor" 
-  :option="option.value" 
-  :manual-update="isPreview()" 
-  autoresize
-  @mouseover="handleHighlight"
-  @mouseout="handleDownplay"
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option.value"
+    :manual-update="isPreview()"
+    autoresize
+    @mouseover="handleHighlight"
+    @mouseout="handleDownplay"
   ></v-chart>
 </template>
 
 <script setup lang="ts">
-import { reactive, watch, PropType,onMounted } from 'vue'
+import { reactive, watch, PropType, onMounted } from 'vue'
 import VChart from 'vue-echarts'
 import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
 import { use, graphic } from 'echarts/core'
@@ -24,8 +24,9 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore
 import { chartColorsSearch, defaultTheme } from '@/settings/chartThemes/index'
 import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
 import { useChartDataFetch } from '@/hooks'
-import { isPreview, colorGradientCustomMerge} from '@/utils'
+import { isPreview, colorGradientCustomMerge } from '@/utils'
 import dataJson from './data.json'
+import { isFullScreen } from '../../utls/isFullScreen'
 
 const props = defineProps({
   themeSetting: {
@@ -50,6 +51,27 @@ const chartEditStore = useChartEditStore()
 const option = reactive({
   value: {}
 })
+const toolBoxOption = {
+  show: true,
+  right: 20,
+  feature: {
+    myFullButton: {
+      show: true,
+      title: '全屏查看',
+      icon: 'path://M733.549304 0l116.434359 116.23452-226.402521 226.40252 57.053835 57.068109 226.459617-226.445342 120.616689 120.41685V0H733.549304zM689.513507 619.855586l-57.068108 57.068109 224.232847 224.232847-122.64362 122.843458h293.676657V729.838022l-114.007751 114.207588-224.190025-224.190024zM338.197775 404.144414l57.068109-57.068109L171.033037 122.843458 293.676657 0H0v294.161978l114.022025-114.207588 224.17575 224.190024zM347.076305 624.294851L120.616689 850.754468 0 730.323343v293.676657h294.161978l-116.420084-116.23452 226.40252-226.40252-57.068109-57.068109z',
+      onclick: () => {
+        const getEchartDom = vChartRef.value?.getDom()
+        const domName = document.getElementById(getEchartDom.id) as any
+        const htmlName = document.querySelector('html') as any
+        isFullScreen(domName, htmlName)
+      }
+    }
+  }
+}
+props.chartConfig.option = {
+  ...props.chartConfig.option,
+  ...{ toolbox: toolBoxOption }
+}
 
 // 渐变色处理
 watch(

+export const isFullScreen = (domName: any, htmlName: any) => {
+  const isFullScreen = document.fullscreenElement
+  const currentDatkTheme = htmlName.getAttribute('data-theme')
+
+  if (isFullScreen) {
+    console.log('退出全屏')
+    if (document.exitFullscreen) {
+      document.exitFullscreen()
+      domName.style.background = ''
+    } else if (document.msExitFullscreen) {
+      document.msExitFullscreen()
+      domName.style.background = ''
+    } else if (document.mozCancelFullScreen) {
+      document.mozCancelFullScreen()
+      domName.style.background = ''
+    } else if (document.webkitCancelFullScreen) {
+      document.webkitCancelFullScreen()
+      domName.style.background = ''
+    }
+  } else {
+    console.log('进入全屏')
+    if (domName.requestFullscreen) {
+      domName.requestFullscreen()
+      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+    } else if (domName.mozRequestFullScreen) {
+      domName.mozRequestFullScreen()
+      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+    } else if (domName.webkitRequestFullscreen) {
+      domName.webkitRequestFullscreen()
+      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+    } else if (domName.msRequestFullscreen) {
+      domName.msRequestFullscreen()
+      domName.style.background = currentDatkTheme === 'light' ? 'white' : '#18181c'
+    }
+  }
+}