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

Merge pull request #2514 from dataease/refactor_dateset

Browse Source 
feat: antV图支持联动高亮
This commit is contained in:
王嘉豪 2022-06-27 16:51:29 +08:00 committed by GitHub
commit c9d1434a7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 58 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/canvas/components/Editor/CanvasOptBar.vue
View File

@ -8,6 +8,7 @@
<script>
import { mapState } from 'vuex'
import bus from '@/utils/bus'
export default {
computed: {
@ -27,6 +28,7 @@ export default {
methods: {
clearAllLinkage() {
this.$store.commit('clearPanelLinkageInfo')
bus.$emit('clear_panel_linkage', { viewId: 'all' })
}
}
}

18
frontend/src/components/canvas/components/Editor/EditBar.vue
View File

@ -196,23 +196,6 @@ export default {
// resize
this.$emit('resizeView')
},
// edit() {
// // 编辑时临时保存 当前修改的画布
// this.$store.dispatch('panel/setComponentDataTemp', JSON.stringify(this.componentData))
// this.$store.dispatch('panel/setCanvasStyleDataTemp', JSON.stringify(this.canvasStyleData))
// if (this.curComponent.type === 'view') {
// this.$store.dispatch('chart/setViewId', null)
// this.$store.dispatch('chart/setViewId', this.curComponent.propValue.viewId)
// bus.$emit('PanelSwitchComponent', { name: 'ChartEdit', param: { 'id': this.curComponent.propValue.viewId, 'optType': 'edit' }})
// }
// if (this.curComponent.type === 'custom') {
// bus.$emit('component-dialog-edit')
// }
// // 编辑样式组件
// if (this.curComponent.type === 'v-text' || this.curComponent.type === 'rect-shape') {
// bus.$emit('component-dialog-style')
// }
// },
edit() {
if (this.curComponent.type === 'custom') {
bus.$emit('component-dialog-edit')
@ -240,6 +223,7 @@ export default {
}
}
})
bus.$emit('clear_panel_linkage', { viewId: this.element.propValue.viewId })
},
linkJumpSet() {
this.$emit('linkJumpSet')

5
frontend/src/components/canvas/custom-component/UserView.vue
View File

@ -492,6 +492,11 @@ export default {
bus.$on('onThemeAttrChange', (param) => {
this.optFromBatchSingleProp(param)
})
bus.$on('clear_panel_linkage', (param) => {
if (param.viewId === 'all' || param.viewId === this.element.propValue.viewId) {
this.$refs[this.element.propValue.id].reDrawView()
}
})
},
addViewTrackFilter(linkageParam) {

1
frontend/src/store/index.js
View File

@ -481,7 +481,6 @@ const data = {
item.linkageFilters.splice(0, item.linkageFilters.length)
}
})
// state.styleChangeTimes++
},
setDragComponentInfo(state, dragComponentInfo) {
dragComponentInfo['shadowStyle'] = {

6
frontend/src/views/chart/chart/bar/bar_antv.js
View File

@ -43,12 +43,6 @@ export function baseBarOptionAntV(plot, container, chart, action, isGroup, isSta
slider: slider,
annotations: analyse,
interactions: [
{
type: 'element-active', cfg: {
start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
}
},
{
type: 'legend-active', cfg: {
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],

6
frontend/src/views/chart/chart/funnel/funnel_antv.js
View File

@ -24,12 +24,6 @@ export function baseFunnelOptionAntV(plot, container, chart, action) {
legend: legend,
conversionTag: false,
interactions: [
{
type: 'element-active', cfg: {
start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
}
},
{
type: 'legend-active', cfg: {
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],

6
frontend/src/views/chart/chart/line/line_antv.js
View File

@ -44,12 +44,6 @@ export function baseLineOptionAntV(plot, container, chart, action) {
slider: slider,
annotations: analyse,
interactions: [
{
type: 'element-active', cfg: {
start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
}
},
{
type: 'legend-active', cfg: {
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],

12
frontend/src/views/chart/chart/mix/mix_antv.js
View File

@ -54,18 +54,6 @@ export function baseMixOptionAntV(plot, container, chart, action) {
xAxis: i > 0 ? false : xAxis,
yAxis: (i >= JSON.parse(chart.yaxis).length) ? yAxisExt : yAxis,
interactions: [
{
type: 'element-active', cfg: {
start: [{
trigger: 'element:mouseenter',
action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer']
}],
end: [{
trigger: 'element:mouseleave',
action: ['element-highlight:reset', 'element-active:reset', 'cursor:default']
}]
}
},
{
type: 'legend-active', cfg: {
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],

6
frontend/src/views/chart/chart/pie/pie_antv.js
View File

@ -44,12 +44,6 @@ export function basePieOptionAntV(plot, container, chart, action) {
}
},
interactions: [
{
type: 'element-active', cfg: {
start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
}
},
{
type: 'legend-active', cfg: {
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],

6
frontend/src/views/chart/chart/radar/radar_antv.js
View File

@ -41,12 +41,6 @@ export function baseRadarOptionAntV(plot, container, chart, action) {
}
},
interactions: [
{
type: 'element-active', cfg: {
start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
}
},
{
type: 'legend-active', cfg: {
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],

6
frontend/src/views/chart/chart/scatter/scatter_antv.js
View File

@ -47,12 +47,6 @@ export function baseScatterOptionAntV(plot, container, chart, action) {
lineWidth: 0
},
interactions: [
{
type: 'element-active', cfg: {
start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
}
},
{
type: 'legend-active', cfg: {
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],

6
frontend/src/views/chart/chart/treemap/treemap_antv.js
View File

@ -24,12 +24,6 @@ export function baseTreemapOptionAntV(plot, container, chart, action) {
tooltip: tooltip,
legend: legend,
interactions: [
{
type: 'element-active', cfg: {
start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
}
},
{
type: 'legend-active', cfg: {
start: [{ trigger: 'legend-item:mouseenter', action: ['element-active:reset'] }],

6
frontend/src/views/chart/chart/waterfall/waterfall.js
View File

@ -69,12 +69,6 @@ export function baseWaterfallOptionAntV(plot, container, chart, action) {
fallingFill: theme.styleSheet.paletteQualitative10[1],
total: total,
interactions: [
{
type: 'element-active', cfg: {
start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
}
},
{
type: 'tooltip', cfg: {
start: [{ trigger: 'interval:mousemove', action: 'tooltip:show' }],

6
frontend/src/views/chart/chart/wordCloud/word_cloud.js
View File

@ -30,12 +30,6 @@ export function baseWordCloudOptionAntV(plot, container, chart, action) {
tooltip: tooltip,
legend: false,
interactions: [
{
type: 'element-active', cfg: {
start: [{ trigger: 'element:mouseenter', action: ['element-highlight:highlight', 'element-active:reset', 'cursor:pointer'] }],
end: [{ trigger: 'element:mouseleave', action: ['element-highlight:reset', 'element-active:reset', 'cursor:default'] }]
}
}
]
}

51
frontend/src/views/chart/components/ChartComponentG2.vue
View File

@ -82,7 +82,10 @@ export default {
background: ''
},
title_show: true,
antVRenderStatus: false
antVRenderStatus: false,
linkageActiveParam: null,
linkageActiveHistory: false
}
},
@ -115,6 +118,43 @@ export default {
this.preDraw()
},
methods: {
reDrawView() {
this.linkageActiveHistory = false
this.myChart.render()
},
linkageActivePre() {
if (this.linkageActiveHistory) {
this.reDrawView()
}
this.$nextTick(() => {
this.linkageActive()
})
},
linkageActive() {
this.linkageActiveHistory = true
this.myChart.setState('selected', (param) => {
if (Array.isArray(param)) {
return false
} else {
if (this.checkSelected(param)) {
return true
}
}
})
this.myChart.setState('inactive', (param) => {
if (Array.isArray(param)) {
return false
} else {
if (!this.checkSelected(param)) {
return true
}
}
})
},
checkSelected(param) {
return (this.linkageActiveParam.name.indexOf(param.name) > -1) &&
(this.linkageActiveParam.category === param.category)
},
preDraw() {
this.initTitle()
this.calcHeightDelay()
@ -186,6 +226,9 @@ export default {
if (this.antVRenderStatus) {
this.myChart.render()
if (this.linkageActiveHistory) {
this.linkageActive()
}
}
this.setBackGroundBorder()
},
@ -196,6 +239,10 @@ export default {
} else {
this.pointParam = param.data
}
this.linkageActiveParam = {
category: this.pointParam.data.category ? this.pointParam.data.category : 'NO_DATA',
name: this.pointParam.data.name ? this.pointParam.data.name : 'NO_DATA'
}
if (this.trackMenu.length < 2) { // 只有一个事件直接调用
this.trackClick(this.trackMenu[0])
} else { // 视图关联多个事件
@ -236,11 +283,13 @@ export default {
dimensionList: this.pointParam.data.dimensionList,
quotaList: this.pointParam.data.quotaList
}
switch (trackAction) {
case 'drill':
this.$emit('onChartClick', this.pointParam)
break
case 'linkage':
this.linkageActivePre()
this.$store.commit('addViewTrackFilter', linkageParam)
break
case 'jump':