diff --git a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue index 1750ae9ec6..ea6ad0d9da 100644 --- a/frontend/src/components/canvas/components/editor/ComponentWrapper.vue +++ b/frontend/src/components/canvas/components/editor/ComponentWrapper.vue @@ -11,6 +11,7 @@ :terminal="terminal" :element="config" :canvas-id="canvasId" + :chart="chart" :show-position="showPosition" @showViewDetails="showViewDetails" /> @@ -65,6 +66,7 @@ :screen-shot="screenShot" :canvas-style-data="canvasStyleData" :show-position="showPosition" + @fill-chart-2-parent="setChartData" /> @@ -146,7 +148,8 @@ export default { }, data() { return { - previewVisible: false + previewVisible: false, + chart: null } }, computed: { @@ -211,6 +214,9 @@ export default { runAnimation(this.$el, this.config.animations) }, methods: { + setChartData(chart) { + this.chart = chart + }, getStyle, getShapeStyleIntDeDrag(style, prop) { if (prop === 'rotate') { diff --git a/frontend/src/components/canvas/components/editor/DeEditor.vue b/frontend/src/components/canvas/components/editor/DeEditor.vue index cf74a1599e..99be1148b5 100644 --- a/frontend/src/components/canvas/components/editor/DeEditor.vue +++ b/frontend/src/components/canvas/components/editor/DeEditor.vue @@ -107,6 +107,7 @@ :canvas-style-data="canvasStyleData" @input="handleInput" @trigger-plugin-edit="pluginEditHandler" + @fill-chart-2-parent="setChartData" /> @@ -1096,6 +1097,13 @@ export default { created() { }, methods: { + setChartData(chart) { + this.componentData.forEach((item, index) => { + if (item.type === 'view' && item.component === 'user-view' && item.propValue.viewId === chart.id) { + this.$refs['deDragRef'][index].setChartData(chart) + } + }) + }, triggerResetButton() { this.triggerSearchButton(true) }, diff --git a/frontend/src/components/canvas/components/editor/EditBar.vue b/frontend/src/components/canvas/components/editor/EditBar.vue index ac4ca871e9..c3ae7549bc 100644 --- a/frontend/src/components/canvas/components/editor/EditBar.vue +++ b/frontend/src/components/canvas/components/editor/EditBar.vue @@ -94,7 +94,7 @@ > @@ -140,6 +140,11 @@ + + @@ -185,9 +190,10 @@ import toast from '@/components/canvas/utils/toast' import FieldsList from '@/components/canvas/components/editor/FieldsList' import LinkJumpSet from '@/views/panel/linkJumpSet' import Background from '@/views/background/index' +import MapLayerController from '@/views/chart/components/map/MapLayerController' export default { - components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField }, + components: { Background, LinkJumpSet, FieldsList, SettingMenu, LinkageField, MapLayerController }, props: { canvasId: { @@ -226,6 +232,10 @@ export default { type: String, required: false, default: 'NotProvided' + }, + chart: { + type: Object, + default: null } }, data() { @@ -249,6 +259,13 @@ export default { }, computed: { + yaxis() { + if (!this.chart) return [] + return JSON.parse(this.chart.yaxis) + }, + showMapLayerController() { + return this.curComponent.type === 'view' && this.terminal === 'pc' && this.curComponent.propValue.innerType === 'map' && this.yaxis.length > 1 + }, detailsShow() { return this.curComponent.type === 'view' && this.terminal === 'pc' && this.curComponent.propValue.innerType !== 'richTextView' }, @@ -519,7 +536,7 @@ export default { background-color: var(--primary, #3370ff); } -.bar-main i { +.bar-main ::v-deep i { color: white; float: right; margin-right: 3px; diff --git a/frontend/src/components/canvas/customComponent/UserView.vue b/frontend/src/components/canvas/customComponent/UserView.vue index fa814f692c..eb526b646d 100644 --- a/frontend/src/components/canvas/customComponent/UserView.vue +++ b/frontend/src/components/canvas/customComponent/UserView.vue @@ -518,6 +518,9 @@ export default { this.chartScale(this.changeScaleIndex) }, deep: true + }, + 'chart.yaxis': function(newVal, oldVal) { + this.$emit('fill-chart-2-parent', this.chart) } }, mounted() { @@ -691,6 +694,7 @@ export default { // 将视图传入echart组件 if (response.success) { this.chart = response.data + this.$emit('fill-chart-2-parent', this.chart) this.getDataOnly(response.data, dataBroadcast) this.chart['position'] = this.inTab ? 'tab' : 'panel' // 记录当前数据 diff --git a/frontend/src/components/deDrag/index.vue b/frontend/src/components/deDrag/index.vue index 36589b10a1..b52f2d563a 100644 --- a/frontend/src/components/deDrag/index.vue +++ b/frontend/src/components/deDrag/index.vue @@ -39,6 +39,7 @@ :active-model="'edit'" :canvas-id="canvasId" :element="element" + :chart="chart" @showViewDetails="showViewDetails" @amRemoveItem="amRemoveItem" @amAddItem="amAddItem" @@ -384,6 +385,7 @@ export default { }, data: function() { return { + chart: null, contentDisplay: true, // 当画布在tab中是 宽度左右拓展的余量 parentWidthTabOffset: 40, @@ -802,6 +804,9 @@ export default { this.beforeDestroyFunction() }, methods: { + setChartData(chart) { + this.chart = chart + }, // 重置边界和鼠标状态 resetBoundsAndMouseState() { this.mouseClickPosition = { mouseX: 0, mouseY: 0, x: 0, y: 0, w: 0, h: 0 } diff --git a/frontend/src/components/widget/deWidget/inputStyleMixin.js b/frontend/src/components/widget/deWidget/inputStyleMixin.js index 5efdbd95d4..362ba87875 100644 --- a/frontend/src/components/widget/deWidget/inputStyleMixin.js +++ b/frontend/src/components/widget/deWidget/inputStyleMixin.js @@ -58,7 +58,7 @@ export default { mounted() { if (!this.isFilterComponent) return this.typeTransform().forEach(item => { - const nodeCache = this.$refs.deOutWidget?.$refs[item].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget.$refs[item].$el + const nodeCache = this.$refs.deOutWidget?.$refs[item].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget?.$refs[item].$el this.styleAttrs.forEach(ele => { nodeCache.style[this.attrsMap[ele]] = this.element.style[ele] this[this.element.serviceName] && this[this.element.serviceName](this.selectRange(item), ele, this.element.style[ele]) @@ -70,9 +70,11 @@ export default { let nodeCache = '' this.styleAttrs.forEach(ele => { if (!nodeCache) { - nodeCache = this.$refs.deOutWidget?.$refs[type].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget.$refs[type].$el + nodeCache = this.$refs.deOutWidget?.$refs[type].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget?.$refs[type].$el + } + if (nodeCache) { + nodeCache.style[this.attrsMap[ele]] = newValue[ele] } - nodeCache.style[this.attrsMap[ele]] = newValue[ele] this[this.element.serviceName] && this[this.element.serviceName](this.selectRange(type), ele, newValue[ele]) }) }, diff --git a/frontend/src/lang/en.js b/frontend/src/lang/en.js index ab85919e2c..1c29812fce 100644 --- a/frontend/src/lang/en.js +++ b/frontend/src/lang/en.js @@ -915,6 +915,7 @@ export default { password_input_error: 'Original password input error' }, chart: { + layer_controller: 'Quota switch', suspension: 'Suspension', chart_background: 'Component background', solid_color: 'Solid color', diff --git a/frontend/src/lang/tw.js b/frontend/src/lang/tw.js index d62580b15b..b9cb26303c 100644 --- a/frontend/src/lang/tw.js +++ b/frontend/src/lang/tw.js @@ -915,6 +915,7 @@ export default { password_input_error: '原始密碼輸入錯誤' }, chart: { + layer_controller: '指標切換', suspension: '懸浮', chart_background: '組件背景', solid_color: '純色', diff --git a/frontend/src/lang/zh.js b/frontend/src/lang/zh.js index ee387a98f6..6de5ff7443 100644 --- a/frontend/src/lang/zh.js +++ b/frontend/src/lang/zh.js @@ -914,6 +914,7 @@ export default { password_input_error: '原始密码输入错误' }, chart: { + layer_controller: '指标切换', suspension: '悬浮', chart_background: '组件背景', solid_color: '纯色', diff --git a/frontend/src/views/chart/chart/map/map.js b/frontend/src/views/chart/chart/map/map.js index bf9f18311c..2675295976 100644 --- a/frontend/src/views/chart/chart/map/map.js +++ b/frontend/src/views/chart/chart/map/map.js @@ -41,8 +41,22 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) { // 处理shape attr let customAttr = {} let isGradient = false + let seriesIndex = 0 if (chart.customAttr) { customAttr = JSON.parse(chart.customAttr) + if (chart.yaxis && chart.yaxis.length > 1) { + let currentSeriesId = customAttr.currentSeriesId + const yAxis = JSON.parse(chart.yaxis) + if (!currentSeriesId || !yAxis.some(item => item.id === currentSeriesId)) { + currentSeriesId = yAxis[0].id + } + chart.data.series.forEach((item, index) => { + if (item.data[0].quotaList[0].id === currentSeriesId) { + seriesIndex = index + return false + } + }) + } if (customAttr.color) { const colorValue = customAttr.color.value @@ -57,7 +71,7 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) { const tooltip = JSON.parse(JSON.stringify(customAttr.tooltip)) const reg = new RegExp('\n', 'g') const text = tooltip.formatter.replace(reg, '
') - tooltip.formatter = function(params) { + tooltip.formatter = params => { const a = params.seriesName const b = params.name const c = params.value ? params.value : '' @@ -74,14 +88,14 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) { if (chart.data) { 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].name = chart.data.series[seriesIndex].name chart_option.series[0].selectedMode = true chart_option.series[0].select = BASE_ECHARTS_SELECT // label if (customAttr.label) { const text = customAttr.label.formatter chart_option.series[0].label = customAttr.label - chart_option.series[0].label.formatter = function(params) { + chart_option.series[0].label.formatter = params => { const a = params.seriesName const b = params.name const c = params.value ? params.value : '' @@ -97,12 +111,12 @@ export function baseMapOption(chart_option, chart, themeStyle, curAreaCode) { } chart_option.series[0].itemStyle.emphasis.label.show = customAttr.label.show } - const valueArr = chart.data.series[0].data + const valueArr = chart.data.series[seriesIndex].data // visualMap if (!isGradient) { if (valueArr && valueArr.length > 0) { const values = [] - valueArr.forEach(function(ele) { + valueArr.forEach(ele => { values.push(ele.value) }) chart_option.visualMap.min = Math.min(...values) diff --git a/frontend/src/views/chart/components/ChartComponent.vue b/frontend/src/views/chart/components/ChartComponent.vue index e4cfcfce24..9e7693e8b1 100644 --- a/frontend/src/views/chart/components/ChartComponent.vue +++ b/frontend/src/views/chart/components/ChartComponent.vue @@ -12,41 +12,14 @@ style="width: 100%;height: 100%;overflow: hidden;" :style="{ borderRadius: borderRadius}" /> -
-
- -
- -
- -
- -
- -
- -
+ :chart="chart" + :button-text-color="buttonTextColor" + @roam-map="roamMap" + @reset-zoom="resetZoom" + />
@@ -81,12 +54,14 @@ import { uuid } from 'vue-uuid' import { geoJson } from '@/api/map/map' import ViewTrackBar from '@/components/canvas/components/editor/ViewTrackBar' import { reverseColor } from '../chart/common/common' +import MapController from './map/MapController.vue' import { mapState } from 'vuex' - +import bus from '@/utils/bus' export default { name: 'ChartComponent', components: { - ViewTrackBar + ViewTrackBar, + MapController }, props: { chart: { @@ -178,9 +153,11 @@ export default { } }, mounted() { + bus.$on('change-series-id', this.changeSeriesId) this.preDraw() }, beforeDestroy() { + bus.$off('change-series-id', this.changeSeriesId) window.removeEventListener('resize', this.myChart.resize) this.myChart.dispose() this.myChart = null @@ -189,6 +166,15 @@ export default { this.loadThemeStyle() }, methods: { + changeSeriesId(param) { + const { id, seriesId } = param + if (id !== this.chart.id) { + return + } + const customAttr = JSON.parse(this.chart.customAttr) + customAttr.currentSeriesId = seriesId + this.chart.customAttr = JSON.stringify(customAttr) + }, reDrawView() { this.myChart.dispatchAction({ type: 'unselect', diff --git a/frontend/src/views/chart/components/map/MapController.vue b/frontend/src/views/chart/components/map/MapController.vue new file mode 100644 index 0000000000..706abe3663 --- /dev/null +++ b/frontend/src/views/chart/components/map/MapController.vue @@ -0,0 +1,93 @@ + + + + + diff --git a/frontend/src/views/chart/components/map/MapLayerController.vue b/frontend/src/views/chart/components/map/MapLayerController.vue new file mode 100644 index 0000000000..5f33a6d5cf --- /dev/null +++ b/frontend/src/views/chart/components/map/MapLayerController.vue @@ -0,0 +1,126 @@ + + + + + diff --git a/frontend/src/views/chart/view/ChartEdit.vue b/frontend/src/views/chart/view/ChartEdit.vue index 07ae672ac8..4bbdea9122 100644 --- a/frontend/src/views/chart/view/ChartEdit.vue +++ b/frontend/src/views/chart/view/ChartEdit.vue @@ -2069,9 +2069,7 @@ export default { } }) } - if (view.type === 'map' && view.yaxis.length > 1) { - view.yaxis = [view.yaxis[0]] - } + view.yaxis.forEach(function(ele) { if (!ele.chartType) { ele.chartType = 'bar' @@ -2823,7 +2821,7 @@ export default { addYaxis(e) { this.dragCheckType(this.view.yaxis, 'q') this.dragMoveDuplicate(this.view.yaxis, e) - if ((this.view.type === 'map' || this.view.type === 'waterfall' || this.view.type === 'word-cloud' || this.view.type.includes('group')) && this.view.yaxis.length > 1) { + if ((this.view.type === 'waterfall' || this.view.type === 'word-cloud' || this.view.type.includes('group')) && this.view.yaxis.length > 1) { this.view.yaxis = [this.view.yaxis[0]] } this.calcData(true)