From b8f387eb9905f6aa88e5c59e7f555ff8f315c5ba Mon Sep 17 00:00:00 2001
From: shaohuzhang1 <shaohu.zhang@fit2cloud.com>
Date: Fri, 13 Sep 2024 11:35:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=AF=E6=8C=81=E9=80=9A=E8=BF=87ech?=
 =?UTF-8?q?arts=5Frander=E6=A0=87=E7=AD=BE=20=E6=B8=B2=E6=9F=93=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/markdown/EchartsRander.vue | 76 ++++++++++++++++++++
 ui/src/components/markdown/MdRenderer.vue    | 44 +++++++++++-
 2 files changed, 118 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/components/markdown/EchartsRander.vue

diff --git a/ui/src/components/markdown/EchartsRander.vue b/ui/src/components/markdown/EchartsRander.vue
new file mode 100644
index 000000000..dffcc6de0
--- /dev/null
+++ b/ui/src/components/markdown/EchartsRander.vue
@@ -0,0 +1,76 @@
+<template>
+  <div ref="chartsRef" :style="style" v-resize="changeChartSize"></div>
+</template>
+<script lang="ts" setup>
+import { onMounted, nextTick, watch, onBeforeUnmount, ref } from 'vue'
+import * as echarts from 'echarts'
+const props = defineProps({
+  option: {
+    type: String,
+    required: true
+  }
+})
+const chartsRef = ref()
+
+const style = ref({
+  height: '220px',
+  width: '100%'
+})
+
+function initChart() {
+  if (chartsRef.value) {
+    let myChart = echarts?.getInstanceByDom(chartsRef.value)
+    if (myChart === null || myChart === undefined) {
+      myChart = echarts.init(chartsRef.value)
+    }
+    const option = JSON.parse(props.option)
+    if (option.actionType === 'EVAL') {
+      myChart.setOption(evalParseOption(option), true)
+    } else {
+      myChart.setOption(jsonParseOption(option), true)
+    }
+  }
+}
+function jsonParseOption(option: any) {
+  if (option.style) {
+    style.value = option.style
+  }
+
+  if (option.option) {
+    // 渲染数据
+    return option.option
+  }
+  return option
+}
+function evalParseOption(option_json: any) {
+  let option = {}
+  eval(option_json.option)
+  return option
+}
+
+function changeChartSize() {
+  echarts?.getInstanceByDom(chartsRef.value)?.resize()
+}
+
+watch(
+  () => props.option,
+  (val) => {
+    if (val) {
+      nextTick(() => {
+        initChart()
+      })
+    }
+  }
+)
+
+onMounted(() => {
+  nextTick(() => {
+    initChart()
+  })
+})
+
+onBeforeUnmount(() => {
+  echarts.getInstanceByDom(chartsRef.value)?.dispose()
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/components/markdown/MdRenderer.vue b/ui/src/components/markdown/MdRenderer.vue
index 3323d8730..76ab43fa4 100644
--- a/ui/src/components/markdown/MdRenderer.vue
+++ b/ui/src/components/markdown/MdRenderer.vue
@@ -10,7 +10,10 @@
       {{ item.content }}
     </div>
     <HtmlRander v-else-if="item.type === 'html_rander'" :source="item.content"></HtmlRander>
-
+    <EchartsRander
+      v-else-if="item.type === 'echarts_rander'"
+      :option="item.content"
+    ></EchartsRander>
     <MdPreview
       v-else
       noIconfont
@@ -26,6 +29,7 @@
 import { computed, ref } from 'vue'
 import { config } from 'md-editor-v3'
 import HtmlRander from './HtmlRander.vue'
+import EchartsRander from './EchartsRander.vue'
 config({
   markdownItConfig(md) {
     md.renderer.rules.link_open = (tokens, idx, options, env, self) => {
@@ -64,8 +68,9 @@ const md_view_list = computed(() => {
       return md_img_list[Math.floor(index / 2)]
     }
   })
-  return split_html_rander(split_quick_question(result))
+  return split_echarts_rander(split_html_rander(split_quick_question(result)))
 })
+
 const split_quick_question = (result: Array<string>) => {
   return result
     .map((item) => split_quick_question_(item))
@@ -133,6 +138,41 @@ const split_html_rander_ = (source: string, type: string) => {
   })
   return result
 }
+
+const split_echarts_rander = (result: Array<any>) => {
+  return result
+    .map((item) => split_echarts_rander_(item.content, item.type))
+    .reduce((x: any, y: any) => {
+      return [...x, ...y]
+    }, [])
+}
+
+const split_echarts_rander_ = (source: string, type: string) => {
+  const temp_md_quick_question_list = source.match(/<echarts_rander>[\d\D]*?<\/echarts_rander>/g)
+  const md_quick_question_list = temp_md_quick_question_list
+    ? temp_md_quick_question_list.filter((i) => i)
+    : []
+  const split_quick_question_value = source
+    .split(/<echarts_rander>[\d\D]*?<\/echarts_rander>/g)
+    .filter((item) => item !== undefined)
+    .filter((item) => !md_quick_question_list?.includes(item))
+  const result = Array.from(
+    { length: md_quick_question_list.length + split_quick_question_value.length },
+    (v, i) => i
+  ).map((index) => {
+    if (index % 2 == 0) {
+      return { type: type, content: split_quick_question_value[Math.floor(index / 2)] }
+    } else {
+      return {
+        type: 'echarts_rander',
+        content: md_quick_question_list[Math.floor(index / 2)]
+          .replace('<echarts_rander>', '')
+          .replace('</echarts_rander>', '')
+      }
+    }
+  })
+  return result
+}
 </script>
 <style lang="scss" scoped>
 .problem-button {