From af5b86d9673667cd37e8d2e130639899f68ca9c6 Mon Sep 17 00:00:00 2001 From: junjun Date: Tue, 28 Jun 2022 10:27:16 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E8=A1=A8=E6=A0=BC=E6=BB=9A?= =?UTF-8?q?=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/chart/components/ChartComponentS2.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/views/chart/components/ChartComponentS2.vue b/frontend/src/views/chart/components/ChartComponentS2.vue index 839e890a96..0c93bcb5ca 100644 --- a/frontend/src/views/chart/components/ChartComponentS2.vue +++ b/frontend/src/views/chart/components/ChartComponentS2.vue @@ -389,7 +389,7 @@ export default { this.myChart.store.set('scrollY', this.scrollTop) this.myChart.render() - if (senior.scroll && senior.scrollCfg.open && (this.chart.type === 'table-normal' || (this.chart.type === 'table-info' && !this.showPage))) { + if (senior.scrollCfg && senior.scrollCfg.open && (this.chart.type === 'table-normal' || (this.chart.type === 'table-info' && !this.showPage))) { const rowHeight = customAttr.size.tableItemHeight const headerHeight = customAttr.size.tableTitleHeight From 45c2f724dac578b6cdcb22d8e8dd07970c07d84f Mon Sep 17 00:00:00 2001 From: junjun Date: Tue, 28 Jun 2022 10:42:47 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E6=B0=B4=E6=B3=A2=E5=9B=BE=E5=A4=A7?= =?UTF-8?q?=E5=B0=8F=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/chart/chart/util.js | 3 ++- .../shape-attr/SizeSelectorAntV.vue | 19 ++++++------------- 2 files changed, 8 insertions(+), 14 deletions(-) diff --git a/frontend/src/views/chart/chart/util.js b/frontend/src/views/chart/chart/util.js index de4ba5ead8..7e63f3f315 100644 --- a/frontend/src/views/chart/chart/util.js +++ b/frontend/src/views/chart/chart/util.js @@ -240,7 +240,8 @@ export const TYPE_CONFIGS = [ 'gaugeMin', 'gaugeMax', 'gaugeStartAngle', - 'gaugeEndAngle' + 'gaugeEndAngle', + 'gaugeTickCount' ], 'label-selector-ant-v': [ 'labelGauge' diff --git a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue index c0152d0c85..9eb1348ca8 100644 --- a/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue +++ b/frontend/src/views/chart/components/shape-attr/SizeSelectorAntV.vue @@ -277,7 +277,7 @@ - + @@ -314,22 +314,15 @@ @change="changeBarSizeCase('gaugeEndAngle')" /> - - - - - + + - - - + + + From 95ec3b1c707a6e82a68ca7f61ab62837415ec45f Mon Sep 17 00:00:00 2001 From: wangjiahao <1522128093@qq.com> Date: Tue, 28 Jun 2022 12:03:40 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat:=20echarts=E6=94=AF=E6=8C=81=E8=81=94?= =?UTF-8?q?=E5=8A=A8=E7=82=B9=E5=87=BB=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/views/chart/chart/bar/bar.js | 8 ++- frontend/src/views/chart/chart/chart.js | 6 +++ .../src/views/chart/chart/funnel/funnel.js | 4 +- frontend/src/views/chart/chart/gauge/gauge.js | 4 +- frontend/src/views/chart/chart/line/line.js | 4 +- frontend/src/views/chart/chart/map/map.js | 4 +- frontend/src/views/chart/chart/mix/mix.js | 5 +- frontend/src/views/chart/chart/pie/pie.js | 6 ++- frontend/src/views/chart/chart/radar/radar.js | 4 +- .../src/views/chart/chart/scatter/scatter.js | 4 +- .../src/views/chart/chart/treemap/treemap.js | 4 +- .../views/chart/components/ChartComponent.vue | 49 +++++++++---------- .../chart/components/ChartComponentG2.vue | 2 +- 13 files changed, 67 insertions(+), 37 deletions(-) diff --git a/frontend/src/views/chart/chart/bar/bar.js b/frontend/src/views/chart/chart/bar/bar.js index bfa55c727e..4bd33465fc 100644 --- a/frontend/src/views/chart/chart/bar/bar.js +++ b/frontend/src/views/chart/chart/bar/bar.js @@ -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) } diff --git a/frontend/src/views/chart/chart/chart.js b/frontend/src/views/chart/chart/chart.js index a731c2b239..dc8e119a52 100644 --- a/frontend/src/views/chart/chart/chart.js +++ b/frontend/src/views/chart/chart/chart.js @@ -958,3 +958,9 @@ export const COLOR_PANEL = [ '#000000', '#FFFFFF' ] + +export const BASE_ECHARTS_SELECT = { + itemStyle: { + shadowBlur: 2 + } +} diff --git a/frontend/src/views/chart/chart/funnel/funnel.js b/frontend/src/views/chart/chart/funnel/funnel.js index 12119c751c..07735a8968 100644 --- a/frontend/src/views/chart/chart/funnel/funnel.js +++ b/frontend/src/views/chart/chart/funnel/funnel.js @@ -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) } diff --git a/frontend/src/views/chart/chart/gauge/gauge.js b/frontend/src/views/chart/chart/gauge/gauge.js index 9b7c641bb1..dcaa374fb3 100644 --- a/frontend/src/views/chart/chart/gauge/gauge.js +++ b/frontend/src/views/chart/chart/gauge/gauge.js @@ -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], diff --git a/frontend/src/views/chart/chart/line/line.js b/frontend/src/views/chart/chart/line/line.js index 1ddb5138a6..2fc4be2bcb 100644 --- a/frontend/src/views/chart/chart/line/line.js +++ b/frontend/src/views/chart/chart/line/line.js @@ -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 diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js index 4dbf401587..2640996af9 100644 --- a/frontend/src/views/chart/chart/map/map.js +++ b/frontend/src/views/chart/chart/map/map.js @@ -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 diff --git a/frontend/src/views/chart/chart/mix/mix.js b/frontend/src/views/chart/chart/mix/mix.js index d35a0ac698..37779bc51c 100644 --- a/frontend/src/views/chart/chart/mix/mix.js +++ b/frontend/src/views/chart/chart/mix/mix.js @@ -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) } } diff --git a/frontend/src/views/chart/chart/pie/pie.js b/frontend/src/views/chart/chart/pie/pie.js index 8edd8fa447..80bb126866 100644 --- a/frontend/src/views/chart/chart/pie/pie.js +++ b/frontend/src/views/chart/chart/pie/pie.js @@ -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 + '%'] diff --git a/frontend/src/views/chart/chart/radar/radar.js b/frontend/src/views/chart/chart/radar/radar.js index 25e54398af..0e921b618b 100644 --- a/frontend/src/views/chart/chart/radar/radar.js +++ b/frontend/src/views/chart/chart/radar/radar.js @@ -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)) diff --git a/frontend/src/views/chart/chart/scatter/scatter.js b/frontend/src/views/chart/chart/scatter/scatter.js index 6e1121bacd..05dd41ba46 100644 --- a/frontend/src/views/chart/chart/scatter/scatter.js +++ b/frontend/src/views/chart/chart/scatter/scatter.js @@ -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) } diff --git a/frontend/src/views/chart/chart/treemap/treemap.js b/frontend/src/views/chart/chart/treemap/treemap.js index b8fc8f2f4d..559a40bc0b 100644 --- a/frontend/src/views/chart/chart/treemap/treemap.js +++ b/frontend/src/views/chart/chart/treemap/treemap.js @@ -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) } diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue index 0415f323cd..1e6fae8001 100644 --- a/frontend/src/views/chart/components/ChartComponent.vue +++ b/frontend/src/views/chart/components/ChartComponent.vue @@ -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': diff --git a/frontend/src/views/chart/components/ChartComponentG2.vue b/frontend/src/views/chart/components/ChartComponentG2.vue index 3e20adfe5f..5d703abdc3 100644 --- a/frontend/src/views/chart/components/ChartComponentG2.vue +++ b/frontend/src/views/chart/components/ChartComponentG2.vue @@ -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 {