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

feat: echarts支持联动点击高亮

Browse Source
This commit is contained in:
wangjiahao 2022-06-28 12:03:40 +08:00
parent 2af5895a31
commit 95ec3b1c70
13 changed files with 67 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/views/chart/chart/bar/bar.js
View File

@ -1,8 +1,8 @@
import { hexColorToRGBA } from '../util.js'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseBarOption(chart_option, chart) {
export function baseBarOption(chart_option, chart, activeParam) {
// 处理shape attr
let customAttr = {}
if (chart.customAttr) {
@ -47,6 +47,8 @@ export function baseBarOption(chart_option, chart) {
y.label = customAttr.label
}
y.type = 'bar'
y.selectedMode = true
y.select = BASE_ECHARTS_SELECT
chart_option.legend.data.push(y.name)
chart_option.series.push(y)
}
@ -113,6 +115,8 @@ export function horizontalBarOption(chart_option, chart) {
y.label = customAttr.label
}
y.type = 'bar'
y.selectedMode = true
y.select = BASE_ECHARTS_SELECT
chart_option.legend.data.push(y.name)
chart_option.series.push(y)
}

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

@ -958,3 +958,9 @@ export const COLOR_PANEL = [
'#000000',
'#FFFFFF'
]
export const BASE_ECHARTS_SELECT = {
itemStyle: {
shadowBlur: 2
}
}

4
frontend/src/views/chart/chart/funnel/funnel.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseFunnelOption(chart_option, chart) {
// 处理shape attr
@ -47,6 +47,8 @@ export function baseFunnelOption(chart_option, chart) {
y.itemStyle = {
color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)
}
y.selectedMode = true
y.select = BASE_ECHARTS_SELECT
// y.type = 'funnel'
chart_option.series[0].data.push(y)
}

4
frontend/src/views/chart/chart/gauge/gauge.js
View File

@ -1,6 +1,6 @@
import { componentStyle } from '../common/common'
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_THRESHOLD } from '@/views/chart/chart/chart'
import { getScaleValue } from '@/components/canvas/utils/style'
export function baseGaugeOption(chart_option, chart, scale = 1) {
@ -44,6 +44,8 @@ export function baseGaugeOption(chart_option, chart, scale = 1) {
chart_option.series[0].itemStyle = {
color: hexColorToRGBA(customAttr.color.colors[0], customAttr.color.alpha)
}
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
// data只取第一个
const y = {
// name: chart.data.x[0],

4
frontend/src/views/chart/chart/line/line.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseLineOption(chart_option, chart) {
// 处理shape attr
@ -49,6 +49,8 @@ export function baseLineOption(chart_option, chart) {
delete y.areaStyle
}
}
y.selectedMode = true
y.select = BASE_ECHARTS_SELECT
// label
if (customAttr.label) {
y.label = customAttr.label

4
frontend/src/views/chart/chart/map/map.js
View File

@ -1,6 +1,6 @@
// import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, reverseColor } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseMapOption(chart_option, chart, themeStyle) {
// 处理shape attr
@ -33,6 +33,8 @@ export function baseMapOption(chart_option, chart, themeStyle) {
chart_option.title.text = chart.title
if (chart.data.series && chart.data.series.length > 0) {
chart_option.series[0].name = chart.data.series[0].name
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
// label
if (customAttr.label) {
const text = customAttr.label.formatter

5
frontend/src/views/chart/chart/mix/mix.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseMixOption(chart_option, chart) {
// 处理shape attr
@ -68,6 +68,9 @@ export function baseMixOption(chart_option, chart) {
}
chart_option.legend.data.push(y.name)
i >= yAxis.length ? (y.yAxisIndex = 1) : (y.yAxisIndex = 0)
y.selectedMode = true
y.select = BASE_ECHARTS_SELECT
chart_option.series.push(y)
}
}

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

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function basePieOption(chart_option, chart) {
// 处理shape attr
@ -27,6 +27,8 @@ export function basePieOption(chart_option, chart) {
chart_option.title.text = chart.title
if (chart.data.series.length > 0) {
chart_option.series[0].name = chart.data.series[0].name
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
// size
if (customAttr.size) {
chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%']
@ -79,6 +81,8 @@ export function rosePieOption(chart_option, chart) {
chart_option.title.text = chart.title
if (chart.data.series.length > 0) {
chart_option.series[0].name = chart.data.series[0].name
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
// size
if (customAttr.size) {
chart_option.series[0].radius = [customAttr.size.pieInnerRadius + '%', customAttr.size.pieOuterRadius + '%']

4
frontend/src/views/chart/chart/radar/radar.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import { BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
export function baseRadarOption(chart_option, chart) {
// 处理shape attr
@ -58,6 +58,8 @@ export function baseRadarOption(chart_option, chart) {
]
}
y.value = JSON.parse(JSON.stringify(y.data))
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
chart_option.series.push(d)
maxValues.push(Math.max.apply(null, y.value))

4
frontend/src/views/chart/chart/scatter/scatter.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle, seniorCfg } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import {BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP} from '@/views/chart/chart/chart'
let bubbleArray = []
let terminalType = 'pc'
@ -56,6 +56,8 @@ export function baseScatterOption(chart_option, chart, terminal = 'pc') {
y.label = customAttr.label
}
y.type = 'scatter'
y.selectedMode = true
y.select = BASE_ECHARTS_SELECT
chart_option.legend.data.push(y.name)
chart_option.series.push(y)
}

4
frontend/src/views/chart/chart/treemap/treemap.js
View File

@ -1,6 +1,6 @@
import { hexColorToRGBA } from '@/views/chart/chart/util'
import { componentStyle } from '../common/common'
import { DEFAULT_TOOLTIP } from '@/views/chart/chart/chart'
import {BASE_ECHARTS_SELECT, DEFAULT_TOOLTIP} from '@/views/chart/chart/chart'
export function baseTreemapOption(chart_option, chart) {
// 处理shape attr
@ -52,6 +52,8 @@ export function baseTreemapOption(chart_option, chart) {
y.itemStyle = {
color: hexColorToRGBA(customAttr.color.colors[i % customAttr.color.colors.length], customAttr.color.alpha)
}
chart_option.series[0].selectedMode = true
chart_option.series[0].select = BASE_ECHARTS_SELECT
// y.type = 'treemap'
chart_option.series[0].data.push(y)
}

49
frontend/src/views/chart/components/ChartComponent.vue
View File

@ -74,7 +74,6 @@ import {
import {
baseMixOption
} from '@/views/chart/chart/mix/mix'
// import eventBus from '@/components/canvas/utils/eventBus'
import {
uuid
} from 'vue-uuid'
@ -82,6 +81,7 @@ import {
geoJson
} from '@/api/map/map'
import ViewTrackBar from '@/components/canvas/components/Editor/ViewTrackBar'
import eventBus from '@/components/canvas/utils/eventBus'
export default {
name: 'ChartComponent',
@ -138,10 +138,10 @@ export default {
top: '0px'
},
pointParam: null,
dynamicAreaCode: null,
borderRadius: '0px',
mapCenter: null
mapCenter: null,
linkageActiveParam: null
}
},
@ -168,6 +168,17 @@ export default {
this.myChart.dispose()
},
methods: {
reDrawView() {
this.myChart.dispatchAction({ type: 'unselect', seriesIndex: this.linkageActiveParam.seriesIndex, name: this.linkageActiveParam.name })
this.myChart.dispatchAction({ type: 'downplay', seriesIndex: this.linkageActiveParam.seriesIndex, name: this.linkageActiveParam.name })
this.linkageActiveParam = null
},
linkageActive() {
if (this.linkageActiveParam) {
this.myChart.dispatchAction({ type: 'select', seriesIndex: this.linkageActiveParam.seriesIndex, name: this.linkageActiveParam.name })
this.myChart.dispatchAction({ type: 'highlight', seriesIndex: this.linkageActiveParam.seriesIndex, name: this.linkageActiveParam.name })
}
},
preDraw() {
// 基于准备好的dom，初始化echarts实例
// 渲染echart等待dom加载完毕,渲染之前先尝试销毁具有相同id的echart 放置多次切换仪表板有重复id情况
@ -185,6 +196,13 @@ export default {
this.myChart.off('click')
this.myChart.on('click', function(param) {
that.pointParam = param
if (that.linkageActiveParam) {
that.reDrawView()
}
that.linkageActiveParam = {
seriesIndex: that.pointParam.seriesIndex,
name: that.pointParam.name
}
if (that.trackMenu.length < 2) { // 只有一个事件直接调用
that.trackClick(that.trackMenu[0])
} else { // 视图关联多个事件
@ -195,7 +213,7 @@ export default {
})
})
},
drawEcharts() {
drawEcharts(activeParam) {
const chart = this.chart
let chart_option = {}
// type
@ -231,7 +249,6 @@ export default {
if (this.myChart && this.searchCount > 0) {
chart_option.animation = false
}
if (chart.type === 'map') {
const customAttr = JSON.parse(chart.customAttr)
if (!customAttr.areaCode) {
@ -256,33 +273,14 @@ export default {
return
}
this.myEcharts(chart_option)
this.$nextTick(() => (this.linkageActive()))
},
registerDynamicMap(areaCode) {
this.dynamicAreaCode = areaCode
// if (this.$store.getters.geoMap[areaCode]) {
// const json = this.$store.getters.geoMap[areaCode]
// this.myChart.dispose()
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// this.$echarts.registerMap('MAP', json)
// return
// }
// geoJson(areaCode).then(res => {
// this.$store.dispatch('map/setGeo', {
// key: areaCode,
// value: res
// }).then(() => {
// this.myChart.dispose()
// this.myChart = this.$echarts.getInstanceByDom(document.getElementById(this.chartId))
// this.$echarts.registerMap('MAP', res)
// })
// }).catch(() => {
// this.downOrUp = true
// })
},
initMapChart(geoJson, chart) {
this.$echarts.registerMap('MAP', geoJson)
// this.$echarts.getMap('MAP') || this.$echarts.registerMap('MAP', geoJson)
const base_json = JSON.parse(JSON.stringify(BASE_MAP))
let themeStyle = null
if (this.themeStyle) {
@ -351,6 +349,7 @@ export default {
this.$emit('onChartClick', this.pointParam)
break
case 'linkage':
this.linkageActive()
this.$store.commit('addViewTrackFilter', linkageParam)
break
case 'jump':

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

@ -132,7 +132,7 @@ export default {
},
linkageActive() {
this.linkageActiveHistory = true
this.myChart.setState('selected', (param) => {
this.myChart.setState('active', (param) => {
if (Array.isArray(param)) {
return false
} else {