center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

feat(图表): 图表支持时间字段联动

Browse Source
This commit is contained in:
wangjiahao 2024-04-24 15:47:07 +08:00
parent 77e973191a
commit 314421c049
3 changed files with 67 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
core/frontend/src/views/chart/components/ChartComponent.vue
View File

@ -57,6 +57,8 @@ import { reverseColor } from '../chart/common/common'
import MapController from './map/MapController.vue'
import { mapState } from 'vuex'
import bus from '@/utils/bus'
import { deepCopy } from '@/components/canvas/utils/utils'
import { getRange } from '@/utils/timeUitils'
export default {
name: 'ChartComponent',
@ -538,6 +540,24 @@ export default {
}
},
trackClick(trackAction) {
const idTypeMap = this.chart.data.fields.reduce((pre, next) => {
pre[next['id']] = next['deType']
return pre
}, {})
const idDateStyleMap = this.chart.data.fields.reduce((pre, next) => {
pre[next['id']] = next['dateStyle']
return pre
}, {})
const dimensionListAdaptor = deepCopy(this.pointParam.data.dimensionList)
dimensionListAdaptor.forEach(dimension => {
// deType === 1 表示是时间类型
if (idTypeMap[dimension.id] === 1) {
dimension.value = getRange(dimension.value, idDateStyleMap[dimension.id])
}
})
const param = this.pointParam
if (!param || !param.data || !param.data.dimensionList) {
return
@ -548,14 +568,14 @@ export default {
option: 'linkage',
name: this.pointParam.data.name,
viewId: this.chart.id,
dimensionList: this.pointParam.data.dimensionList,
dimensionList: dimensionListAdaptor,
quotaList: quotaList
}
const jumpParam = {
option: 'jump',
name: this.pointParam.data.name,
viewId: this.chart.id,
dimensionList: this.pointParam.data.dimensionList,
dimensionList: dimensionListAdaptor,
quotaList: quotaList
}
jumpParam.quotaList[0]['value'] = this.pointParam.data.value

28
core/frontend/src/views/chart/components/ChartComponentG2.vue
View File

@ -32,8 +32,8 @@
</div>
</span>
<div
ref="chart"
:id="chartId"
ref="chart"
style="width: 100%;overflow: hidden;"
:style="{height:chartHeight}"
/>
@ -63,6 +63,9 @@ import { equalsAny } from '@/utils/StringUtils'
import { mapState } from 'vuex'
import { baseFlowMapOption } from '@/views/chart/chart/map/map_antv'
import { clear } from 'size-sensor'
import { getRange } from '@/utils/timeUitils'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'ChartComponentG2',
components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
@ -348,7 +351,7 @@ export default {
this.trackClick(this.trackMenu[0])
} else {
// 视图关联多个事件
const menuDom = this.$refs.viewTrack.$el.getElementsByClassName("track-menu")?.[0]
const menuDom = this.$refs.viewTrack.$el.getElementsByClassName('track-menu')?.[0]
const chartDom = this.$refs.chart
let position = {
x: param.x,
@ -385,6 +388,23 @@ export default {
}, 100)
},
trackClick(trackAction) {
const idTypeMap = this.chart.data.fields.reduce((pre, next) => {
pre[next['id']] = next['deType']
return pre
}, {})
const idDateStyleMap = this.chart.data.fields.reduce((pre, next) => {
pre[next['id']] = next['dateStyle']
return pre
}, {})
const dimensionListAdaptor = deepCopy(this.pointParam.data.dimensionList)
dimensionListAdaptor.forEach(dimension => {
// deType === 1 表示是时间类型
if (idTypeMap[dimension.id] === 1) {
dimension.value = getRange(dimension.value, idDateStyleMap[dimension.id])
}
})
const param = this.pointParam
if (!param || !param.data || !param.data.dimensionList) {
// 地图提示没有关联字段 其他没有维度信息的 直接返回
@ -403,7 +423,7 @@ export default {
option: 'linkage',
name: this.pointParam.data.name,
viewId: this.chart.id,
dimensionList: this.pointParam.data.dimensionList,
dimensionList: dimensionListAdaptor,
quotaList: quotaList,
category: this.pointParam.data.category,
group: this.pointParam.data.group
@ -412,7 +432,7 @@ export default {
option: 'jump',
name: this.pointParam.data.name,
viewId: this.chart.id,
dimensionList: this.pointParam.data.dimensionList,
dimensionList: dimensionListAdaptor,
quotaList: quotaList,
category: this.pointParam.data.category,
group: this.pointParam.data.group

38
core/frontend/src/views/chart/components/ChartComponentS2.vue
View File

@ -104,6 +104,7 @@ import { mapState } from 'vuex'
import DePagination from '@/components/deCustomCm/pagination.js'
import bus from '@/utils/bus'
import { getRange } from '@/utils/timeUitils'
import { deepCopy } from '@/components/canvas/utils/utils'
export default {
name: 'ChartComponentS2',
@ -327,15 +328,6 @@ export default {
pre[next['dataeaseName']] = next['id']
return pre
}, {})
const nameTypeMap = this.chart.data.fields.reduce((pre, next) => {
pre[next['dataeaseName']] = next['deType']
return pre
}, {})
const nameDateStyleMap = this.chart.data.fields.reduce((pre, next) => {
pre[next['dataeaseName']] = next['dateStyle']
return pre
}, {})
let rowData
if (this.chart.type === 'table-pivot') {
@ -347,12 +339,7 @@ export default {
const dimensionList = []
for (const key in rowData) {
if (nameIdMap[key]) {
let value = rowData[key]
// deType === 1 表示是时间类型
if (nameTypeMap[key] === 1) {
value = getRange(value, nameDateStyleMap[key])
}
dimensionList.push({ id: nameIdMap[key], value: value })
dimensionList.push({ id: nameIdMap[key], value: rowData[key] })
}
}
this.antVActionPost(dimensionList, nameIdMap[meta.valueField] || 'null', param)
@ -422,6 +409,23 @@ export default {
}, 100)
},
trackClick(trackAction) {
const idTypeMap = this.chart.data.fields.reduce((pre, next) => {
pre[next['id']] = next['deType']
return pre
}, {})
const idDateStyleMap = this.chart.data.fields.reduce((pre, next) => {
pre[next['id']] = next['dateStyle']
return pre
}, {})
const dimensionListAdaptor = deepCopy(this.pointParam.data.dimensionList)
dimensionListAdaptor.forEach(dimension => {
// deType === 1 表示是时间类型
if (idTypeMap[dimension.id] === 1) {
dimension.value = getRange(dimension.value, idDateStyleMap[dimension.id])
}
})
const param = this.pointParam
if (!param || !param.data || !param.data.dimensionList) {
// 地图提示没有关联字段 其他没有维度信息的 直接返回
@ -434,14 +438,14 @@ export default {
option: 'linkage',
name: this.pointParam.data.name,
viewId: this.chart.id,
dimensionList: this.pointParam.data.dimensionList,
dimensionList: dimensionListAdaptor,
quotaList: this.pointParam.data.quotaList
}
const jumpParam = {
option: 'jump',
name: this.pointParam.data.name,
viewId: this.chart.id,
dimensionList: this.pointParam.data.dimensionList,
dimensionList: dimensionListAdaptor,
quotaList: this.pointParam.data.quotaList,
sourceType: this.pointParam.data.sourceType
}