多维表功能完成

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>

packages/bigscreen/designer/components/form/DataConfig.vue

@@ -55,6 +55,11 @@
         <config-item label="接口地址" v-else-if="chart.dataType=='apiData'">
           <el-input size="mini" v-model="chart.api"/>
         </config-item>
+        <config-item label="数据维度" v-if="chart.dataType !== 'staticData'">
+          <code-editor v-model="chart.djson" lang="json" theme="github" width="100%" height="100"
+                       placeholder="参照echarts配置数据维度,为一个数组,数组的第一个值为维度值"
+                       @change="v=>chart.dimensions=JSON.parse(v)"/>
+        </config-item>
       </ai-fold>
       <el-button type="text" icon="el-icon-plus" @click="options.charts.push({title:'新图表'})">添加图表</el-button>
     </template>
@@ -159,6 +164,7 @@ import 'brace/theme/monokai';
 import AiDialogBtn from "dui/packages/layout/AiDialogBtn.vue";
 import AiFold from "dui/packages/layout/AiFold.vue";
 import ChartPicker from "../chartPicker.vue";
+import {DvCompData} from "../../config";
 
 export default {
   name: 'dataConfig',
@@ -173,20 +179,7 @@ export default {
   },
   data() {
     return {
-      dataTypes: [
-        {
-          id: 'staticData',
-          label: '静态数据'
-        },
-        {
-          id: 'dynamicData',
-          label: '动态数据'
-        },
-        {
-          id: 'apiData',
-          label: '接口'
-        }
-      ],
+      dataTypes: Object.entries(DvCompData.types).map(e => ({id: e[0], label: e[1]})),
       json: "",
       sourceDataId: '',
       sourceData: [],
@@ -195,7 +188,6 @@ export default {
       list: [],
       showMapEditor: false,
       form: {},
-      charts: Object.keys({}).map((label, id) => ({id, label}))
     }
   },
   computed: {

ui/packages/tools/AiEchartV2.vue

@@ -59,7 +59,7 @@ export default {
           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 = {
+      return {
         tooltip: {},
         xAxis: {
           type: 'category', nameGap: 20, axisTick: false,
@@ -84,7 +84,7 @@ export default {
               type: 'dashed'
             }
           },
-          axisLabel: { color: '#C3C4C4' },
+          axisLabel: {color: '#C3C4C4'},
           axisLine: {
             lineStyle: {
               color: '#C3C4C4'
@@ -101,7 +101,6 @@ export default {
         legend, series, ...options,
         color: colors
       }
-      return ops
     },
     grid() {
       let {width, height} = this.chartOptions.grid || {}