fix:优化K线图的数据配置

data-room-ui/packages/BasicComponents/Candlestick/index.vue

@@ -36,7 +36,9 @@ export default {
       charts: null,
       hasData: false,
       level: '',
-      option: {}
+      option: {},
+      xData: [],
+      yData: []
     }
   },
   computed: {
@@ -78,7 +80,7 @@ export default {
         // 否则说明是更新，这里的更新只指更新数据（改变样式时是直接调取changeStyle方法），因为更新数据会改变key,调用chart接口
         this.changeData(config).then((res) => {
           // 初始化图表
-          this.newChart(res)
+          this.newChart(config)
         })
       }
     },
@@ -88,43 +90,26 @@ export default {
      * @param {*} config
      * @param {Array} data
      */
-    dataFormatting (config, data) {
-      const dataList = []
-      data?.data?.forEach(item => {
-        dataList.push({
-          name: item[config.customize.name],
-          value: [item[config.customize.xaxis], item[config.customize.yaxis], item[config.customize.value]],
-          // 原始数据
-          originData: item
-        })
-      })
-      config.option = {
-        ...config.option,
-        data: dataList
+    dataFormatting (config, _data) {
+      console.log('dataFormatting', _data)
+      const data = _data?.data
+      if (data && data.length) {
+        this.xData = data.map(item => item[config.dataSource.x])
+        this.yData = data.map(item => [item[config.dataSource.openField], item[config.dataSource.closeField], item[config.dataSource.lowField], item[config.dataSource.highField]])
+      } else {
+        this.xData = ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
+        this.yData = [
+          [20, 34, 10, 38],
+          [40, 35, 30, 50],
+          [31, 38, 33, 44],
+          [38, 15, 5, 42]
+        ]
       }
       return config
     },
-    /**
-     * 返回上一级
-     * @param {*} config
-     */
-    async backToPreviousLevel (config) {
-      this.currentDeep--
-      const map = this.mapList[this.currentDeep]
-      // 移除mapList中的最后一个元素
-      this.mapList.pop()
-      const mapData = JSON.parse(map.geoJson)
-      this.option.geo.map = map.name
-      // this.changeData({...config, customize: {...config.customize, level: map.level, scope: map.name}})
-      echarts.registerMap(map.name, mapData)
-      this.charts.setOption(this.option, true)
-    },
-    /**
-     * 修改地图数据
-     * @param {Array} data
-     */
-    changeMapData (data) {
-      this.option.series[0].data = data
+    // 更新图表数据
+    updateChartData (config) {
+      this.handleOption(config)
       this.charts.setOption(this.option)
     },
     /**
@@ -139,8 +124,6 @@ export default {
       // 处理option，将配置项转换为echarts的option
       this.handleOption(config)
       this.charts.setOption(this.option)
-      // 注册点击事件
-      this.registerClickEvent(config)
     },
     /**
      * 处理配置项option
@@ -149,68 +132,16 @@ export default {
     handleOption (config) {
       this.option = {
         xAxis: {
-          data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27']
+          data: this.xData
         },
         yAxis: {},
         series: [
           {
             type: 'candlestick',
-            data: [
-              [20, 34, 10, 38],
-              [40, 35, 30, 50],
-              [31, 38, 33, 44],
-              [38, 15, 5, 42]
-            ]
+            data: this.yData
           }
         ]
       }
-    },
-
-    /**
-     * 注册点击事件
-     * @param config 地图组件配置项
-     */
-    registerClickEvent (config) {
-      this.charts.on('click', async (params) => {
-        const data = params?.data?.originData
-        if (data) {
-          this.linkage({ ...data, clickAreaName: params.name })
-        } else {
-          this.linkage({ clickAreaName: params.name })
-        }
-        if (params.name == '') return
-        if (!config.customize.down) {
-          return
-        }
-        // 到达允许下钻的层数，则不再下钻
-        if (this.currentDeep >= config.customize.downLevel) return
-        const downMapUrl = `${window.BS_CONFIG?.httpConfigs?.baseURL}/bigScreen/map/data/${this.mapList[this.currentDeep].id}/${params.name}`
-        const downMap = await this.$dataRoomAxios.get(decodeURI(downMapUrl), {}, false)
-        // 地图不可用
-        if (downMap.available !== 1) {
-          this.$message({
-            message: '未找到该地图配置',
-            type: 'warning'
-          })
-          return
-        }
-        let geoJsonObj
-        try {
-          geoJsonObj = JSON.parse(downMap.geoJson)
-        } catch (error) {
-          this.$message({
-            message: params.name + '地图数据格式错误',
-            type: 'warning'
-          })
-          return
-        }
-        this.currentDeep++
-        this.mapList.push(downMap)
-        // this.changeData({...config, customize: {...config.customize, scope: params.name}})
-        this.option.geo.map = params.name
-        echarts.registerMap(params.name, geoJsonObj)
-        this.charts.setOption(this.option, true)
-      })
     }
 
   }

data-room-ui/packages/BasicComponents/Candlestick/settingConfig.js

@@ -3,7 +3,7 @@ import Icon from 'data-room-ui/assets/images/bigScreenIcon/export'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const settingConfig = {
-  padding: [30, 30, 50, 80],
+  padding: [0, 30, 50, 80],
   legend: false,
   isGroup: true,
   data: [],
@@ -16,21 +16,6 @@ export const settingConfig = {
     },
     headerField: {
       enable: false
-    },
-    mapField: {
-      enable: true
-    },
-    metricField: {
-      // 指标
-      label: '维度',
-      enable: false,
-      multiple: false // 是否多选
-    },
-    dimensionField: {
-      // 表格列
-      label: '展示字段', // 维度/查询字段
-      enable: false,
-      multiple: false // 是否多选
     }
   }
 }
@@ -131,8 +116,8 @@ export const candlestickData = {
   border: { type: '', titleHeight: 60, fontSize: 16, isTitle: true, padding: [0, 0, 0, 0] },
   className:
     'com.gccloud.dataroom.core.module.chart.components.ScreenMapChart',
-  w: 800,
-  h: 700,
+  w: 450,
+  h: 320,
   x: 0,
   y: 0,
   type: 'candlestick',
@@ -141,5 +126,13 @@ export const candlestickData = {
   },
   setting: undefined, // 右侧面板自定义配置
   dataHandler: {}, // 数据自定义处理js脚本
-  ...cloneDeep(dataConfig)
+  ...cloneDeep(dataConfig),
+  dataSource: {
+    ...cloneDeep(dataConfig.dataSource),
+    xField: '',
+    openField: '',
+    closeField: '',
+    lowField: '',
+    highField: ''
+  }
 }

data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue

@@ -120,7 +120,7 @@
             </div>
           </div>
           <!--  基础组件数据配置  -->
-          <template v-if="!['customComponent', 'remoteComponent','echartsComponent'].includes(config.type)">
+          <template v-if="!['customComponent', 'remoteComponent','echartsComponent','candlestick'].includes(config.type)">
             <!--维度多选-->
             <el-form-item
               v-if="config.option.displayOption.dimensionField.enable"
@@ -213,6 +213,41 @@
               </el-select>
             </el-form-item>
           </template>
+          <!--  K线图数据配置  -->
+          <template v-if="config.type === 'candlestick'">
+            <el-form-item
+              v-for="(fieldItem, i) in fieldNameMapping"
+              :key="i"
+              prop="dataSource.xField"
+              class="data-form-item"
+              :label="fieldItem.desc"
+            >
+              <el-select
+                v-model="config.dataSource[fieldItem.name]"
+                :multiple="fieldItem.multiple"
+                class="bs-el-select"
+                popper-class="bs-el-select"
+                filterable
+                clearable
+              >
+                <el-option
+                  v-for="(field, index) in dataSourceDataList"
+                  :key="index"
+                  :label="field.comment"
+                  :value="field.name"
+                >
+                  <div class="source-key-option">
+                    <div>
+                      {{ field.comment !== "" ? field.comment : field.name }}
+                    </div>
+                    <div class="option-txt">
+                      {{ field.name }}
+                    </div>
+                  </div>
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </template>
           <!--  g2plot和远程组件数据配置  -->
           <template v-else>
             <template
@@ -890,6 +925,33 @@ export default {
   },
   data () {
     return {
+      fieldNameMapping: [ // k线图的字段列表
+        {
+          name: 'xField',
+          desc: 'X轴',
+          multiple: false
+        },
+        {
+          name: 'openField',
+          desc: '开盘价',
+          multiple: false
+        },
+        {
+          name: 'closeField',
+          desc: '收盘价',
+          multiple: false
+        },
+        {
+          name: 'lowField',
+          desc: '最低价',
+          multiple: false
+        },
+        {
+          name: 'highField',
+          desc: '最高价',
+          multiple: false
+        }
+      ],
       fieldsList: [],
       params: [], // 参数配置
       datasetName: '',

data-room-ui/packages/js/mixins/commonMixins.js

@@ -264,8 +264,9 @@ export default {
             } else {
               this.chart.changeData(config.option.data)
             }
-          }
-          if (this.charts) {
+          } if (this.config.type === 'candlestick' && this.charts) {
+            this.updateChartData(config, _res)
+          } else if (this.charts) {
             // 地图组件的被联动更新
             this.changeMapData(config.option.data)
           }
@@ -278,6 +279,10 @@ export default {
           resolve(config)
         })
       })
+    },
+    // 更新图表数据
+    updateChartData () {
+
     },
     // http前台代理需要对返回的数据进行重新组装
     httpDataFormatting (chartRes, httpRes) {