feat: 新增案例说明

2025-02-24 16:22:57 +08:00 · 2022-10-16 20:46:01 +08:00 · 2022-10-16 20:46:01 +08:00 · 30351cecb5
commit 30351cecb5
parent 4f6757fff2
3 changed files with 233 additions and 64 deletions
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts
+++ b/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
+  }
+]
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
@ -1,4 +1,15 @@
 <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">
@ -8,26 +19,15 @@
        <p class="go-ml-4"><n-code :code="(targetData.events || {})[eventName]" language="typescript"></n-code></p>
        <p>}<span>,</span></p>
      </div>
-    <template #footer>
-      <n-space justify="end">
-        <n-button type="primary" tertiary size="small" @click="showModal = true">
-          <template #icon>
-            <n-icon>
-              <filter-edit-icon />
-            </n-icon>
-          </template>
-          编辑
-        </n-button>
-      </n-space>
-    </template>
    </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-text>事件编辑器（配合源码使用）</n-text>
        </n-space>
      </template>
      <template #header-extra> </template>
@ -36,7 +36,7 @@
          <n-tabs v-model:value="editTab" type="card" tab-style="min-width: 100px;">
            <!-- 提示 -->
            <template #suffix>
-              <n-text class="tab-tip" type="warning">{{ EventLifeTip[editTab] }}</n-text>
+              <n-text class="tab-tip" type="warning">tips: {{ EventLifeTip[editTab] }}</n-text>
            </template>
            <n-tab-pane
              v-for="(eventName, index) in EventLife"
@ -67,15 +67,15 @@
            <!-- 验证结果 -->
            <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']">
+                <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-collapse-item title="错误函数" :name="1">
                      <n-text depth="3">{{ error.errorFn || '暂无' }}</n-text>
                    </n-collapse-item>
-                    <n-collapse-item title="错误信息" name="2">
+                    <n-collapse-item title="错误信息" :name="2">
                      <n-text depth="3">{{ error.name || '暂无' }}</n-text>
                    </n-collapse-item>
-                    <n-collapse-item title="堆栈信息" name="3">
+                    <n-collapse-item title="堆栈信息" :name="3">
                      <n-text depth="3">{{ error.message || '暂无' }}</n-text>
                    </n-collapse-item>
                  </template>
@ -85,24 +85,24 @@
            <!-- 辅助说明 -->
            <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-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-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-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-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>
@ -110,21 +110,19 @@
                </n-collapse>
              </n-scrollbar>
            </n-tab-pane>
-            <!-- 远程加载 -->
-            <n-tab-pane tab="远程加载" name="3">
+            <!-- 介绍案例 -->
+            <n-tab-pane tab="介绍案例" name="3">
              <n-scrollbar trigger="none" style="max-height: 505px">
-                <div class="go-px-3">
-                  浏览器是否兼容 「importmap」:
-                  <n-tag :bordered="false" :type="hTMLScriptElement.supports('importmap') ? 'primary' : 'error'">
-                    {{ hTMLScriptElement.supports('importmap') ? '√' : '×' }}
-                  </n-tag>
-                  <n-code
-                    :code="`
-                    //HTMLScriptElement.supports('importmap')
-const react = await import('https://cdn.skypack.dev/react@17.0.1')`"
-                    language="typescript"
-                  ></n-code>
-                </div>
+                <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>
@ -157,6 +155,7 @@ const react = await import('https://cdn.skypack.dev/react@17.0.1')`"
 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'
@ -164,9 +163,7 @@ import { CreateComponentType, EventLife } from '@/packages/index.d'
 import { Script } from 'vm'

 const { targetData, chartEditStore } = useTargetData()
-const { DocumentTextIcon, ChevronDownIcon } = icon.ionicons5
-const { FilterEditIcon } = icon.carbon
-const hTMLScriptElement = HTMLScriptElement as any
+const { DocumentTextIcon, ChevronDownIcon, PencilIcon } = icon.ionicons5

 const EventLifeName = {
  [EventLife.BEFORE_MOUNT]: '渲染之前',
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue
@ -1,29 +1,24 @@
 <template>
  <!-- 事件配置 -->
-  <n-collapse class="go-mt-3" arrow-placement="right" default-expanded-names="1" accordion>
+  <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">
-      <n-space class="go-event go-mt-3" :size="18" vertical>
-        <chart-event-monaco-editor></chart-event-monaco-editor>
-      </n-space>
+    <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()
-</script>

-<style lang="scss" scoped>
-@include deep() {
-  .go-event .n-card__content {
-    max-height: 60vh;
-    overflow-y: auto;
-  }
-}
-</style>
+const { targetData } = useTargetData()
+const showModal = ref(false)
+</script>