fix:优化K线图的样式

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

@@ -1,5 +1,6 @@
 <template>
   <div
+    :id="config.code + 'wrap'"
     class="bs-design-wrap bs-bar"
     style="width: 100%; height: 100%"
   >
@@ -43,29 +44,34 @@ export default {
     }
   },
   computed: {
-    Data () {
-      return JSON.parse(JSON.stringify(this.config))
-    }
   },
   watch: {
-    Data: {
-      handler (newVal, oldVal) {
-        if (newVal.w !== oldVal.w || newVal.h !== oldVal.h) {
-          this.$nextTick(() => {
-            this.charts.resize()
-          })
-        }
-      },
-      deep: true
-    }
   },
   mounted () {
     this.chartInit()
+    // 监听窗口或者父盒子大小变化
+    this.chartResize()
   },
   beforeDestroy () {
     this.charts?.clear()
   },
   methods: {
+    chartResize () {
+      window.addEventListener('resize', () => {
+        if (this.charts) {
+          this.charts.resize()
+        }
+      })
+      const dom = document.getElementById(`${this.config.code}wrap`)
+      if (dom) {
+        this.resizeObserver = new ResizeObserver(() => {
+          if (this.charts) {
+            this.charts.resize()
+          }
+        })
+        this.resizeObserver.observe(dom)
+      }
+    },
     chartInit () {
       const config = this.config
       // key和code相等，说明是一进来刷新，调用list接口
@@ -94,7 +100,7 @@ export default {
     dataFormatting (config, _data) {
       const data = _data?.data
       if (data && data.length) {
-        this.xData = data.map(item => item[config.dataSource.x])
+        this.xData = data.map(item => item[config.dataSource.xField])
         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']
@@ -220,7 +226,7 @@ export default {
         tooltip: {
           // 显示提示框
           show: true,
-          trigger: 'axis',
+          trigger: 'item',
           backgroundColor: 'rgba(50,50,50,0.7)',
           borderColor: '#333',
           borderWidth: 1,
@@ -231,7 +237,7 @@ export default {
           },
 
           axisPointer: {
-            type: 'cross'
+            type: 'line'
           }
         },
         series: [

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

@@ -61,19 +61,6 @@
             :predefine-colors="predefineThemeColors"
           />
         </el-form-item>
-        <el-form-item
-
-          label="地名字体权重"
-          label-width="100px"
-        >
-          <el-input-number
-            v-model="config.customize.mapNameWeight"
-            class="bs-el-input-number"
-            placeholder="请输入字体权重"
-            :min="100"
-            :step="100"
-          />
-        </el-form-item>
       </div>
       <SettingTitle>
         网格线
@@ -390,36 +377,7 @@ export default {
         {
           label: '右',
           value: 'end'
-        }],
-      levelList: [
-        { value: '0', label: '世界' },
-        { value: '1', label: '国家' },
-        { value: '2', label: '省份' },
-        { value: '3', label: '城市' },
-        { value: '4', label: '区县' }
-      ],
-      symbolList: [
-        { value: 'circle', label: '圆形' },
-        { value: 'rect', label: '矩形' },
-        { value: 'roundRect', label: '圆角矩形' },
-        { value: 'triangle', label: '三角形' },
-        { value: 'diamond', label: '菱形' },
-        { value: 'pin', label: '水滴' },
-        { value: 'arrow', label: '箭头' }
-      ],
-      // 旧版本地图等级，该数据用于兼容旧版本
-      oldLevelMap: {
-        world: '0',
-        country: '1',
-        province: '2'
-      },
-      downLevelList: [
-        { value: 1, label: '下钻一层' },
-        { value: 2, label: '下钻两层' },
-        { value: 3, label: '下钻三层' },
-        { value: 4, label: '下钻四层' },
-        { value: 5, label: '下钻五层' }
-      ]
+        }]
     }
   },
   computed: {
@@ -434,29 +392,9 @@ export default {
   },
   watch: {},
   mounted () {
-    this.getMapTree()
     this.colors = this.config.customize.rangeColor
   },
   methods: {
-    getMapTree () {
-      const levelConst = ['0', '1', '2', '3', '4']
-      if (!levelConst.includes(this.config.customize.level)) {
-        this.config.customize.level = this.oldLevelMap[this.config.customize.level] || '0'
-      }
-      this.$dataRoomAxios.get(`/bigScreen/map/tree/${this.config.customize.level}`).then((res) => {
-        this.mapTree = res
-      })
-    },
-    mapSelect (mapId) {
-      const mapData = this.$refs.cascade.getCheckedNodes()[0].data
-      this.currentMap = mapData
-    },
-    changeMap (val) {
-      this.config.customize.scope = val.slice(0, -5)
-    },
-    changeLevel () {
-      this.getMapTree()
-    },
     delColor () {
       if (this.colors.length <= 2) return
       this.colors.pop()