多维表功能完成

components/AiDvRender.vue

@@ -24,15 +24,7 @@
                     :key="`chart-${index}`"
                     :theme="theme"
                     :data="values"
-                    :ops="chartList[data.config]"/>
-      <!-- <ai-q-map
-        v-else-if="currentType=='map'"
-        :area-id="data.areaId"
-        :markers="markers"
-        :is3d="data.is3D === '1'"
-        :limitArea="data.limitArea === '1'"
-        :is3dAround="data.is3dAround === '1'">
-      </ai-q-map> -->
+                    :ops="$echartTpls[data.config]"/>
       <AiDvTable
           v-else-if="currentType === 'AiDvTable'"
           :heigth="'100%'"
@@ -66,7 +58,7 @@
              v-else-if="currentType === 'video'"/>
       <AiDvPartyOrg style="width: 100%; height: 100%;" v-else-if="currentType === 'partyOrg'" :instance="instance"/>
       <!-- <ai-sprite v-else-if="/building/.test(currentType)" v-bind="data" is3D @init="mods[currentType]"/> -->
-      <ai-dv-plot v-else-if="currentType=='plot'" :options="data.charts"/>
+      <ai-dv-plot v-else-if="currentType=='plot'" :options="data.charts" :instance="instance"/>
     </ai-dv-panel>
   </div>
 </template>
@@ -76,7 +68,6 @@ import {scrollBoard} from '@jiaminghi/data-view'
 import Vue from "vue"
 import {mapState} from 'vuex'
 import AiDvMap from "./AiDvMap";
-import chartList from './AiEchart/echartTpls'
 import AiMonitor from "./AiMonitor/AiMonitor";
 import AiSwiper from './AiSwiper.vue'
 import AiDvDisplay from "./layout/AiDvDisplay/AiDvDisplay";
@@ -102,7 +93,6 @@ export default {
   data() {
     return {
       // mods,
-      chartList,
       map: null,
       lib: null,
       timer: null,

components/index.js

@@ -14,7 +14,7 @@ const install = function (Vue) {
     })
     Vue.prototype.MODEL = model
   }
-  Vue.prototype.$echartTpls = require("./AiEchart/echartTpls")
+  Vue.prototype.$echartTpls = require("./AiEchart/echartTpls").default
   // 遍历注册全局组件
   let contexts = require.context('.', true, /[\\\/]Ai([^\\\/]+)\.vue$/);
   if (contexts) {

components/layout/AiDvPlot/AiDvPlot.vue

@@ -1,29 +1,89 @@
 <template>
   <section class="AiDvPlot">
     <ai-select class="plotPicker" v-model="current" :select-list="charts" @change="handleChangeChart"/>
-    <div ref="DvPlot"/>
+    <div class="plotChart" ref="DvPlot"/>
   </section>
 </template>
 <script>
+import * as echarts from 'echarts'
+import {DvCompData} from "../../../packages/bigscreen/designer/config";
+
 export default {
   name: "AiDvPlot",
   props: {
-    options: {default: () => []}
+    options: {default: () => []},
+    instance: Function
   },
   data() {
     return {
-      current: 0
+      current: 0,
+      chart: null
     }
   },
   computed: {
     charts: v => v.options.map((e, id) => ({id, label: e.title})),
-    plot: v => v.options[v.current]
+    plot: v => v.options[v.current],
+    tpl: v => v.$echartTpls[v.plot.chart]
   },
   methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.DvPlot)
+      this.handleChangeChart()
+    },
     handleChangeChart() {
-
+      const series = Array(this.plot.dimensions.length - 1).fill(this.tpl.daemon)
+      this.chart.setOption({
+        tooltip: {},
+        xAxis: {
+          type: 'category', nameGap: 20, axisTick: false,
+          axisLabel: {
+            color: '#C3C4C4',
+            interval: 0,
+          },
+          axisLine: {
+            lineStyle: {
+              width: 1
+            }
+          }
+        },
+        // 声明一个 Y 轴，数值轴。
+        yAxis: {
+          nameGap: 23, minInterval: 1,
+          splitLine: {
+            lineStyle: {
+              type: 'dashed'
+            }
+          },
+          axisLabel: {color: '#C3C4C4'},
+          axisLine: {
+            lineStyle: {
+              color: '#C3C4C4'
+            }
+          }
+        },
+        grid: {
+          left: '0%',
+          right: '0%',
+          bottom: '0%',
+          top: '26px',
+          containLabel: true
+        }, series, ...this.tpl
+      })
+      this.getChartData()
+    },
+    getChartData() {
+      return new DvCompData(this.plot.dataType, this.plot, this.instance).getData().then(source => {
+        const dataset = {
+          source,
+          dimensions: this.plot.dimensions.filter(Boolean) || []
+        }
+        this.chart.setOption({dataset})
+      })
     }
   },
+  mounted() {
+    this.$nextTick(this.initChart)
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -35,6 +95,7 @@ export default {
     position: absolute;
     right: 12px;
     top: -10px;
+    z-index: 9;
 
     .el-select {
       .el-input__inner {
@@ -48,5 +109,9 @@ export default {
       }
     }
   }
+
+  .plotChart {
+    height: 100%;
+  }
 }
 </style>