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

Merge pull request #4945 from dataease/pr@dev@feat_flow_map

Browse Source 
feat(视图-流向地图): 视图增加流向地图支持
This commit is contained in:
wisonic-s 2023-03-31 21:59:36 +08:00 committed by GitHub
commit 32e87f9605
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 867 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
backend/src/main/java/io/dataease/service/chart/ChartViewService.java
View File

@ -606,7 +606,8 @@ public class ChartViewService {
List<ChartViewFieldDTO> xAxisExt = gson.fromJson(view.getXAxisExt(), tokenType);
if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")
|| StringUtils.containsIgnoreCase(view.getType(), "group")
|| ("antv".equalsIgnoreCase(view.getRender()) && "line".equalsIgnoreCase(view.getType()))) {
|| ("antv".equalsIgnoreCase(view.getRender()) && "line".equalsIgnoreCase(view.getType()))
|| StringUtils.equalsIgnoreCase(view.getType(), "flow-map")) {
xAxis.addAll(xAxisExt);
}
List<ChartViewFieldDTO> yAxis = gson.fromJson(view.getYAxis(), tokenType);
@ -714,6 +715,7 @@ public class ChartViewService {
break;
case "bar-group":
case "bar-group-stack":
case "flow-map":
xAxis = xAxis.stream().filter(item -> chartViewFieldNameList.contains(item.getDataeaseName()) || (!desensitizationList.keySet().contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());
yAxis = yAxis.stream().filter(item -> chartViewFieldNameList.contains(item.getDataeaseName()) || (!desensitizationList.keySet().contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());
xAxisBase = xAxisBase.stream().filter(item -> chartViewFieldNameList.contains(item.getDataeaseName()) || (!desensitizationList.keySet().contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());

18
frontend/package.json
View File

@ -26,15 +26,15 @@
},
"dependencies": {
"@antv/g2plot": "^2.4.9",
"@antv/l7": "2.8.31",
"@antv/l7-component": "2.8.31",
"@antv/l7-core": "2.8.31",
"@antv/l7-layers": "2.8.31",
"@antv/l7-maps": "2.8.31",
"@antv/l7-renderer": "2.8.31",
"@antv/l7-scene": "2.8.31",
"@antv/l7-source": "2.8.31",
"@antv/l7-utils": "2.8.31",
"@antv/l7": "2.15.0",
"@antv/l7-component": "2.15.0",
"@antv/l7-core": "2.15.0",
"@antv/l7-layers": "2.15.0",
"@antv/l7-maps": "2.15.0",
"@antv/l7-renderer": "2.15.0",
"@antv/l7-scene": "2.15.0",
"@antv/l7-source": "2.15.0",
"@antv/l7-utils": "2.15.0",
"@antv/s2": "1.35.0",
"@antv/util": "^2.0.17",
"@riophae/vue-treeselect": "0.4.0",

2
frontend/public/vendor/vendor-manifest.json vendored
View File

File diff suppressed because one or more lines are too long

59
frontend/public/vendor/vendor.dll.js vendored
View File

File diff suppressed because one or more lines are too long

2
frontend/src/components/canvas/utils/utils.js
View File

@ -85,7 +85,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
componentStyle.refreshViewEnable = (componentStyle.refreshViewEnable === undefined ? true : componentStyle.refreshViewEnable)
componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
componentStyle.pdfPageLine = (componentStyle.pdfPageLine || deepCopy(PAGE_LINE_DESIGN))
componentStyle.chartInfo = (componentStyle.chartInfo || deepCopy(PANEL_CHART_INFO))
componentStyle.chartInfo = { ...deepCopy(PANEL_CHART_INFO), ...componentStyle.chartInfo }
componentStyle.chartInfo.tabStyle = (componentStyle.chartInfo.tabStyle || deepCopy(TAB_COMMON_STYLE))
componentStyle.themeId = (componentStyle.themeId || 'NO_THEME')
componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')

1
frontend/src/icons/svg/flow-map.svg Normal file
View File

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1676619734624" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23822" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M907.411655 277.568736c2.943029 5.656837 5.427616 11.980869 7.264451 18.327414 3.611248 11.062963 5.176906 23.294542 5.176906 35.047214l0 509.329171c0 32.56365-12.879332 62.184271-34.588773 83.914178-21.709441 21.458731-51.579749 34.58775-84.373643 34.58775L210.172767 958.774463c-32.79287 0-62.643736-13.129019-83.914178-34.58775-21.709441-21.729907-35.297924-51.350528-35.297924-83.914178L90.960665 330.943364c0-32.56365 13.589506-62.643736 35.297924-84.352153 21.270443-21.500687 51.120284-34.609239 83.914178-34.609239l287.437501 0c10.165524-32.584116 28.492938-61.954027 51.559283-84.791152l1.378393-1.37737c37.530778-37.093826 90.00899-60.159148 146.994865-60.159148 57.904805 0 110.361527 23.524786 148.374282 61.536518l0 0c37.969776 37.530778 61.494563 90.217744 61.494563 147.664108L907.411655 277.568736 907.411655 277.568736zM697.54281 173.990706 697.54281 173.990706c28.263717 0 54.064336 11.522428 72.829725 29.849842 18.536168 18.995633 29.849842 44.795229 29.849842 72.829725 0 28.263717-11.313673 54.273091-29.849842 72.579015-18.765389 18.786878-44.566008 30.080086-72.829725 30.080086-28.034497 0-54.042847-11.293207-72.370261-30.080086-18.765389-18.305925-30.309306-44.315298-30.309306-72.579015 0-28.034497 11.543917-53.834092 30.309306-72.829725C643.499963 185.513134 669.509337 173.990706 697.54281 173.990706L697.54281 173.990706zM743.216036 230.977605 743.216036 230.977605c-11.752672-11.522428-28.034497-18.786878-45.673226-18.786878s-33.920554 7.264451-45.234227 18.786878c-11.751648 11.773138-19.224854 27.595498-19.224854 45.693692 0 17.86795 7.473205 33.900088 19.224854 45.441958 11.313673 11.774161 27.595498 19.246343 45.234227 19.246343s33.920554-7.473205 45.673226-19.246343c11.772115-11.542894 18.786878-27.574009 18.786878-45.441958C762.002914 258.573103 754.98815 242.750743 743.216036 230.977605L743.216036 230.977605zM488.134453 275.772834 488.134453 275.772834l-277.960663 0c-15.175631 0-28.952402 5.866614-39.139415 16.281825-9.936303 9.498328-16.281825 23.734564-16.281825 38.889729l0 509.329171c0 14.904455 6.345522 28.723182 16.281825 38.888705 10.187013 9.956769 23.963785 16.281825 39.139415 16.281825l590.717829 0c15.155165 0 29.181623-6.325056 39.139415-16.281825 9.956769-10.165524 16.281825-23.984251 16.281825-38.888705L856.31286 412.373978c-21.709441 24.861224-49.074695 44.774763-80.07371 57.216119l-63.770396 78.466096c-6.78452 8.141424-18.556635 9.05933-26.677593 2.505054-1.37737-0.710175-2.27481-1.607614-3.173273-2.505054l0 0-0.229221-0.437975-63.561641-78.027098c-37.969776-15.613606-70.554916-41.393759-93.850481-75.314313C501.70247 360.585475 488.134453 319.629691 488.134453 275.772834L488.134453 275.772834zM818.759569 153.86739 818.759569 153.86739c-30.747281-30.996968-73.727165-49.972135-121.215736-49.972135-46.590108 0-89.571015 18.515702-120.318296 49.054229l-0.918929 0.917906c-30.976502 31.207769-50.202379 74.396407-50.202379 120.987538 0 36.634362 11.334139 70.115917 30.309306 97.69095 19.893072 28.952402 47.948035 51.120284 80.740906 63.352887 3.402493 1.106194 5.886057 3.151783 8.350179 5.636371l52.039213 64.22986 52.456722-63.791885c1.816369-2.463098 4.550643-4.968152 7.93267-6.074346 33.023114-12.232602 61.266365-34.400484 80.72044-63.352887 19.455097-27.575032 30.768771-61.056588 30.768771-97.69095C869.420389 228.263797 849.75756 185.075159 818.759569 153.86739L818.759569 153.86739 818.759569 153.86739 818.759569 153.86739zM568.18565 516.619204 568.18565 516.619204c7.222495-7.451716 19.433608-7.451716 26.906813 0 7.451716 7.473205 7.451716 19.684318 0 27.157523l-52.707432 52.685943 109.464087 109.464087 122.134665-122.134665c7.242961-7.473205 19.455097-7.473205 26.906813 0 7.473205 7.68196 7.473205 19.684318 0 26.906813L679.006641 733.063815l40.913828 40.705074c7.473205 7.68196 7.473205 19.683295 0 27.136034-7.451716 7.68196-19.663852 7.68196-27.136034 0l-53.124941-53.834092-0.710175 0-0.208754-0.437975-0.459464-0.229221-0.229221-0.459464-0.437975-0.229221-0.229221-0.208754L515.708462 623.599727 295.882847 842.986343c-7.243985 7.222495-19.455097 7.222495-27.136034 0-7.264451-7.264451-7.264451-19.913539 0-26.906813L488.571405 596.46267l-90.468454-90.468454L251.086595 652.78135c-7.222495 7.451716-19.663852 7.451716-27.136034 0-7.222495-7.451716-7.222495-19.684318 0-27.157523l147.016355-146.765645-93.182262-92.973508c-7.68196-7.890714-7.68196-19.663852 0-27.115568 7.473205-7.473205 19.433608-7.473205 27.136034 0l105.85284 105.60213 0.229221 0.479931 0.208754 0.437975 0.459464 0.459464 0.437975 0.437975 103.598496 103.57803L568.18565 516.619204 568.18565 516.619204z" fill="#231815" p-id="23823"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

20
frontend/src/lang/en.js
View File

@ -1522,7 +1522,25 @@ export default {
table_auto_break_line: 'Auto Line Feed',
table_break_line_tip: 'If open this option,the table item height will disabled.',
step: 'Step(px)',
no_function: 'Function not enter，please input'
no_function: 'Function not enter，please input.',
chart_flow_map: 'Flow Map',
start_point: 'Start point(Lat/Long)',
end_point: 'End point(Lat/Long)',
line: 'Line',
map_style: 'Style',
map_pitch: 'Pitch',
map_rotation: 'Rotation',
map_style_normal: 'Normal',
map_style_light: 'Light',
map_style_dark: 'Dark',
map_style_whitesmoke: 'White Smoke',
map_style_fresh: 'Fresh',
map_style_grey: 'Grey',
map_style_graffiti: 'Graffiti',
map_style_macaron: 'Macaron',
map_style_blue: 'Blue',
map_style_darkblue: 'Dark Blue',
map_style_wine: 'Wine'
},
dataset: {
scope_edit: 'Effective only when editing',

20
frontend/src/lang/tw.js
View File

@ -1516,7 +1516,25 @@ export default {
table_auto_break_line: '自動換行',
table_break_line_tip: '開啟自動換行，表格行高設置將失效',
step: '步長(px)',
no_function: '函數尚未支持直接引用，請在字段表達式中手動輸入'
no_function: '函數尚未支持直接引用，請在字段表達式中手動輸入。',
chart_flow_map: '流向地圖',
start_point: '起點經緯度',
end_point: '終點經緯度',
line: '線條',
map_style: '風格',
map_pitch: '傾角',
map_rotation: '旋轉',
map_style_normal: '標準',
map_style_light: '明亮',
map_style_dark: '暗黑',
map_style_whitesmoke: '遠山黛',
map_style_fresh: '草色青',
map_style_grey: '雅士灰',
map_style_graffiti: '塗鴉',
map_style_macaron: '馬卡龍',
map_style_blue: '靛青藍',
map_style_darkblue: '極夜藍',
map_style_wine: '醬籽'
},
dataset: {
scope_edit: '僅編輯時生效',

35
frontend/src/lang/zh.js
View File

@ -1517,7 +1517,40 @@ export default {
table_auto_break_line: '自动换行',
table_break_line_tip: '开启自动换行，表格行高设置将失效',
step: '步长(px)',
no_function: '函数尚未支持直接引用，请在字段表达式中手动输入'
no_function: '函数尚未支持直接引用，请在字段表达式中手动输入。',
chart_flow_map: '流向地图',
start_point: '起点经纬度',
end_point: '终点经纬度',
line: '线条',
map_style: '风格',
map_pitch: '倾角',
map_rotation: '旋转',
map_style_normal: '标准',
map_style_light: '明亮',
map_style_dark: '暗黑',
map_style_whitesmoke: '远山黛',
map_style_fresh: '草色青',
map_style_grey: '雅士灰',
map_style_graffiti: '涂鸦',
map_style_macaron: '马卡龙',
map_style_blue: '靛青蓝',
map_style_darkblue: '极夜蓝',
map_style_wine: '酱籽',
map_line_type: '类型',
map_line_width: '线条宽度',
map_line_height: '线条高度',
map_line_linear: '渐变',
map_line_animate: '动画',
map_line_animate_duration: '动画间隔',
map_line_animate_interval: '轨迹间隔',
map_line_animate_trail_length: '轨迹长度',
map_line_type_line: '直线',
map_line_type_arc: '弧线',
map_line_type_arc_3d: '3D 弧线',
map_line_type_great_circle: '大圆弧',
map_line_color_source_color: '起始颜色',
map_line_color_target_color: '结束颜色',
map_line_theta_offset: '弧度'
},
dataset: {
scope_edit: '仅编辑时生效',

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

@ -31,7 +31,11 @@ export const DEFAULT_COLOR_CASE = {
gradient: false,
areaBaseColor: '#FFFFFF',
tableScrollBarColor: 'rgba(0, 0, 0, 0.15)',
tableScrollBarHoverColor: 'rgba(0, 0, 0, 0.4)'
tableScrollBarHoverColor: 'rgba(0, 0, 0, 0.4)',
mapStyle: 'normal',
mapLineGradient: false,
mapLineSourceColor: '#146C94',
mapLineTargetColor: '#576CBC',
}
export const DEFAULT_COLOR_CASE_DARK = {
@ -49,7 +53,11 @@ export const DEFAULT_COLOR_CASE_DARK = {
areaBorderColor: '#EBEEF5',
areaBaseColor: '5470C6',
tableScrollBarColor: 'rgba(255, 255, 255, 0.5)',
tableScrollBarHoverColor: 'rgba(255, 255, 255, 0.8)'
tableScrollBarHoverColor: 'rgba(255, 255, 255, 0.8)',
mapStyle: 'darkblue',
mapLineGradient: false,
mapLineSourceColor: '#2F58CD',
mapLineTargetColor: '#3795BD',
}
export const DEFAULT_SIZE = {
barDefault: true,
@ -130,7 +138,14 @@ export const DEFAULT_SIZE = {
showIndex: false,
indexLabel: '序号',
hPosition: 'center',
vPosition: 'center'
vPosition: 'center',
mapPitch: 0,
mapLineType: 'line',
mapLineWidth: 1,
mapLineAnimate: true,
mapLineAnimateDuration: 4,
mapLineAnimateInterval: 0.5,
mapLineAnimateTrailLength: 0.1
}
export const DEFAULT_SUSPENSION = {
show: true
@ -1144,3 +1159,13 @@ export const CHART_FONT_LETTER_SPACE = [
export const NOT_SUPPORT_PAGE_DATASET = ['kylin', 'sqlServer', 'es', 'presto', 'ds_doris', 'StarRocks', 'impala']
export const SUPPORT_Y_M = ['y', 'y_M', 'y_M_d']
export const DEFAULT_MAP = {
mapPitch: 0,
lineType: 'line',
lineWidth: 1,
lineAnimate: true,
lineAnimateDuration: 4,
lineAnimateInterval: 0.5,
lineAnimateTrailLength: 0.1
}

4
frontend/src/views/chart/chart/common/common_antv.js
View File

@ -104,9 +104,9 @@ export function getTheme(chart) {
}
}
}
// 百分比堆叠柱状图需要取消 offset，因为在顶部类别占比较低的时候有可能会把标签挤出去
// 堆叠柱状图需要取消 offset，因为在顶部类别占比较低的时候有可能会把标签挤出去
// 并且视觉上也比较不舒服
if (chart.type === 'percentage-bar-stack') {
if (equalsAny(chart.type, 'percentage-bar-stack', 'bar-group-stack')) {
theme.innerLabels.offset = 0
}
return theme

78
frontend/src/views/chart/chart/map/map_antv.js Normal file
View File

@ -0,0 +1,78 @@
import { Scene, LineLayer } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import { getLanguage } from '@/lang'
export function baseFlowMapOption(chartDom, chartId, chart, action) {
const xAxis = JSON.parse(chart.xaxis)
const xAxisExt = JSON.parse(chart.xaxisExt)
let customAttr
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
}
const size = customAttr.size
const color = customAttr.color
const mapStyle = `amap://styles/${color.mapStyle}`
const lang = getLanguage().includes('zh') ? 'zh' : 'en'
let init = false
if (!chartDom) {
chartDom = new Scene({
id: chartId,
map: new GaodeMap({
lang: lang,
pitch: size.mapPitch,
style: mapStyle
}),
logoVisible: false
})
init = true
}
if (xAxis?.length < 2 || xAxisExt?.length < 2) {
return chartDom
}
chartDom.removeAllLayer()
.then(() => {
const lineLayer = new LineLayer({
name: 'line',
blend: 'normal',
autoFit: true
})
.source(chart.data.tableRow, {
parser: {
type: 'json',
x: xAxis[0].dataeaseName,
y: xAxis[1].dataeaseName,
x1: xAxisExt[0].dataeaseName,
y1: xAxisExt[1].dataeaseName
}
})
.size(size.mapLineWidth)
.shape(size.mapLineType)
.animate({
enable: size.mapLineAnimate,
interval: size.lineAnimateInterval,
trailLength: size.lineAnimateTrailLength,
duration: size.lineAnimateDuration
})
if (color.mapLineGradient) {
lineLayer.style({
sourceColor: color.mapLineSourceColor,
targetColor: color.mapLineTargetColor,
opacity: (color.alpha / 100).toFixed(1)
})
} else {
lineLayer.style({
opacity: (color.alpha / 100).toFixed(1)
})
.color(color.mapLineSourceColor)
}
if (!init) {
chartDom.setPitch(size.mapPitch)
chartDom.setMapStyle(mapStyle)
chartDom.addLayer(lineLayer)
}
chartDom.on('loaded', () => {
chartDom.addLayer(lineLayer)
})
})
return chartDom
}

43
frontend/src/views/chart/chart/util.js
View File

@ -1830,6 +1830,49 @@ export const TYPE_CONFIGS = [
]
}
},
{
render: 'antv',
category: 'chart.chart_type_space',
value: 'flow-map',
title: 'chart.chart_flow_map',
icon: 'flow-map',
properties: [
'color-selector',
'size-selector-ant-v',
'title-selector-ant-v'
],
propertyInner: {
'color-selector': [
'alpha',
'mapStyle',
'lineLinear',
'lineSourceColor',
'lineTargetColor'
],
'size-selector-ant-v': [
'mapPitch',
'mapLineType',
'mapLineWidth',
'mapLineAnimate',
'mapLineAnimateDuration',
'mapLineAnimateInterval',
'mapLineAnimateTrailLength',
],
'title-selector-ant-v': [
'show',
'title',
'fontSize',
'color',
'hPosition',
'isItalic',
'isBolder',
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
/* 下面是echarts图表类型 */
{
render: 'echarts',

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

@ -59,6 +59,7 @@ import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
import ChartTitleUpdate from './ChartTitleUpdate.vue'
import { equalsAny } from '@/utils/StringUtils'
import { mapState } from 'vuex'
import { baseFlowMapOption } from '@/views/chart/chart/map/map_antv'
export default {
name: 'ChartComponentG2',
@ -274,6 +275,8 @@ export default {
this.myChart = baseWordCloudOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'chart-mix') {
this.myChart = baseMixOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'flow-map') {
this.myChart = baseFlowMapOption(this.myChart, this.chartId, chart, this.antVAction)
} else {
if (this.myChart) {
this.antVRenderStatus = false
@ -281,10 +284,10 @@ export default {
}
}
if (this.myChart && chart.type !== 'liquid' && this.searchCount > 0) {
if (this.myChart && !equalsAny(chart.type ,'liquid','flow-map') && this.searchCount > 0) {
this.myChart.options.animation = false
}
if (this.myChart.options.legend) {
if (this.myChart?.options?.legend) {
let pageNavigatorInactiveFill, pageNavigatorFill
if (this.canvasStyleData.panel.themeColor === 'dark') {
pageNavigatorFill = '#ffffff'
@ -402,6 +405,10 @@ export default {
this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
}
if (this.chart.type === 'flow-map') {
this.title_class.zIndex = 4
this.title_class.position = 'absolute'
}
}
this.initRemark()
},

82
frontend/src/views/chart/components/shapeAttr/ColorSelector.vue
View File

@ -263,7 +263,23 @@
/>
</el-form-item>
</div>
<el-form-item
v-show="showProperty('mapStyle')"
:label="$t('chart.map_style')"
class="form-item"
>
<el-select
v-model="colorForm.mapStyle"
@change="changeColorCase('mapStyle')"
>
<el-option
v-for="item in mapStyleOptions"
:key="item.name"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
v-show="showProperty('alpha')"
:label="$t('chart.not_alpha')"
@ -277,7 +293,35 @@
@change="changeColorCase('alpha')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.gradient')"
class="form-item"
>
<el-checkbox
v-model="colorForm.mapLineGradient"
:disabled="checkMapLineGradient"
@change="changeColorCase('lineLinear')"
/>
</el-form-item>
<el-form-item
:label="colorForm.mapLineGradient ? $t('chart.map_line_color_source_color') : $t('chart.color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.mapLineSourceColor"
@change="changeColorCase('mapLineSourceColor')"
/>
</el-form-item>
<el-form-item
v-if="colorForm.mapLineGradient"
:label="$t('chart.map_line_color_target_color')"
class="form-item"
>
<el-color-picker
v-model="colorForm.mapLineTargetColor"
@change="changeColorCase('mapLineTargetColor')"
/>
</el-form-item>
<el-form-item
v-show="showProperty('area-border-color') "
:label="$t('chart.area_border_color')"
@ -301,6 +345,7 @@ import { getColors } from '@/views/chart/chart/util'
import { mapState } from 'vuex'
import GradientColorSelector from '@/components/gradientColorSelector'
import bus from '@/utils/bus'
import { equalsAny } from '@/utils/StringUtils'
export default {
name: 'ColorSelector',
@ -414,10 +459,36 @@ export default {
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
customColor: null,
colorIndex: 0,
predefineColors: COLOR_PANEL
predefineColors: COLOR_PANEL,
mapStyleOptions: [
{ name: this.$t('chart.map_style_normal'), value: 'normal' },
{ name: this.$t('chart.map_style_darkblue'), value: 'darkblue' },
{ name: this.$t('chart.map_style_light'), value: 'light' },
{ name: this.$t('chart.map_style_dark'), value: 'dark' },
{ name: this.$t('chart.map_style_whitesmoke'), value: 'whitesmoke' },
{ name: this.$t('chart.map_style_fresh'), value: 'fresh' },
{ name: this.$t('chart.map_style_grey'), value: 'grey' },
{ name: this.$t('chart.map_style_graffiti'), value: 'graffiti' },
{ name: this.$t('chart.map_style_macaron'), value: 'macaron' },
{ name: this.$t('chart.map_style_blue'), value: 'blue' },
{ name: this.$t('chart.map_style_wine'), value: 'wine' }
]
}
},
computed: {
checkMapLineGradient() {
const chart = this.chart
if (chart.type === 'flow-map') {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
return customAttr.size.mapLineAnimate && equalsAny(customAttr.size.mapLineType, 'line', 'arc')
}
return false
},
...mapState([
'batchOptStatus',
'componentViewsData'
@ -494,6 +565,11 @@ export default {
this.$set(this.colorForm, 'gradient', this.colorForm.gradient || false)
this.colorForm.tableScrollBarColor = this.colorForm.tableScrollBarColor ? this.colorForm.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
this.colorForm.mapStyle = this.colorForm.mapStyle ? this.colorForm.mapStyle : DEFAULT_COLOR_CASE.mapStyle
this.colorForm.mapLineGradient = this.colorForm.mapLineGradient ? this.colorForm.mapLineGradient : DEFAULT_COLOR_CASE.mapLineGradient
this.colorForm.mapLineSourceColor = this.colorForm.mapLineSourceColor ? this.colorForm.mapLineSourceColor : DEFAULT_COLOR_CASE.mapLineSourceColor
this.colorForm.mapLineTargetColor = this.colorForm.mapLineTargetColor ? this.colorForm.mapLineTargetColor : DEFAULT_COLOR_CASE.mapLineTargetColor
this.initCustomColor()
}
}

304
frontend/src/views/chart/components/shapeAttr/MapSelectorAntV.vue Normal file
View File

@ -0,0 +1,304 @@
<template>
<div style="width: 100%">
<el-col>
<el-form
ref="mapForm"
:model="mapForm"
label-width="80px"
size="mini"
>
<el-form-item
:label="$t('chart.map_style')"
class="form-item"
>
<el-select
v-model="mapForm.mapStyle"
@change="changeMapAttr('mapStyle')"
>
<el-option
v-for="item in mapStyleOptions"
:key="item.name"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('chart.map_pitch')"
class="form-item form-item-slider"
>
<el-slider
v-model="mapForm.mapPitch"
:min="0"
:max="90"
@change="changeMapAttr('mapPitch')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.map_line_type')"
class="form-item"
>
<el-select
v-model="mapForm.lineType"
@change="changeMapAttr('lineType')"
>
<el-option
v-for="item in lineTypeOptions"
:key="item.name"
:label="item.name"
:value="item.value"
:disabled="checkLineType(item)"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('chart.map_line_width')"
class="form-item form-item-slider"
>
<el-slider
v-model="mapForm.lineWidth"
:min="1"
:max="10"
@change="changeMapAttr('lineWidth')"
/>
</el-form-item>
<el-form-item
:label="$t('panel.opacity')"
class="form-item form-item-slider"
>
<el-slider
v-model="mapForm.lineOpacity"
:min="0"
:max="1"
:step="0.01"
@change="changeMapAttr('lineOpacity')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.map_line_linear')"
class="form-item"
>
<el-checkbox
v-model="mapForm.lineLinear"
:disabled="checkLineLinear"
@change="changeMapAttr('lineLinear')"
/>
</el-form-item>
<el-form-item
:label="mapForm.lineLinear ? $t('chart.map_line_color_source_color') : $t('chart.color')"
class="form-item"
>
<el-color-picker
v-model="mapForm.lineSourceColor"
@change="changeMapAttr('lineSourceColor')"
/>
</el-form-item>
<el-form-item
v-if="mapForm.lineLinear"
:label="$t('chart.map_line_color_target_color')"
class="form-item"
>
<el-color-picker
v-model="mapForm.lineTargetColor"
@change="changeMapAttr('lineTargetColor')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.map_line_animate')"
class="form-item"
>
<el-checkbox
v-model="mapForm.lineAnimate"
:disabled="checkLineAnimate"
@change="changeMapAttr('lineAnimate')"
/>
</el-form-item>
<div v-if="mapForm.lineAnimate">
<el-form-item
:label="$t('chart.map_line_animate_duration')"
class="form-item form-item-slider"
>
<el-slider
v-model="mapForm.lineAnimateDuration"
:min="0"
:max="20"
@change="changeMapAttr('lineAnimateDuration')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.map_line_animate_interval')"
class="form-item form-item-slider"
>
<el-slider
v-model="mapForm.lineAnimateInterval"
:min="0"
:max="1"
:step="0.1"
@change="changeMapAttr('lineAnimateInterval')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.map_line_animate_trail_length')"
class="form-item form-item-slider"
>
<el-slider
v-model="mapForm.lineAnimateTrailLength"
:min="0"
:max="1"
:step="0.1"
@change="changeMapAttr('lineAnimateTrailLength')"
/>
</el-form-item>
</div>
</el-form>
</el-col>
</div>
</template>
<script>
import { DEFAULT_MAP } from '@/views/chart/chart/chart'
import _ from 'lodash'
import { equalsAny } from '@/utils/StringUtils'
export default {
name: 'MapSelectorAntV',
props: {
chart: {
type: Object,
required: true
},
propertyInner: {
type: Array,
required: false,
default: function() {
return []
}
}
},
data() {
return {
mapForm: _.cloneDeep(DEFAULT_MAP),
mapStyleOptions: [
{ name: this.$t('chart.map_style_normal'), value: 'normal' },
{ name: this.$t('chart.map_style_light'), value: 'light' },
{ name: this.$t('chart.map_style_dark'), value: 'dark' },
{ name: this.$t('chart.map_style_whitesmoke'), value: 'whitesmoke' },
{ name: this.$t('chart.map_style_fresh'), value: 'fresh' },
{ name: this.$t('chart.map_style_grey'), value: 'grey' },
{ name: this.$t('chart.map_style_graffiti'), value: 'graffiti' },
{ name: this.$t('chart.map_style_macaron'), value: 'macaron' },
{ name: this.$t('chart.map_style_darkblue'), value: 'darkblue' },
{ name: this.$t('chart.map_style_blue'), value: 'blue' },
{ name: this.$t('chart.map_style_wine'), value: 'wine' }
],
lineTypeOptions: [
{ name: this.$t('chart.map_line_type_line'), value: 'line' },
{ name: this.$t('chart.map_line_type_arc'), value: 'arc' },
{ name: this.$t('chart.map_line_type_arc_3d'), value: 'arc3d' },
{ name: this.$t('chart.map_line_type_great_circle'), value: 'greatcircle' }
]
}
},
computed: {
checkLineLinear() {
return this.mapForm.lineAnimate && equalsAny(this.mapForm.lineType, 'line', 'arc')
},
checkLineAnimate() {
return this.mapForm.lineLinear && equalsAny(this.mapForm.lineType, 'line', 'arc')
}
},
watch: {
'chart': {
handler: function() {
this.initData()
}
}
},
mounted() {
this.initData()
},
methods: {
checkLineType(item) {
if (this.mapForm.lineLinear && this.mapForm.lineAnimate) {
return equalsAny(item.value, 'line', 'arc')
}
return false
},
changeMapAttr(modifyName) {
this.mapForm['modifyName'] = modifyName
this.$emit('onMapChange', this.mapForm)
},
initData() {
if (this.chart.customAttr) {
if (this.chart.customAttr) {
let customAttr = null
if (Object.prototype.toString.call(this.chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(this.chart.customAttr))
} else {
customAttr = JSON.parse(this.chart.customAttr)
}
if (customAttr.map) {
const map = customAttr.map
this.mapForm.mapStyle = map.mapStyle ?? 'normal'
this.mapForm.mapPitch = map.mapPitch ?? 0
this.mapForm.lineType = map.lineType ?? 'line'
this.mapForm.lineWidth = map.lineWidth ?? 1
this.mapForm.lineOpacity = map.lineOpacity ?? 1
this.mapForm.lineSourceColor = map.lineSourceColor ?? '#000000'
this.mapForm.lineTargetColor = map.lineTargetColor ?? '#000000'
this.mapForm.lineAnimateDuration = map.lineAnimateDuration ?? 4
this.mapForm.lineAnimateInterval = map.lineAnimateInterval ?? 0.5
this.mapForm.lineAnimateTrailLength = map.lineAnimateTrailLength ?? 0.1
}
}
}
}
},
}
</script>
<style scoped>
.shape-item {
padding: 6px;
border: none;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.form-item-slider ::v-deep .el-form-item__label {
font-size: 12px;
line-height: 38px;
}
.form-item ::v-deep .el-form-item__label {
font-size: 12px;
}
.el-select-dropdown__item {
padding: 0 20px;
}
span {
font-size: 12px
}
.el-form-item {
margin-bottom: 6px;
}
.el-divider--horizontal {
margin: 10px 0
}
.divider-style ::v-deep .el-divider__text {
color: #606266;
font-size: 12px;
font-weight: 400;
padding: 0 10px;
}
.form-flex >>> .el-form-item__content {
display: flex;
}
</style>

141
frontend/src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
View File

@ -1256,13 +1256,108 @@
/>
</el-form-item>
</el-form>
<!--flow-map-start-->
<el-form
ref="flowMapForm"
:model="sizeForm"
label-width="80px"
size="mini"
>
<el-form-item
:label="$t('chart.map_pitch')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.mapPitch"
:min="0"
:max="90"
@change="changeBarSizeCase('mapPitch')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.map_line_type')"
class="form-item"
>
<el-select
v-model="sizeForm.mapLineType"
@change="changeBarSizeCase('mapLineType')"
>
<el-option
v-for="item in lineTypeOptions"
:key="item.name"
:label="item.name"
:value="item.value"
:disabled="checkMapLineType(item)"
/>
</el-select>
</el-form-item>
<el-form-item
:label="$t('chart.map_line_width')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.mapLineWidth"
:min="1"
:max="10"
@change="changeBarSizeCase('lineWidth')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.map_line_animate')"
class="form-item"
>
<el-checkbox
v-model="sizeForm.mapLineAnimate"
:disabled="checkMapLineAnimate"
@change="changeBarSizeCase('mapLineAnimate')"
/>
</el-form-item>
<div v-if="sizeForm.mapLineAnimate">
<el-form-item
:label="$t('chart.map_line_animate_duration')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.mapLineAnimateDuration"
:min="0"
:max="20"
@change="changeBarSizeCase('mapLineAnimateDuration')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.map_line_animate_interval')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.mapLineAnimateInterval"
:min="0"
:max="1"
:step="0.1"
@change="changeBarSizeCase('mapLineAnimateInterval')"
/>
</el-form-item>
<el-form-item
:label="$t('chart.map_line_animate_trail_length')"
class="form-item form-item-slider"
>
<el-slider
v-model="sizeForm.mapLineAnimateTrailLength"
:min="0"
:max="1"
:step="0.1"
@change="changeBarSizeCase('mapLineAnimateTrailLength')"
/>
</el-form-item>
</div>
</el-form>
<!--flow-map-end-->
</el-col>
</div>
</template>
<script>
import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
import { equalsAny } from '@/utils/StringUtils'
export default {
name: 'SizeSelectorAntV',
@ -1321,7 +1416,13 @@ export default {
minField: {},
maxField: {},
liquidMaxField: {},
quotaData: []
quotaData: [],
lineTypeOptions: [
{ name: this.$t('chart.map_line_type_line'), value: 'line' },
{ name: this.$t('chart.map_line_type_arc'), value: 'arc' },
{ name: this.$t('chart.map_line_type_arc_3d'), value: 'arc3d' },
{ name: this.$t('chart.map_line_type_great_circle'), value: 'greatcircle' }
]
}
},
computed: {
@ -1333,6 +1434,19 @@ export default {
},
validMaxField() {
return this.isValidField(this.maxField)
},
checkMapLineAnimate() {
const chart = this.chart
if (chart.type === 'flow-map') {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
return customAttr.color.mapLineGradient && equalsAny(this.sizeForm.mapLineType, 'line', 'arc')
}
return false
}
},
watch: {
@ -1435,6 +1549,14 @@ export default {
this.sizeForm.hPosition = this.sizeForm.hPosition ? this.sizeForm.hPosition : DEFAULT_SIZE.hPosition
this.sizeForm.vPosition = this.sizeForm.vPosition ? this.sizeForm.vPosition : DEFAULT_SIZE.vPosition
this.sizeForm.mapPitch = this.sizeForm.mapPitch ? this.sizeForm.mapPitch : DEFAULT_SIZE.mapPitch
this.sizeForm.mapLineType = this.sizeForm.mapLineType ? this.sizeForm.mapLineType : DEFAULT_SIZE.mapLineType
this.sizeForm.mapLineWidth = this.sizeForm.mapLineWidth ? this.sizeForm.mapLineWidth : DEFAULT_SIZE.mapLineWidth
this.sizeForm.mapLineAnimate = this.sizeForm.mapLineAnimate !== undefined ? this.sizeForm.mapLineAnimate : DEFAULT_SIZE.mapLineAnimate
this.sizeForm.mapLineAnimateDuration = this.sizeForm.mapLineAnimateDuration !== undefined ? this.sizeForm.mapLineAnimateDuration : DEFAULT_SIZE.mapLineAnimateDuration
this.sizeForm.mapLineAnimateInterval = this.sizeForm.mapLineAnimateInterval !== undefined ? this.sizeForm.mapLineAnimateInterval : DEFAULT_SIZE.mapLineAnimateInterval
this.sizeForm.mapLineAnimateTrailLength = this.sizeForm.mapLineAnimateTrailLength !== undefined ? this.sizeForm.mapLineAnimateTrailLength : DEFAULT_SIZE.mapLineAnimateTrailLength
}
}
},
@ -1545,6 +1667,21 @@ export default {
field.deType !== 0 &&
field.deType !== 1 &&
field.deType !== 5
},
checkMapLineType(item) {
const chart = this.chart
if (chart.type === 'flow-map') {
let customAttr = null
if (Object.prototype.toString.call(chart.customAttr) === '[object Object]') {
customAttr = JSON.parse(JSON.stringify(chart.customAttr))
} else {
customAttr = JSON.parse(chart.customAttr)
}
if (customAttr.color.mapLineGradient && customAttr.size.mapLineAnimate) {
return equalsAny(item.value, 'line', 'arc')
}
}
return false
}
}
}

4
frontend/src/views/chart/group/Group.vue
View File

@ -1355,8 +1355,8 @@ export default {
}
.chart-icon {
width: 200px;
height: 200px;
width: 200px !important;
height: 200px !important;
}
.chart-box {

37
frontend/src/views/chart/view/ChartEdit.vue
View File

@ -576,8 +576,11 @@
$t('chart.drag_block_word_cloud_label')
}}</span>
<span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_label') }}</span>
<span v-else-if="view.type === 'flow-map'">{{ $t('chart.start_point') }}</span>
<span v-show="view.type !== 'richTextView'"> / </span>
<span v-if="view.type && view.type !== 'table-info'">{{ $t('chart.dimension') }}</span>
<span v-if="view.type && view.type !== 'table-info'">
{{ $t('chart.dimension') }}
</span>
<span
v-else-if="view.type && view.type === 'table-info'"
>{{ $t('chart.dimension_or_quota') }}</span>
@ -625,12 +628,14 @@
<el-row
v-if="view.type === 'bar-group'
|| view.type === 'bar-group-stack'
|| (view.render === 'antv' && view.type === 'line')"
|| (view.render === 'antv' && view.type === 'line')
|| view.type === 'flow-map'"
class="padding-lr"
>
<span class="data-area-label">
<span>
{{ $t('chart.chart_group') }}
<span v-if="view.type !=='flow-map'">{{ $t('chart.chart_group') }}</span>
<span v-else-if="view.type === 'flow-map'">{{ $t('chart.end_point') }}</span>
<span
v-show="view.type !== 'line'"
style="color:#F54A45;"
@ -692,7 +697,7 @@
</el-row>
<!--yaxis-->
<el-row
v-if="view.type !=='table-info' && view.type !=='label'"
v-if="!equalsAny(view.type , 'table-info', 'label', 'flow-map')"
class="padding-lr"
style="margin-top: 6px;"
>
@ -701,7 +706,9 @@
$t('chart.drag_block_table_data_column')
}}</span>
<span
v-else-if="view.type && (view.type.includes('bar') || view.type.includes('line') || view.type.includes('scatter') || view.type === 'waterfall' || view.type === 'area')"
v-else-if="view.type
&& (includesAny(view.type,'bar','line','scatter')
|| equalsAny(view.type,'waterfall','area','flow-map'))"
>{{ $t('chart.drag_block_value_axis') }}</span>
<span
v-else-if="view.type && view.type.includes('pie')"
@ -976,7 +983,12 @@
</div>
</el-row>
<el-row
v-if="view.type && !(view.type.includes('table') && view.render === 'echarts') && !view.type.includes('text') && !view.type.includes('gauge') && view.type !== 'liquid' && view.type !== 'word-cloud' && view.type !== 'table-pivot' && view.type !=='label'&&view.type !=='richTextView'"
v-if="view.type
&& !(view.type.includes('table') && view.render === 'echarts')
&& !view.type.includes('text') && !view.type.includes('gauge')
&& view.type !== 'liquid' && view.type !== 'word-cloud'
&& view.type !== 'table-pivot' && view.type !=='label'
&& view.type !=='richTextView' && view.type !== 'flow-map'"
class="padding-lr"
style="margin-top: 6px;"
>
@ -1065,6 +1077,7 @@
@onChangeBackgroundForm="onChangeBackgroundForm"
@onSuspensionChange="onSuspensionChange"
@onMarkChange="onMarkChange"
@onMapChange="onMapChange"
/>
</el-tab-pane>
<el-tab-pane
@ -1745,7 +1758,7 @@ import CustomSortEdit from '@/views/chart/components/compare/CustomSortEdit'
import ScrollCfg from '@/views/chart/components/senior/ScrollCfg'
import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
import { equalsAny } from '@/utils/StringUtils'
import { equalsAny, includesAny } from '@/utils/StringUtils'
import PositionAdjust from '@/views/chart/view/PositionAdjust'
import MarkMapDataEditor from '@/views/chart/components/map/MarkMapDataEditor'
@ -2017,6 +2030,8 @@ export default {
},
methods: {
includesAny,
equalsAny,
setTitle(title, id) {
if (this.view.id !== id) return
this.view.customStyle.text = { ...this.view.customStyle.text, title }
@ -2217,7 +2232,8 @@ export default {
ele.filter = []
}
})
if (view.type === 'table-pivot' || view.type === 'bar-group' || (view.render === 'antv' && view.type === 'line')) {
if (equalsAny(view.type, 'table-pivot', 'bar-group', 'bar-group-stack', 'flow-map') ||
(view.render === 'antv' && view.type === 'line')) {
view.xaxisExt.forEach(function(ele) {
if (!ele.dateStyle || ele.dateStyle === '') {
ele.dateStyle = 'y_M_d'
@ -2686,7 +2702,10 @@ export default {
this.view.senior.mapMapping = val
this.calcStyle()
},
onMapChange(val) {
this.view.customAttr.map = val
this.calcStyle()
},
showDimensionEditFilter(item) {
this.dimensionItem = JSON.parse(JSON.stringify(item))
this.dimensionFilterEdit = true

90
frontend/webpack.dll.conf.js
View File

@ -1,44 +1,46 @@
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// dll文件存放的目录
const dllPath = 'public/vendor';
module.exports = {
entry: {
// 需要提取的库文件
vendor: [
'vue',
'vue-router',
'vuex',
'axios',
'element-ui',
'echarts',
'@antv/g2plot',
'@antv/l7-maps',
'@antv/s2',
'lodash',
],
},
output: {
path: path.join(__dirname, dllPath),
filename: '[name].dll.js',
// vendor.dll.js中暴露出的全局变量名
// 保持与 webpack.DllPlugin 中名称一致
library: '[name]_[hash]',
},
plugins: [
// 清除之前的dll文件
new CleanWebpackPlugin(['*.*'], {
root: path.join(__dirname, dllPath),
}),
// manifest.json 描述动态链接库包含了哪些内容
new webpack.DllPlugin({
path: path.join(__dirname, dllPath, '[name]-manifest.json'),
// 保持与 output.library 中名称一致
name: '[name]_[hash]',
context: process.cwd(),
}),
],
};
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// dll文件存放的目录
const dllPath = 'public/vendor';
module.exports = {
entry: {
// 需要提取的库文件
vendor: [
'vue',
'vue-router',
'vuex',
'axios',
'element-ui',
'echarts',
'@antv/g2plot',
'@antv/l7-maps',
'@antv/l7-core',
'@antv/l7-utils',
'@antv/s2',
'lodash',
],
},
output: {
path: path.join(__dirname, dllPath),
filename: '[name].dll.js',
// vendor.dll.js中暴露出的全局变量名
// 保持与 webpack.DllPlugin 中名称一致
library: '[name]_[hash]',
},
plugins: [
// 清除之前的dll文件
new CleanWebpackPlugin(['*.*'], {
root: path.join(__dirname, dllPath),
}),
// manifest.json 描述动态链接库包含了哪些内容
new webpack.DllPlugin({
path: path.join(__dirname, dllPath, '[name]-manifest.json'),
// 保持与 output.library 中名称一致
name: '[name]_[hash]',
context: process.cwd(),
}),
],
};