多维表功能完成

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>