From e117a496613fe572ca6313e94a226f36b1326a22 Mon Sep 17 00:00:00 2001
From: "liu.shiyi" <liu.shiyi@ustcinfo.com>
Date: Wed, 26 Jun 2024 11:03:19 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E4=BC=98=E5=8C=96K=E7=BA=BF=E5=9B=BE?=
=?UTF-8?q?=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../BasicComponents/Candlestick/index.vue | 38 ++++++-----
.../BasicComponents/Candlestick/setting.vue | 64 +------------------
2 files changed, 23 insertions(+), 79 deletions(-)
diff --git a/data-room-ui/packages/BasicComponents/Candlestick/index.vue b/data-room-ui/packages/BasicComponents/Candlestick/index.vue
index 4bfcadc9..1d3ad167 100644
--- a/data-room-ui/packages/BasicComponents/Candlestick/index.vue
+++ b/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: [
diff --git a/data-room-ui/packages/BasicComponents/Candlestick/setting.vue b/data-room-ui/packages/BasicComponents/Candlestick/setting.vue
index 36e1aca4..8e8a0bf3 100644
--- a/data-room-ui/packages/BasicComponents/Candlestick/setting.vue
+++ b/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()