Pre Merge pull request !84 from liaohaicheng/dev

src/hooks/index.ts

@@ -2,3 +2,4 @@ export * from '@/hooks/useTheme.hook'
 export * from '@/hooks/usePreviewScale.hook'
 export * from '@/hooks/useCode.hook'
 export * from '@/hooks/useChartDataFetch.hook'
+export * from '@/hooks/useLifeHandler.hook'

src/hooks/useLifeHandler.hook.ts

@@ -0,0 +1,47 @@
+import { CreateComponentType, EventLife } from '@/packages/index.d'
+import * as echarts from 'echarts'
+
+// 所有图表组件集合对象
+const components: { [K in string]?: any } = {}
+
+// 项目提供的npm 包变量
+export const npmPkgs = { echarts }
+
+export const useLifeHandler = (chartConfig: CreateComponentType) => {
+  const events = chartConfig.events || {}
+  // 生成生命周期事件
+  const lifeEvents = {
+    [EventLife.BEFORE_MOUNT](e: any) {
+      // 存储组件
+      components[chartConfig.id] = e.component
+      const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim()
+      generateFunc(fnStr, e)
+    },
+    [EventLife.MOUNTED](e: any) {
+      const fnStr = (events[EventLife.MOUNTED] || '').trim()
+      generateFunc(fnStr, e)
+    }
+  }
+  return lifeEvents
+}
+
+/**
+ *
+ * @param fnStr 用户方法体代码
+ * @param e 执行生命周期的动态组件实例
+ */
+function generateFunc(fnStr: string, e: any) {
+  try {
+    // npmPkgs 便于拷贝 echarts 示例时设置option 的formatter等相关内容
+    Function(`
+      "use strict";
+      return (
+        async function(e, components, node_modules){
+          const {${Object.keys(npmPkgs).join()}} = node_modules;
+          ${fnStr}
+        }
+      )`)().bind(e?.component)(e, components, npmPkgs)
+  } catch (error) {
+    console.error(error)
+  }
+}

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

@@ -3,12 +3,6 @@
   <global-setting :optionData="optionData"></global-setting>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index + 1}`" :expanded="true">
     <SettingItemBox name="图形">
-      <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="item.itemStyle.color = null"> 恢复默认 </n-button>
-      </SettingItem>
       <SettingItem name="宽度">
         <n-input-number
           v-model:value="item.barWidth"

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

@@ -3,12 +3,6 @@
   <global-setting :optionData="optionData"></global-setting>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`柱状图-${index+1}`" :expanded="true">
     <SettingItemBox name="图形">
-      <SettingItem name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="item.itemStyle.color"></n-color-picker>
-      </SettingItem>
-      <SettingItem>
-        <n-button size="small" @click="item.itemStyle.color = null">恢复默认</n-button>
-      </SettingItem>
       <SettingItem name="宽度">
           <n-input-number
           v-model:value="item.barWidth"

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

@@ -3,9 +3,6 @@
   <global-setting :optionData="optionData"></global-setting>
   <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`折线图-${index + 1}`" :expanded="true">
     <SettingItemBox name="线条">
-      <setting-item name="颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="item.lineStyle.color"></n-color-picker>
-      </setting-item>
       <SettingItem name="宽度">
         <n-input-number
           v-model:value="item.lineStyle.width"

src/packages/components/Informations/Texts/TextBarrage/config.ts

@@ -0,0 +1,42 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TextBarrageConfig } from './index'
+import { chartInitConfig } from '@/settings/designSetting'
+import cloneDeep from 'lodash/cloneDeep'
+
+export enum FontWeightEnum {
+  NORMAL = '常规',
+  BOLD = '加粗',
+}
+
+export const FontWeightObject = {
+  [FontWeightEnum.NORMAL]: 'normal',
+  [FontWeightEnum.BOLD]: 'bold',
+}
+
+export const option = {
+  
+  dataset: '让数字化看得见',
+  fontSize: 32,
+  fontColor: '#ffffff',
+  fontWeight: 'normal',
+  // 字间距
+  letterSpacing: 5,
+  //阴影
+  showShadow:  true,
+  boxShadow: 'none',
+  hShadow: 0,
+  vShadow: 0,
+  blurShadow: 8,
+  colorShadow: '#0075ff',
+  //动画
+  animationTime: 0,
+  animationSpeed: 50,
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = TextBarrageConfig.key
+  public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: -1 }
+  public chartConfig = cloneDeep(TextBarrageConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Informations/Texts/TextBarrage/config.vue

@@ -0,0 +1,89 @@
+<template>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="文字" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="文字">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="字体粗细">
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
+      </setting-item>
+
+      <setting-item name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="阴影">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="optionData.showShadow" size="small" />
+          <n-text>展示阴影</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colorShadow"></n-color-picker
+      ></setting-item>
+      <setting-item name="x">
+        <n-input-number v-model:value="optionData.hShadow" size="small"></n-input-number
+      ></setting-item>
+      <setting-item name="y">
+        <n-input-number v-model:value="optionData.vShadow" size="small"></n-input-number
+      ></setting-item>
+      <setting-item name="模糊">
+        <n-input-number v-model:value="optionData.blurShadow" size="small"></n-input-number
+      ></setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="动画">
+      <setting-item name="动画速度">
+        <n-input-number
+          v-model:value="optionData.animationSpeed"
+          size="small"
+          placeholder="动画速度"
+          :min="0"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="动画间隔">
+        <n-input-number
+          v-model:value="optionData.animationTime"
+          size="small"
+          placeholder="动画间隔"
+          :min="0"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, FontWeightEnum, FontWeightObject } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL]
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD]
+  }
+]
+</script>

src/packages/components/Informations/Texts/TextBarrage/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/informations/text_barrage.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const TextBarrageConfig: ConfigType = {
+  key: 'TextBarrage',
+  chartKey: 'VTextBarrage',
+  conKey: 'VCTextBarrage',
+  title: '弹幕文字',
+  category: ChatCategoryEnum.TEXT,
+  categoryName: ChatCategoryEnumName.TEXT,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  image
+}

src/packages/components/Informations/Texts/TextBarrage/index.vue

@@ -0,0 +1,102 @@
+<template>
+  <div class="go-text-box">
+    <div class="content">
+      <span>
+        {{ option.dataset }}
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch, computed, ref } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { option as configOption } from './config'
+import { values } from 'lodash'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType & typeof option>,
+    required: true
+  }
+})
+
+const { w } = toRefs(props.chartConfig.attr)
+
+const { fontColor, fontSize, letterSpacing, fontWeight, animationTime, animationSpeed, boxShadow } = toRefs(
+  props.chartConfig.option
+)
+
+const option = shallowReactive({
+  dataset: configOption.dataset
+})
+
+// 手动更新
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: any) => {
+    option.dataset = newData
+  },
+  {
+    immediate: true,
+    deep: false
+  }
+)
+
+//阴影
+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}`
+      } else {
+        boxShadow.value = 'none'
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+const transitionDuration = computed(() => {
+  return Math.floor((w.value as any) / (animationSpeed.value as any))
+})
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  option.dataset = newData
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('text-box') {
+  display: flex;
+  align-items: center;
+  .content {
+    width: 100%;
+    color: v-bind('fontColor');
+    font-size: v-bind('fontSize + "px"');
+    letter-spacing: v-bind('letterSpacing + "px"');
+    font-weight: v-bind('fontWeight');
+    text-shadow: v-bind('boxShadow');
+    position: absolute;
+    animation: barrage v-bind('transitionDuration + "s"') linear v-bind('animationTime + "s"') infinite;
+  }
+  @keyframes barrage {
+    from {
+      left: 100%;
+      transform: translateX(0);
+    }
+    to {
+      left: 0;
+      transform: translateX(-100%);
+    }
+  }
+}
+</style>

src/packages/components/Informations/Texts/index.ts

@@ -1,4 +1,5 @@
 import { TextCommonConfig } from './TextCommon/index'
+import { TextBarrageConfig } from './TextBarrage/index'
 import { TextGradientConfig } from './TextGradient/index'
 
-export default [TextCommonConfig, TextGradientConfig]
+export default [TextCommonConfig, TextGradientConfig, TextBarrageConfig]

src/packages/index.d.ts

@@ -90,6 +90,14 @@ export const BlendModeEnumList = [
   { label: '亮度', value: 'luminosity' }
 ]
 
+// vue3 生命周期事件
+export enum EventLife {
+  // 渲染之后
+  MOUNTED = 'vnodeMounted',
+  // 渲染之前
+  BEFORE_MOUNT = 'vnodeBeforeMount',
+}
+
 // 组件实例类
 export interface PublicConfigType {
   id: string
@@ -115,12 +123,15 @@ export interface PublicConfigType {
   }
   filter?: string
   status: StatusType
+  events?: {
+    [K in EventLife]?: string
+  }
 }
 
 export interface CreateComponentType extends PublicConfigType, requestConfig {
   key: string
   chartConfig: ConfigType
-  option: GlobalThemeJsonType
+  option: GlobalThemeJsonType,
 }
 
 // 组件成组实例类

src/packages/public/publicConfig.ts

@@ -81,6 +81,8 @@ export class PublicConfigClass implements PublicConfigType {
   public request = cloneDeep(requestConfig)
   // 数据过滤
   public filter = undefined
+  // 事件
+  public events = undefined
 }
 
 // 多选成组类

src/settings/animations/index.ts

@@ -11,7 +11,6 @@ export const animations = [
       { label: '放大晃动缩小', value: 'tada' },
       { label: '扇形摇摆', value: 'wobble' },
       { label: '左右上下晃动', value: 'jello' },
-      { label: 'Y轴旋转', value: 'flip' }
     ]
   },
   {

src/views/chart/ContentCharts/components/ChartsItemBox/index.vue

@@ -116,7 +116,8 @@ $centerHeight: 100px;
       height: $centerHeight;
       overflow: hidden;
       .list-img {
-        height: 100%;
+        height: 100px;
+        width: 140px;
         border-radius: 6px;
         @extend .go-transition;
       }

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts

@@ -0,0 +1,177 @@
+// 获取实例
+const eTemplateString = `
+console.log(e)
+`
+// 获取全局 echarts 实例
+const echartsTemplateString = `
+console.log(echarts)
+`
+
+// 获取当前组件图表集合
+const componentsTemplateString = `
+console.log(components)
+`
+
+// 获取 nodeModules 实例
+const nodeModulesTemplateString = `
+console.log(node_modules)
+`
+
+// 异步引入
+const importTemplateString = `
+await import('https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/lodash.js/4.17.21/lodash.js')
+
+// lodash 默认赋值给 "_"
+console.log('isEqual', _.isEqual(['1'], ['1']))
+`
+
+// 修改图表 tooltip
+const tooltipTemplateString =
+  `
+// 获取echart实例
+const chart = this.refs.vChartRef.chart
+
+// 图表设置tooltip
+chart.setOption({
+  tooltip: {
+    trigger: 'axis', //item
+    enterable: true, 
+    formatter (params) {
+      return` +
+  '`' +
+  `
+        <div>
+          <img src="https://portrait.gitee.com/uploads/avatars/user/1654/4964818_MTrun_1653229420.png!avatar30">
+          <b><a href="https://gitee.com/dromara/go-view">《这是一个自定义的tooltip》</a></b>
+        <div>
+        <div style='border-radius:35px;color:#666'>
+        ` +
+  '$' +
+  `{Object.entries(params[0].value).map(kv => ` +
+  '`' +
+  `<div>` +
+  '$' +
+  `{kv[0]}:` +
+  '$' +
+  `{kv[1]}</div>` +
+  '`' +
+  `).join('')}
+        </div>
+      ` +
+  '`;' +
+  `
+    },
+  }
+})
+`
+
+// 添加【轮播列表】样式
+const addStyleString =
+  `
+// 组件样式作用域标识
+const scoped = this.subTree.scopeId
+function loadStyleString(css){
+	let style = document.createElement('style')
+	style.type = 'text/css'
+	style.appendChild(document.createTextNode(css))
+	let head = document.getElementsByTagName('head')[0]
+	head.appendChild(style)
+}
+loadStyleString(` +
+  '`' +
+  `
+.dv-scroll-board[` +
+  '$' +
+  `{scoped}] {
+  position: relative;
+  overflow: hidden;
+}
+.dv-scroll-board[` +
+  '$' +
+  `{scoped}]::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: -20%;
+  left: -100%;
+  width: 550px;
+  height: 60px;
+  transform: rotate(-45deg);
+  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0));
+  animation: cross 2s infinite;
+}
+@keyframes cross{
+  to{
+    top: 80%;
+    left: 100%;
+    transform: rotate(-45deg);
+  }
+}
+` +
+  '`' +
+  `)
+`
+
+// 修改地图原点大小
+const editMapPointString = `
+const chart = this.refs.vChartRef.chart
+// 定义地图原点大小 同理可自定义标签等等内容
+this.props.chartConfig.option.series[0].symbolSize = (val) => {
+  return Math.sqrt(val[2]) / 3;
+}
+this.setupState.vEchartsSetOption();
+let i = 0; // 当前轮播索引
+const len = 3; // 轮播部分提示
+(function showTips() {
+  const action = (type, dataIndex) => {
+    chart.dispatchAction({
+      type,
+      dataIndex,
+      seriesIndex: 0,
+    });
+  }
+  setInterval(() => {
+    action("downplay", i);
+    action("hideTip", i);
+    if (i === len) i = 0;
+    i++;
+    action("highlight", i);
+    action("showTip", i);
+  }, 2000);
+})()
+`
+
+export const templateList = [
+  {
+    description: '获取当前组件实例',
+    code: eTemplateString
+  },
+  {
+    description: '获取全局 echarts 实例',
+    code: echartsTemplateString
+  },
+  {
+    description: '获取组件图表集合',
+    code: componentsTemplateString
+  },
+  {
+    description: '获取 nodeModules 实例',
+    code: nodeModulesTemplateString
+  },
+  {
+    description: '获取远程 CDN 库',
+    code: importTemplateString
+  },
+  {
+    description: '修改图表 tooltip',
+    code: tooltipTemplateString
+  },
+  {
+    description: '添加【轮播列表】样式',
+    code: addStyleString
+  },
+  {
+    description: '修改【地图】圆点，新增提示自动轮播',
+    code: editMapPointString
+  }
+]

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts

@@ -0,0 +1,3 @@
+import  ChartEventMonacoEditor from './index.vue'
+
+export { ChartEventMonacoEditor }

src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue

@@ -0,0 +1,285 @@
+<template>
+  <n-collapse-item title="高级事件配置" name="2">
+    <template #header-extra>
+      <n-button type="primary" tertiary size="small" @click.stop="showModal = true">
+        <template #icon>
+          <n-icon>
+            <pencil-icon />
+          </n-icon>
+        </template>
+        编辑
+      </n-button>
+    </template>
+    <n-card>
+      <!-- 函数体 -->
+      <div v-for="eventName in EventLife" :key="eventName">
+        <p>
+          <span class="func-keyword">async {{ eventName }}</span> (e, components, echarts, node_modules) {
+        </p>
+        <p class="go-ml-4"><n-code :code="(targetData.events || {})[eventName]" language="typescript"></n-code></p>
+        <p>}<span>,</span></p>
+      </div>
+    </n-card>
+  </n-collapse-item>
+
+  <!-- 弹窗 -->
+  <n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false">
+    <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1200px; height: 700px">
+      <template #header>
+        <n-space>
+          <n-text>高级事件编辑器（配合源码使用）</n-text>
+        </n-space>
+      </template>
+      <template #header-extra> </template>
+      <n-layout has-sider sider-placement="right">
+        <n-layout style="height: 580px; padding-right: 20px">
+          <n-tabs v-model:value="editTab" type="card" tab-style="min-width: 100px;">
+            <!-- 提示 -->
+            <template #suffix>
+              <n-text class="tab-tip" type="warning">tips: {{ EventLifeTip[editTab] }}</n-text>
+            </template>
+            <n-tab-pane
+              v-for="(eventName, index) in EventLife"
+              :key="index"
+              :tab="`${EventLifeName[eventName]}-${eventName}`"
+              :name="eventName"
+            >
+              <!-- 函数名称 -->
+              <p class="go-pl-3">
+                <span class="func-keyword">async function &nbsp;&nbsp;</span>
+                <span class="func-keyNameWord">{{ eventName }}(e, components, echarts, node_modules)&nbsp;&nbsp;{</span>
+              </p>
+              <!-- 编辑主体 -->
+              <monaco-editor v-model:modelValue="events[eventName]" height="480px" language="javascript" />
+              <!-- 函数结束 -->
+              <p class="go-pl-3 func-keyNameWord">}</p>
+            </n-tab-pane>
+          </n-tabs>
+        </n-layout>
+        <n-layout-sider
+          :collapsed-width="14"
+          :width="340"
+          show-trigger="bar"
+          collapse-mode="transform"
+          content-style="padding: 12px 12px 0px 12px;margin-left: 3px;"
+        >
+          <n-tabs default-value="1" justify-content="space-evenly" type="segment">
+            <!-- 验证结果 -->
+            <n-tab-pane tab="验证结果" name="1" size="small">
+              <n-scrollbar trigger="none" style="max-height: 505px">
+                <n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2, 3]">
+                  <template v-for="error in [validEvents()]" :key="error">
+                    <n-collapse-item title="错误函数" :name="1">
+                      <n-text depth="3">{{ error.errorFn || '暂无' }}</n-text>
+                    </n-collapse-item>
+                    <n-collapse-item title="错误信息" :name="2">
+                      <n-text depth="3">{{ error.name || '暂无' }}</n-text>
+                    </n-collapse-item>
+                    <n-collapse-item title="堆栈信息" :name="3">
+                      <n-text depth="3">{{ error.message || '暂无' }}</n-text>
+                    </n-collapse-item>
+                  </template>
+                </n-collapse>
+              </n-scrollbar>
+            </n-tab-pane>
+            <!-- 辅助说明 -->
+            <n-tab-pane tab="变量说明" name="2">
+              <n-scrollbar trigger="none" style="max-height: 505px">
+                <n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2, 3, 4]">
+                  <n-collapse-item title="e" :name="1">
+                    <n-text depth="3">触发对应生命周期事件时接收的参数</n-text>
+                  </n-collapse-item>
+                  <n-collapse-item title="this" :name="2">
+                    <n-text depth="3">图表组件实例</n-text>
+                    <br />
+                    <n-tag class="go-m-1" v-for="prop in ['refs', 'setupState', 'ctx', 'props', '...']" :key="prop">{{
+                      prop
+                    }}</n-tag>
+                  </n-collapse-item>
+                  <n-collapse-item title="components" :name="3">
+                    <n-text depth="3"
+                      >当前大屏内所有组件的集合id 图表组件中的配置id，可以获取其他图表组件进行控制</n-text
+                    >
+                    <n-code :code="`{\n  [id]: component\n}`" language="typescript"></n-code>
+                  </n-collapse-item>
+                  <n-collapse-item title="node_modules" :name="4">
+                    <n-text depth="3">以下是内置在代码环境中可用的包变量</n-text>
+                    <br />
+                    <n-tag class="go-m-1" v-for="pkg in Object.keys(npmPkgs || {})" :key="pkg">{{ pkg }}</n-tag>
+                  </n-collapse-item>
+                </n-collapse>
+              </n-scrollbar>
+            </n-tab-pane>
+            <!-- 介绍案例 -->
+            <n-tab-pane tab="介绍案例" name="3">
+              <n-scrollbar trigger="none" style="max-height: 505px">
+                <n-collapse arrow-placement="right">
+                  <n-collapse-item
+                    v-for="(item, index) in templateList"
+                    :key="index"
+                    :title="`案例${index + 1}：${item.description}`"
+                    :name="index"
+                  >
+                    <n-code :code="item.code" language="typescript"></n-code>
+                  </n-collapse-item>
+                </n-collapse>
+              </n-scrollbar>
+            </n-tab-pane>
+          </n-tabs>
+        </n-layout-sider>
+      </n-layout>
+
+      <template #action>
+        <n-space justify="space-between">
+          <div class="go-flex-items-center">
+            <n-tag :bordered="false" type="primary">
+              <template #icon>
+                <n-icon :component="DocumentTextIcon" />
+              </template>
+              提示
+            </n-tag>
+            <n-text class="go-ml-2" depth="2">通过提供的参数可为图表增加定制化的tooltip、交互事件等等</n-text>
+          </div>
+
+          <n-space>
+            <n-button size="medium" @click="closeEvents">取消</n-button>
+            <n-button size="medium" type="primary" @click="saveEvents">保存</n-button>
+          </n-space>
+        </n-space>
+      </template>
+    </n-card>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch, toRefs, toRaw } from 'vue'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { templateList } from './importTemplate'
+import { npmPkgs } from '@/hooks'
+import { icon } from '@/plugins'
+import { goDialog, toString } from '@/utils'
+import { CreateComponentType, EventLife } from '@/packages/index.d'
+import { Script } from 'vm'
+
+const { targetData, chartEditStore } = useTargetData()
+const { DocumentTextIcon, ChevronDownIcon, PencilIcon } = icon.ionicons5
+
+const EventLifeName = {
+  [EventLife.BEFORE_MOUNT]: '渲染之前',
+  [EventLife.MOUNTED]: '渲染之后'
+}
+
+const EventLifeTip = {
+  [EventLife.BEFORE_MOUNT]: '此时组件 DOM 还未存在',
+  [EventLife.MOUNTED]: '此时组件 DOM 已经存在'
+}
+
+// 受控弹窗
+const showModal = ref(false)
+// 编辑区域控制
+const editTab = ref(EventLife.MOUNTED)
+// events 函数模板
+let events = ref({ ...targetData.value.events })
+// 事件错误标识
+const errorFlag = ref(false)
+
+// 验证语法
+const validEvents = () => {
+  let errorFn = ''
+  let message = ''
+  let name = ''
+
+  errorFlag.value = Object.entries(events.value).every(([eventName, str]) => {
+    try {
+      // 支持await，验证语法
+      const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
+      new AsyncFunction(str)
+      return true
+    } catch (error: any) {
+      message = error.message
+      name = error.name
+      errorFn = eventName
+      return false
+    }
+  })
+  return {
+    errorFn,
+    message,
+    name
+  }
+}
+
+// 关闭事件
+const closeEvents = () => {
+  showModal.value = false
+}
+
+// 新增事件
+const saveEvents = () => {
+  if (validEvents().errorFn) {
+    window['$message'].error('事件函数错误，无法进行保存')
+    return
+  }
+  if (Object.values(events.value).join('').trim() === '') {
+    // 清空事件
+    targetData.value.events = undefined
+  } else {
+    targetData.value.events = { ...events.value }
+  }
+  closeEvents()
+}
+
+watch(
+  () => showModal.value,
+  (newData: boolean) => {
+    if (newData) {
+      events.value = { ...targetData.value.events }
+    }
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+/* 外层也要使用 */
+.func-keyword {
+  color: #b478cf;
+}
+
+@include go('chart-data-monaco-editor') {
+  .func-keyNameWord {
+    color: #70c0e8;
+  }
+  .tab-tip {
+    font-size: 12px;
+  }
+  &.n-card.n-modal,
+  .n-card {
+    @extend .go-background-filter;
+  }
+}
+@include deep() {
+  .n-layout,
+  .n-layout-sider {
+    background-color: transparent;
+  }
+  .go-editor-area {
+    max-height: 530px;
+  }
+  .checkbox--hidden:checked {
+    & + label {
+      .n-icon {
+        transition: all 0.3s;
+        transform: rotate(180deg);
+      }
+    }
+    & ~ .go-editor-area {
+      display: none;
+    }
+  }
+  // 优化代码换行
+  .n-code > pre {
+    white-space: break-spaces;
+  }
+}
+</style>

src/views/chart/ContentConfigurations/components/ChartEvent/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <!-- 事件配置 -->
+  <n-collapse class="go-mt-3" arrow-placement="right" :default-expanded-names="['1', '2']">
+    <n-text depth="3">
+      组件 id：
+      <n-text>{{ targetData.id }}</n-text>
+    </n-text>
+    <n-collapse-item title="基础事件配置" name="1">
+      <div class="go-event">
+        <n-text depth="3"> 【单击、双击、移入、移出】尽情期待！ </n-text>
+      </div>
+    </n-collapse-item>
+    <chart-event-monaco-editor></chart-event-monaco-editor>
+  </n-collapse>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { ChartEventMonacoEditor } from './components/ChartEventMonacoEditor'
+import { useTargetData } from '../hooks/useTargetData.hook'
+
+const { targetData } = useTargetData()
+const showModal = ref(false)
+</script>

src/views/chart/ContentConfigurations/index.d.ts

@@ -3,4 +3,5 @@ export enum TabsEnum {
   CHART_SETTING = 'chartSetting',
   CHART_ANIMATION = 'chartAnimation',
   CHART_DATA = 'chartData',
+  CHART_EVENT = 'chartEvent'
 }

src/views/chart/ContentConfigurations/index.vue

@@ -75,12 +75,13 @@ const { getDetails } = toRefs(useChartLayoutStore())
 const { setItem } = useChartLayoutStore()
 const chartEditStore = useChartEditStore()
 
-const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon } = icon.ionicons5
+const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = icon.ionicons5
 
 const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
 const CanvasPage = loadAsyncComponent(() => import('./components/CanvasPage/index.vue'))
 const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
 const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
+const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'))
 const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
 
 const collapsed = ref<boolean>(getDetails.value)
@@ -148,6 +149,12 @@ const chartsTabList = [
     title: '数据',
     icon: FlashIcon,
     render: ChartData
+  },
+  {
+    key: TabsEnum.CHART_EVENT,
+    title: '事件',
+    icon: RocketIcon,
+    render: ChartEvent
   }
 ]
 </script>

src/views/preview/components/PreviewRenderGroup/index.vue

@@ -18,6 +18,7 @@
       :themeSetting="themeSetting"
       :themeColor="themeColor"
       :style="{ ...getSizeStyle(item.attr) }"
+      v-on="useLifeHandler(item)"
     ></component>
   </div>
 </template>
@@ -27,7 +28,7 @@ import { PropType } from 'vue'
 import { CreateComponentGroupType } from '@/packages/index.d'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
-
+import { useLifeHandler } from '@/hooks'
 const props = defineProps({
   groupData: {
     type: Object as PropType<CreateComponentGroupType>,

src/views/preview/components/PreviewRenderList/index.vue

@@ -29,6 +29,7 @@
       :themeSetting="themeSetting"
       :themeColor="themeColor"
       :style="{ ...getSizeStyle(item.attr) }"
+      v-on="useLifeHandler(item)"
     ></component>
   </div>
 </template>
@@ -41,7 +42,7 @@ import { CreateComponentGroupType } from '@/packages/index.d'
 import { chartColors } from '@/settings/chartThemes/index'
 import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
 import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
-
+import { useLifeHandler } from '@/hooks'
 const props = defineProps({
   localStorageInfo: {
     type: Object as PropType<ChartEditStorageType>,