From b4dc142e7580e0ae429fb4bac0d6639cd17a184a Mon Sep 17 00:00:00 2001 From: "liu.shiyi" Date: Tue, 25 Jun 2024 19:27:26 +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=95=B0=E6=8D=AE=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BasicComponents/Candlestick/index.vue | 115 ++++-------------- .../Candlestick/settingConfig.js | 31 ++--- .../RightSetting/DataSetting.vue | 64 +++++++++- .../packages/js/mixins/commonMixins.js | 9 +- 4 files changed, 105 insertions(+), 114 deletions(-) diff --git a/data-room-ui/packages/BasicComponents/Candlestick/index.vue b/data-room-ui/packages/BasicComponents/Candlestick/index.vue index e16adb86..5499e6ad 100644 --- a/data-room-ui/packages/BasicComponents/Candlestick/index.vue +++ b/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) - }) } } diff --git a/data-room-ui/packages/BasicComponents/Candlestick/settingConfig.js b/data-room-ui/packages/BasicComponents/Candlestick/settingConfig.js index 0eba99fe..c2884e17 100644 --- a/data-room-ui/packages/BasicComponents/Candlestick/settingConfig.js +++ b/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: '' + } } diff --git a/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue b/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue index 04c4fba9..1febebbe 100644 --- a/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue +++ b/data-room-ui/packages/BigScreenDesign/RightSetting/DataSetting.vue @@ -120,7 +120,7 @@ -