调整完毕

packages/bigscreen/designer/config.js

@@ -313,7 +313,8 @@ export const chartTpl = [{
     sourceDataId: '',
     dynamicData: []
   }]
-}, {
+},
+  {
     label: '饼图', type: 'pie', list: [{
       code: 'widget-linechart',
       type: 'pieChart2',
@@ -410,7 +411,19 @@ export const chartTpl = [{
       dataType: 'staticData',
       staticData: {name: '综合调处率', label: "累计调解成功", v1: 23, totalLabel: "累计排查受理", total: 33},
     },]
-}]
+  }, {
+    label: '关系图', type: 'graph', list: [{
+      type: "graphChart1",
+      label: "气泡图", title: "气泡图", border: 'border15',
+      width: 500,
+      height: 300,
+      top: 0,
+      left: 0,
+      dataType: 'staticData',
+      staticData: [],
+      thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/graphChart1.png',
+    }]
+  }]
 const maps = [{
   type: 'map',
   label: '地图',

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
 }
+

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
+}

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' },
+    textStyle: {color: '#fff'},
-    axisPointer: { type: 'cross' }
+    axisPointer: {type: 'cross'}
   },
   yAxis: {
     nameGap: 23,
     minInterval: 1,
-    splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
+    splitLine: {lineStyle: {color: 'rgba(255,255,255,.2)', type: 'dashed'}},
-    axisLabel: { color: '#fff' },
+    axisLabel: {color: '#fff'},
-    axisPointer: { snap: true }
+    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: 0, color: tools.$colorUtils.Hex2RGBA(color, 0.3)},
-          { offset: 1, color: tools.$colorUtils.Hex2RGBA(color, 0.1) }
+          {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,6 +105,7 @@ export const lineChart4 = {
     textStyle: {color: '#fff'}
   },
   daemon: {
+    type: "line",
     lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
     emphasis: {
       focus: 'self'
@@ -125,6 +129,7 @@ export const lineChart5 =  {
     axisPointer: {snap: true}
   },
   daemon: color => ({
+    type: "line",
     showSymbol: false, smooth: true,
     lineStyle: {shadowBlur: 4, shadowOffsetY: 2},
     areaStyle: {

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})) || []
       })

ui/packages/tools/AiEchartV2.vue

@@ -1,6 +1,6 @@
 <template>
-  <section class="AiEchart">
+  <section class="AiChartV2">
-    <div :ref="AiEchart" class="chart" :style="{minWidth:grid.width,minHeight:grid.height}"/>
+    <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] || {}
+      const {daemon = {}} = this.$echartTpls[this.tpl] || {} //js代码进入json编辑器会导致函数丢失,所以在这里重新补齐
-      let {type, data, ops: options = {}} = this,
+      let {data, ops: options = {}} = this,
-          style = this.series ? this.series : this.ops.daemon ? this.ops.daemon : {},
+          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
-            }
-          }
-        }
-      }
-
-      return target
-    },
     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) {
-        this.chart?.setOption({
+        for (const k in this.chartOptions) {
-          dataset: {
+          option[k] = this.chartOptions[k]
-            source: this.data || []
         }
-        })
+      }
+      if (canUseDataset) {
+        option.dataset = {source: data || []}
       } else {
-        this.chart?.setOption({
+        option.series = option.series?.map((e = {}) => {
-          ...this.chartOptions,
+          if (e.dataRender) {
-          dataset: {
+            data = data.map(e.dataRender)
-            source: this.data || []
           }
-        }, 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 ||
+        if (this.chart?.getHeight() != this.$refs.chart?.clientHeight ||
-            this.chart?.getWidth() != this.$refs[this.AiEchart]?.clientWidth) {
+            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%;