调整完毕

2024-04-18 19:17:17 +08:00
parent f3e1580fef
commit a20fcb413a
6 changed files with 188 additions and 170 deletions
--- a/ui/dv/AiEchart/echartTpls.js
+++ b/ui/dv/AiEchart/echartTpls.js
@@ -1,7 +1,9 @@
 import pie from "./template/pie"
 import line from "./template/line";
 import bar from "./template/bar";
+import graph from "./template/graph";

 export default {
-  ...bar, ...line, ...pie
+  ...bar, ...line, ...pie, ...graph
 }
+
--- a/ui/dv/AiEchart/template/graph.js
+++ b/ui/dv/AiEchart/template/graph.js
@@ -0,0 +1,31 @@
+import tools from "./tools";
+
+const color = ["#18FEFE", "#1890FF"]
+export const graphChart1 = {
+  grid: {
+    left: 50, right: 0
+  },
+  xAxis: {show: false},
+  yAxis: {show: false},
+  tooltip: {},
+  color,
+  daemon: {
+    type: 'graph',
+    layout: 'force',
+    label: {
+      show: true, position: 'inside',
+    }, symbol: 'circle', dataRender: (row, i) => ({
+      ...row,
+      symbolSize: Math.max(4, 256 * parseFloat(row.纠纷占比) / 100),
+      value: row.纠纷占比,
+      itemStyle: {
+        borderColor: color[i % 2],
+        borderWidth: 1,
+        color: tools.$colorUtils.Hex2RGBA(color[i % 2], .5),
+      }
+    }),
+  }
+}
+export default {
+  graphChart1
+}
--- a/ui/dv/AiEchart/template/line.js
+++ b/ui/dv/AiEchart/template/line.js
@@ -1,7 +1,7 @@
 import tools from "./tools";

 export const lineChart1 = {
-  legend: { show: false },
+  legend: {show: false},
  grid: {
    left: 50,
    right: 0
@@ -10,17 +10,18 @@ export const lineChart1 = {
    trigger: 'axis',
    backgroundColor: 'rgba(14, 51, 111, 0.9)',
    borderColor: '#1A6ABC',
-    textStyle: { color: '#fff' },
-    axisPointer: { type: 'cross' }
+    textStyle: {color: '#fff'},
+    axisPointer: {type: 'cross'}
  },
  yAxis: {
    nameGap: 23,
    minInterval: 1,
-    splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
-    axisLabel: { color: '#fff' },
-    axisPointer: { snap: true }
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
+    axisLabel: {color: '#fff'},
+    axisPointer: {snap: true}
  },
  daemon: (color) => ({
+    type: "line",
    showSymbol: false,
    smooth: true,
    lineStyle: {
@@ -36,8 +37,8 @@ export const lineChart1 = {
        y: 0,
        y2: 1,
        colorStops: [
-          { offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.3) },
-          { offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.1) }
+          {offset: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.3)},
+          {offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.1)}
        ]
      }
    }
@@ -56,6 +57,7 @@ export const lineChart2 = {
    textStyle: {color: '#fff'}
  },
  daemon: color => ({
+    type: "line",
    showSymbol: false,
    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
    areaStyle: {
@@ -81,6 +83,7 @@ export const lineChart3 = {
    textStyle: {color: '#fff'}
  },
  daemon: {
+    type: "line",
    smooth: true,
    lineStyle: {
      shadowBlur: 1,
@@ -102,13 +105,14 @@ export const lineChart4 = {
    textStyle: {color: '#fff'}
  },
  daemon: {
+    type: "line",
    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
    emphasis: {
      focus: 'self'
    }
  }
 };
-export const lineChart5 =  {
+export const lineChart5 = {
  legend: {show: false},
  grid: {
    left: 50, right: 0, top: 10, bottom: 30
@@ -125,6 +129,7 @@ export const lineChart5 =  {
    axisPointer: {snap: true}
  },
  daemon: color => ({
+    type: "line",
    showSymbol: false, smooth: true,
    lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
    areaStyle: {
@@ -145,4 +150,4 @@ export default {
  lineChart3,
  lineChart4,
  lineChart5,
-}
+}
--- a/ui/dv/AiLinkageMap.vue
+++ b/ui/dv/AiLinkageMap.vue
@@ -63,7 +63,7 @@ export default {
        const json = JSON.parse(res.param)
        if (type == "530300000000") {
          this.geoData = json.map
-          this.$refs.map.chart?.setOption({series: {data: this.mapData}})
+          this.$refs.map?.chart?.setOption({series: {data: this.mapData}})
        }
        this.config.summaryConfigs = json.sta?.map((e, i) => ({pos: ["rt", "lb", 'lt', 'rb'][i % 4], display: "summary20", ...e})) || []
      })
--- a/ui/packages/tools/AiEchartV2.vue
+++ b/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%;