图表组件

components/AiDvRender.vue

@@ -15,7 +15,7 @@
           :key="data.height"
           :theme="theme"
           :style="{height: data.height + 'px', width: '100%'}"/>
-      <ai-echart v-else-if="/Chart/.test(data.type)"
+      <ai-echart-v2 v-else-if="/Chart/.test(data.type)"
                  style="height: 100%; width: 100%;"
                  :ref="'chart' + index"
                  :key="`chart${index}`"

components/AiEchart/template/bar/barChart1.js

@@ -1,15 +1,9 @@
 export default {
-  legend: {
-    right: 0,
-    itemHeight: 5,
-    itemWidth: 16,
-    textStyle: { color: '#fff' }
-  },
   yAxis: {
     nameGap: 23,
     minInterval: 1,
     splitLine: { lineStyle: { color: 'rgba(255,255,255,.2)', type: 'dashed' } },
-    axisLabel: { color: '#fff' },
+    axisLabel: { color: '#C3C4C4' },
     axisPointer: { show: false }
   },
   axisPointer: {
@@ -25,8 +19,8 @@ export default {
       y: 0,
       y2: 1,
       colorStops: [
-        { offset: 0, color: 'rgba(66, 187, 255, 1)' },
+        { offset: 0, color: 'rgba(0, 249, 255, 1)' },
-        { offset: 1, color: 'rgba(37, 143, 255, 0.2)' }
+        { offset: 1, color: 'rgba(0, 249, 255, 0.4)' }
       ]
     },
     {
@@ -36,8 +30,8 @@ export default {
       y: 0,
       y2: 1,
       colorStops: [
-        { offset: 0, color: 'rgba(66, 255, 254, 1)' },
+        { offset: 0, color: 'rgba(236, 102, 102, 1)' },
-        { offset: 1, color: 'rgba(37, 255, 246, 0.2)' }
+        { offset: 1, color: 'rgba(236, 102, 102, 0.4)' }
       ]
     },
     {
@@ -47,8 +41,8 @@ export default {
       y: 0,
       y2: 1,
       colorStops: [
-        { offset: 0, color: 'rgba(97, 253, 185, 1)' },
+        { offset: 0, color: 'rgba(252, 59, 255, 1)' },
-        { offset: 1, color: 'rgba(97, 253, 185, 0.2)' }
+        { offset: 1, color: 'rgba(252, 59, 255, 0.4)' }
       ]
     },
     {
@@ -58,8 +52,8 @@ export default {
       y: 0,
       y2: 1,
       colorStops: [
-        { offset: 0, color: 'rgba(253, 108, 57, 1)' },
+        { offset: 0, color: 'rgba(24, 144, 255, 1)' },
-        { offset: 1, color: 'rgba(253, 108, 57, 0.2)' }
+        { offset: 1, color: 'rgba(24, 144, 255, 0.4)' }
       ]
     },
     {
@@ -69,22 +63,14 @@ export default {
       y: 0,
       y2: 1,
       colorStops: [
-        { offset: 0, color: 'rgba(248, 187, 25, 1)' },
+        { offset: 0, color: 'rgba(149, 255, 68, 1)' },
-        { offset: 1, color: 'rgba(55, 39, 5, 1)' }
+        { offset: 1, color: 'rgba(149, 255, 68, 0.4)' }
       ]
     }
   ],
   daemon: {
     type: 'bar',
-    label: {
+    barWidth: 20,
-      show: true,
-      position: 'top',
-      color: '#fff',
-      formatter: e => {
-        return e.data[e.seriesName] || ''
-      }
-    },
-    barWidth: 16,
     barCategoryGap: 40,
     itemStyle: {}
   }

packages/bigscreen/designer/config.js

@@ -12,7 +12,7 @@ const components = [
             type: 'barChart1',
             label: '柱状图1',
             title: '柱状图',
-            border: 'border1',
+            border: 'border6',
             icon: 'icontext_box',
             value: '',
             thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar1.png',
@@ -44,7 +44,7 @@ const components = [
             value: '',
             title: '柱状图2',
             width: 500,
-            border: 'border1',
+            border: 'border6',
             sourceDataId: '',
             height: 300,
             thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar2.png',
@@ -78,7 +78,7 @@ const components = [
             thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar3.png',
             dataX: '',
             dataY: [],
-            border: 'border1',
+            border: 'border6',
             top: 0,
             left: 0,
             zIndex: 1,
@@ -110,7 +110,7 @@ const components = [
             thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar5.png',
             top: 0,
             left: 0,
-            border: 'border1',
+            border: 'border6',
             api: '',
             apiData: [],
             dataType: 'staticData',
@@ -160,7 +160,7 @@ const components = [
             value: '',
             width: 500,
             sourceDataId: '',
-            border: 'border1',
+            border: 'border6',
             height: 300,
             thumb: 'https://cdn.cunwuyun.cn/dvcp/dv/tpl/bar8.png',
             dataX: '',
@@ -185,7 +185,7 @@ const components = [
             type: 'barChart9',
             label: '柱状图7',
             title: '柱状图7',
-            border: 'border1',
+            border: 'border6',
             icon: 'icontext_box',
             value: '',
             width: 500,
@@ -220,7 +220,7 @@ const components = [
             type: 'lineChart1',
             label: '折线图1',
             title: '折线图1',
-            border: 'border1',
+            border: 'border6',
             icon: 'icontext_box',
             value: '',
             width: 500,
@@ -249,7 +249,7 @@ const components = [
             type: 'lineChart2',
             label: '折线图2',
             title: '折线图2',
-            border: 'border1',
+            border: 'border6',
             icon: 'icontext_box',
             value: '',
             width: 500,
@@ -279,7 +279,7 @@ const components = [
             label: '折线图3',
             title: '折线图3',
             icon: 'icontext_box',
-            border: 'border1',
+            border: 'border6',
             value: '',
             width: 500,
             height: 300,
@@ -309,7 +309,7 @@ const components = [
             title: '折线图4',
             icon: 'icontext_box',
             value: '',
-            border: 'border1',
+            border: 'border6',
             width: 500,
             height: 300,
             zIndex: 1,
@@ -338,7 +338,7 @@ const components = [
             title: '折线图5',
             icon: 'icontext_box',
             value: '',
-            border: 'border1',
+            border: 'border6',
             width: 500,
             height: 300,
             zIndex: 1,
@@ -374,7 +374,7 @@ const components = [
             title: '饼图',
             icon: 'icontext_box',
             value: '',
-            border: 'border1',
+            border: 'border6',
             width: 500,
             height: 300,
             zIndex: 1,
@@ -402,7 +402,7 @@ const components = [
             title: '饼图',
             icon: 'icontext_box',
             value: '',
-            border: 'border1',
+            border: 'border6',
             width: 500,
             height: 300,
             zIndex: 1,
@@ -431,7 +431,7 @@ const components = [
             title: '饼图',
             icon: 'icontext_box',
             value: '',
-            border: 'border1',
+            border: 'border6',
             width: 500,
             height: 300,
             zIndex: 1,
@@ -469,7 +469,7 @@ const components = [
             type: 'table',
             label: '表格',
             title: '表格',
-            border: 'border1',
+            border: 'border6',
             width: 650,
             height: 400,
             zIndex: 1,

ui/packages/tools/AiEchartV2.vue

@@ -0,0 +1,286 @@
+<template>
+  <section class="AiEchart">
+    <div ref="AiEchart" 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"/>
+    <div class="AiEchart-legend" v-if="legend === '1'">
+      <div class="AiEchart-legend__item">居民好友：5230</div>
+      <div class="AiEchart-legend__item">居民好友：5230</div>
+      <div class="AiEchart-legend__item">居民好友：5230</div>
+    </div>
+  </section>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: "AiEchartV2",
+  props: {
+    data: {default: () => []},
+    ops: {default: () => ({})},
+    type: {default: "line"},
+    series: Object,
+    theme: {
+      default: '0'
+    },
+    legend: {
+      type: String,
+      default: '0'
+    }
+  },
+  components: {
+    renderComponent: {
+      functional: true,
+      props: {
+        render: Function,
+        options: {default: () => ({})},
+        data: {default: () => []}
+      },
+      render(h, ins) {
+        let {options = {}, data} = ins.props
+
+        return ins.props.render(h, {...options, data})
+      }
+    }
+  },
+
+  data() {
+    return {
+      chart: null,
+      timer: null
+    }
+  },
+  computed: {
+    colors() {
+      if (this.theme === '0') {
+        return ['#00F9FF', '#EC6666', '#FC3BFF', '#1890FF', '#95FF44', '#ea7ccc']
+      }
+
+      return ['#D4380D', '#CF1322', '#D55800', '#FA8C16', '#FFC53D', '#FFA940', '#FFC53D', '#780000']
+    },
+
+    chartOptions() {
+      let {type, data, ops: options = {}} = this,
+          style = this.series ? this.series : this.ops.daemon ? this.ops.daemon : {},
+          colors = this.theme === '1' ? this.colors : (options.color || this.colors),
+          legend = {textStyle: {color: '#fff', padding: [0, 0, 0, 8], fontSize: 14}, show: false},
+          series = data?.[0] ? Array(Object.keys(data?.[0]).length - 1).fill(1)
+          .map((e, i) => ({type, ...(typeof style == 'object' ? style : style(colors[i]))})) : []
+      let ops = {
+        tooltip: {},
+        xAxis: {
+          type: 'category', nameGap: 20, axisTick: false,
+          axisLabel: {
+            color: '#C3C4C4',
+            interval: 0,
+            rotate: this.data.length > 10 ? 40 : 0
+          },
+          axisLine: {
+            lineStyle: {
+              color: this.theme === '1' ? 'rgba(239, 163, 51, 0.8)' : 'rgba(255,255,255,.5)'
+            }
+          }
+        },
+        // 声明一个 Y 轴，数值轴。
+        yAxis: {
+          nameGap: 23, minInterval: 1,
+          splitLine: {
+            lineStyle: {
+              color: this.theme === '1' ? 'rgba(255, 197, 52, 0.4)' : 'rgba(255, 255, 255, .2)',
+              type: 'dashed'
+            }
+          },
+          axisLabel: { color: '#C3C4C4' },
+          axisLine: {
+            lineStyle: {
+              color: '#C3C4C4'
+            }
+          }
+        },
+        legend, series, ...options,
+        color: colors,
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
+          top: '40px',
+          containLabel: true
+        }
+      }
+      return ops
+    },
+    grid() {
+      let {width, height} = this.chartOptions.grid || {}
+      return {
+        width: width ? (width - this.legend === '1' ? 160 : 0) + 'px' : 'auto',
+        height: height ? height + 'px' : 'auto'
+      }
+    }
+  },
+  watch: {
+    data: {
+      deep: true, handler(v, old) {
+        let oldDims = Object.keys(old?.[0] || {})?.toString(),
+            current = Object.keys(v?.[0] || {})?.toString()
+        this.getChartData(oldDims != current)
+
+        console.log(data)
+      }
+    },
+
+    theme() {
+      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) {
+      if (!render) {
+        this.chart?.setOption({
+          dataset: {
+            source: this.data || []
+          }
+        })
+      } else {
+        this.chart?.setOption({
+          ...this.chartOptions,
+          dataset: {
+            source: this.data || []
+          }
+        }, true)
+      }
+    },
+    initChart() {
+      this.chart = echarts.init(this.$refs.AiEchart)
+      this.chart.setOption(this.chartOptions || {})
+    },
+    watchResize() {
+      this.timer && clearInterval(this.timer)
+      this.timer = setInterval(() => {
+        if (this.chart?.getHeight() != this.$refs.AiEchart?.clientHeight ||
+            this.chart?.getWidth() != this.$refs.AiEchart?.clientWidth) {
+          this.chart?.resize()
+        }
+      }, 1000)
+      //5分钟后停止监听
+      setTimeout(() => this.timer && clearInterval(this.timer), 5 * 60 * 1000)
+    },
+    refresh() {
+      this.chart.setOption(this.chartOptions || {})
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.watchResize()
+      this.initChart()
+      this.getChartData()
+    })
+
+    console.log(this.data)
+  },
+  beforeDestroy() {
+    this.timer && clearInterval(this.timer)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.AiEchart {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex: 1;
+  min-width: 100px;
+  min-height: 0;
+  position: relative;
+
+  .chart {
+    flex: 1;
+    height: 100%;
+    min-height: 100px;
+  }
+
+  .AiEchart-legend {
+    width: 140px;
+    margin-left: 20px;
+    padding-top: 20px;
+
+    div {
+      display: flex;
+      position: relative;
+      align-items: center;
+      justify-content: center;
+      height: 40px;
+      margin-bottom: 8px;
+      text-align: center;
+      color: #fff;
+      font-size: 14px;
+      border: 1px solid #717171;
+      box-sizing: border-box;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &::after {
+        position: absolute;
+        left: -1px;
+        top: 50%;
+        z-index: 11;
+        width: 1px;
+        height: 10px;
+        transform: translateY(-50%);
+        background: #0c0c0c;
+        content: ' ';
+      }
+
+      &::before {
+        position: absolute;
+        right: - 1px;
+        top: 50%;
+        z-index: 11;
+        width: 1px;
+        height: 10px;
+        transform: translateY(-50%);
+        background: #0c0c0c;
+        content: ' ';
+      }
+    }
+  }
+}
+</style>