调整完毕

ui/packages/tools/AiEchartV2.vue

@@ -1,6 +1,6 @@
 <template>
-  <section class="AiEchart">
-    <div :ref="AiEchart" class="chart" :style="{minWidth:grid.width,minHeight:grid.height}"/>
+  <section class="AiChartV2">
+    <div ref="chart" class="chart" :style="{minWidth:grid.width,minHeight:grid.height}"/>
     <slot v-if="$slots.default"/>
     <render-component v-else-if="ops.render" :render="ops.render" :options="chartOptions" :data="data"/>
   </section>
@@ -21,7 +21,6 @@ export default {
   props: {
     data: {default: () => []},
     ops: {default: () => ({})},
-    type: {default: "line"},
     tpl: String,
     series: Object,
     theme: {
@@ -48,7 +47,6 @@ export default {
     return {
       chart: null,
       timer: null,
-      AiEchart: `AiEchart-${new Date().getTime()}`
     }
   },
   computed: {
@@ -60,13 +58,13 @@ export default {
       return ['#FFBA44', '#EC6666', '#FF3E18', '#C9FF82', '#29D7FA', '#ea7ccc']
     },
     chartOptions() {
-      const {daemon = {}} = this.$echartTpls[this.tpl] || {}
-      let {type, data, ops: options = {}} = this,
-          style = this.series ? this.series : this.ops.daemon ? this.ops.daemon : {},
+      const {daemon = {}} = this.$echartTpls[this.tpl] || {} //js代码进入json编辑器会导致函数丢失,所以在这里重新补齐
+      let {data, ops: options = {}} = this,
+          style = this.series || options.daemon || {},
           colors = this.theme === '1' ? this.colors : (options.color || this.colors),
           legend = {textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, show: false}
       const series = data?.[0] ? Array(Object.keys(data?.[0]).length - 1).fill(1)
-          .map((e, i) => ({type, ...mergeOps(daemon, typeof style == 'object' ? style : style(colors[i]))})) : []
+          .map((e, i) => mergeOps(typeof daemon == 'function' ? daemon(colors[i]) : daemon, style)) : []
       return {
         tooltip: {},
         xAxis: {
@@ -116,7 +114,8 @@ export default {
         width: width ? (width - this.legend === '1' ? 160 : 0) + 'px' : 'auto',
         height: height ? height + 'px' : 'auto'
       }
-    }
+    },
+    seriesType: v => [...new Set(v.chart.getOption().series?.map(e => e.type) || [])],
   },
   watch: {
     data: {
@@ -129,71 +128,39 @@ export default {
     theme() {
       this.refresh()
     },
-    type(v) {
-      v && this.refresh()
-    }
   },
   methods: {
-    deepAssign() {
-      let name, options, src, copy
-      let length = arguments.length
-      // 记录要复制的对象的下标
-      let i = 1
-      // target默认是第一个参数
-      let target = arguments[0] || {}
-      // 如果target不是对象，我们是无法进行复制的，所以设为{}
-      if (typeof target !== 'object') {
-        target = {}
-      }
-      // 循环遍历要复制的对象
-      for (; i < length; i++) {
-        // 获取当前对象
-        options = arguments[i]
-        // 要求不能为空 避免extend(a,,b)这种情况
-        if (options != null) {
-          for (name in options) {
-            // 目标属性值
-            src = target[name]
-            // 要复制的对象的属性值
-            copy = options[name]
-
-            if (copy && typeof copy == 'object') {
-              // 递归调用
-              target[name] = this.deepAssign(src, copy)
-            } else if (copy !== undefined) {
-              target[name] = copy
-            }
-          }
+    getChartData(render) {
+      let data = this.data, option = {}
+      const canUseDataset = !!["line", "bar", "pie", "scatter", "effectScatter", "parallel", "candlestick", "map", "funnel", "custom"].some(e => this.seriesType.includes(e))
+      if (!render) {
+        for (const k in this.chartOptions) {
+          option[k] = this.chartOptions[k]
         }
       }
-
-      return target
-    },
-    getChartData(render) {
-      if (!render) {
-        this.chart?.setOption({
-          dataset: {
-            source: this.data || []
-          }
-        })
+      if (canUseDataset) {
+        option.dataset = {source: data || []}
       } else {
-        this.chart?.setOption({
-          ...this.chartOptions,
-          dataset: {
-            source: this.data || []
+        option.series = option.series?.map((e = {}) => {
+          if (e.dataRender) {
+            data = data.map(e.dataRender)
           }
-        }, true)
+          return {...e, data}
+        })
+        console.log(option.series)
       }
+      this.chart.setOption(option)
     },
     initChart() {
-      this.chart = echarts.init(this.$refs[this.AiEchart])
+      const {echarts} = window
+      this.chart = echarts.init(this.$refs.chart)
       this.chart.setOption(this.chartOptions || {})
     },
     watchResize() {
       this.timer && clearInterval(this.timer)
       this.timer = setInterval(() => {
-        if (this.chart?.getHeight() != this.$refs[this.AiEchart]?.clientHeight ||
-            this.chart?.getWidth() != this.$refs[this.AiEchart]?.clientWidth) {
+        if (this.chart?.getHeight() != this.$refs.chart?.clientHeight ||
+            this.chart?.getWidth() != this.$refs.chart?.clientWidth) {
           this.chart?.resize()
         }
       }, 1000)
@@ -218,7 +185,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.AiEchart {
+.AiChartV2 {
   display: flex;
   width: 100%;
   height: 100%;