mirror of
https://github.com/dataease/dataease.git
synced 2025-02-25 20:42:55 +08:00
Merge pull request #4945 from dataease/pr@dev@feat_flow_map
feat(视图-流向地图): 视图增加流向地图支持
This commit is contained in:
wisonic-s
GitHub
commit
32e87f9605
@ -606,7 +606,8 @@ public class ChartViewService {
|
|||||||
List<ChartViewFieldDTO> xAxisExt = gson.fromJson(view.getXAxisExt(), tokenType);
|
List<ChartViewFieldDTO> xAxisExt = gson.fromJson(view.getXAxisExt(), tokenType);
|
||||||
if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")
|
if (StringUtils.equalsIgnoreCase(view.getType(), "table-pivot")
|
||||||
|| StringUtils.containsIgnoreCase(view.getType(), "group")
|
|| 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);
|
xAxis.addAll(xAxisExt);
|
||||||
}
|
}
|
||||||
List<ChartViewFieldDTO> yAxis = gson.fromJson(view.getYAxis(), tokenType);
|
List<ChartViewFieldDTO> yAxis = gson.fromJson(view.getYAxis(), tokenType);
|
||||||
@ -714,6 +715,7 @@ public class ChartViewService {
|
|||||||
break;
|
break;
|
||||||
case "bar-group":
|
case "bar-group":
|
||||||
case "bar-group-stack":
|
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());
|
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());
|
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());
|
xAxisBase = xAxisBase.stream().filter(item -> chartViewFieldNameList.contains(item.getDataeaseName()) || (!desensitizationList.keySet().contains(item.getDataeaseName()) && dataeaseNames.contains(item.getDataeaseName()))).collect(Collectors.toList());
|
||||||
|
|||||||
@ -26,15 +26,15 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@antv/g2plot": "^2.4.9",
|
"@antv/g2plot": "^2.4.9",
|
||||||
"@antv/l7": "2.8.31",
|
"@antv/l7": "2.15.0",
|
||||||
"@antv/l7-component": "2.8.31",
|
"@antv/l7-component": "2.15.0",
|
||||||
"@antv/l7-core": "2.8.31",
|
"@antv/l7-core": "2.15.0",
|
||||||
"@antv/l7-layers": "2.8.31",
|
"@antv/l7-layers": "2.15.0",
|
||||||
"@antv/l7-maps": "2.8.31",
|
"@antv/l7-maps": "2.15.0",
|
||||||
"@antv/l7-renderer": "2.8.31",
|
"@antv/l7-renderer": "2.15.0",
|
||||||
"@antv/l7-scene": "2.8.31",
|
"@antv/l7-scene": "2.15.0",
|
||||||
"@antv/l7-source": "2.8.31",
|
"@antv/l7-source": "2.15.0",
|
||||||
"@antv/l7-utils": "2.8.31",
|
"@antv/l7-utils": "2.15.0",
|
||||||
"@antv/s2": "1.35.0",
|
"@antv/s2": "1.35.0",
|
||||||
"@antv/util": "^2.0.17",
|
"@antv/util": "^2.0.17",
|
||||||
"@riophae/vue-treeselect": "0.4.0",
|
"@riophae/vue-treeselect": "0.4.0",
|
||||||
|
|||||||
2
frontend/public/vendor/vendor-manifest.json
vendored
2
frontend/public/vendor/vendor-manifest.json
vendored
File diff suppressed because one or more lines are too long
59
frontend/public/vendor/vendor.dll.js
vendored
59
frontend/public/vendor/vendor.dll.js
vendored
File diff suppressed because one or more lines are too long
@ -85,7 +85,7 @@ export function panelDataPrepare(componentData, componentStyle, callback) {
|
|||||||
componentStyle.refreshViewEnable = (componentStyle.refreshViewEnable === undefined ? true : componentStyle.refreshViewEnable)
|
componentStyle.refreshViewEnable = (componentStyle.refreshViewEnable === undefined ? true : componentStyle.refreshViewEnable)
|
||||||
componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
|
componentStyle.aidedDesign = (componentStyle.aidedDesign || deepCopy(AIDED_DESIGN))
|
||||||
componentStyle.pdfPageLine = (componentStyle.pdfPageLine || deepCopy(PAGE_LINE_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.chartInfo.tabStyle = (componentStyle.chartInfo.tabStyle || deepCopy(TAB_COMMON_STYLE))
|
||||||
componentStyle.themeId = (componentStyle.themeId || 'NO_THEME')
|
componentStyle.themeId = (componentStyle.themeId || 'NO_THEME')
|
||||||
componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
|
componentStyle.panel.themeColor = (componentStyle.panel.themeColor || 'light')
|
||||||
|
|||||||
1
frontend/src/icons/svg/flow-map.svg
Normal file
1
frontend/src/icons/svg/flow-map.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 4.8 KiB |
@ -1522,7 +1522,25 @@ export default {
|
|||||||
table_auto_break_line: 'Auto Line Feed',
|
table_auto_break_line: 'Auto Line Feed',
|
||||||
table_break_line_tip: 'If open this option,the table item height will disabled.',
|
table_break_line_tip: 'If open this option,the table item height will disabled.',
|
||||||
step: 'Step(px)',
|
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: {
|
dataset: {
|
||||||
scope_edit: 'Effective only when editing',
|
scope_edit: 'Effective only when editing',
|
||||||
|
|||||||
@ -1516,7 +1516,25 @@ export default {
|
|||||||
table_auto_break_line: '自動換行',
|
table_auto_break_line: '自動換行',
|
||||||
table_break_line_tip: '開啟自動換行，表格行高設置將失效',
|
table_break_line_tip: '開啟自動換行，表格行高設置將失效',
|
||||||
step: '步長(px)',
|
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: {
|
dataset: {
|
||||||
scope_edit: '僅編輯時生效',
|
scope_edit: '僅編輯時生效',
|
||||||
|
|||||||
@ -1517,7 +1517,40 @@ export default {
|
|||||||
table_auto_break_line: '自动换行',
|
table_auto_break_line: '自动换行',
|
||||||
table_break_line_tip: '开启自动换行，表格行高设置将失效',
|
table_break_line_tip: '开启自动换行，表格行高设置将失效',
|
||||||
step: '步长(px)',
|
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: {
|
dataset: {
|
||||||
scope_edit: '仅编辑时生效',
|
scope_edit: '仅编辑时生效',
|
||||||
|
|||||||
@ -31,7 +31,11 @@ export const DEFAULT_COLOR_CASE = {
|
|||||||
gradient: false,
|
gradient: false,
|
||||||
areaBaseColor: '#FFFFFF',
|
areaBaseColor: '#FFFFFF',
|
||||||
tableScrollBarColor: 'rgba(0, 0, 0, 0.15)',
|
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 = {
|
export const DEFAULT_COLOR_CASE_DARK = {
|
||||||
@ -49,7 +53,11 @@ export const DEFAULT_COLOR_CASE_DARK = {
|
|||||||
areaBorderColor: '#EBEEF5',
|
areaBorderColor: '#EBEEF5',
|
||||||
areaBaseColor: '5470C6',
|
areaBaseColor: '5470C6',
|
||||||
tableScrollBarColor: 'rgba(255, 255, 255, 0.5)',
|
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 = {
|
export const DEFAULT_SIZE = {
|
||||||
barDefault: true,
|
barDefault: true,
|
||||||
@ -130,7 +138,14 @@ export const DEFAULT_SIZE = {
|
|||||||
showIndex: false,
|
showIndex: false,
|
||||||
indexLabel: '序号',
|
indexLabel: '序号',
|
||||||
hPosition: 'center',
|
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 = {
|
export const DEFAULT_SUSPENSION = {
|
||||||
show: true
|
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 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 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
|
||||||
|
}
|
||||||
|
|||||||
@ -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
|
theme.innerLabels.offset = 0
|
||||||
}
|
}
|
||||||
return theme
|
return theme
|
||||||
|
|||||||
78
frontend/src/views/chart/chart/map/map_antv.js
Normal file
78
frontend/src/views/chart/chart/map/map_antv.js
Normal 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
|
||||||
|
}
|
||||||
@ -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图表类型 */
|
/* 下面是echarts图表类型 */
|
||||||
{
|
{
|
||||||
render: 'echarts',
|
render: 'echarts',
|
||||||
|
|||||||
@ -59,6 +59,7 @@ import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
|
|||||||
import ChartTitleUpdate from './ChartTitleUpdate.vue'
|
import ChartTitleUpdate from './ChartTitleUpdate.vue'
|
||||||
import { equalsAny } from '@/utils/StringUtils'
|
import { equalsAny } from '@/utils/StringUtils'
|
||||||
import { mapState } from 'vuex'
|
import { mapState } from 'vuex'
|
||||||
|
import { baseFlowMapOption } from '@/views/chart/chart/map/map_antv'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ChartComponentG2',
|
name: 'ChartComponentG2',
|
||||||
@ -274,6 +275,8 @@ export default {
|
|||||||
this.myChart = baseWordCloudOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
|
this.myChart = baseWordCloudOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
|
||||||
} else if (chart.type === 'chart-mix') {
|
} else if (chart.type === 'chart-mix') {
|
||||||
this.myChart = baseMixOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
|
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 {
|
} else {
|
||||||
if (this.myChart) {
|
if (this.myChart) {
|
||||||
this.antVRenderStatus = false
|
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
|
this.myChart.options.animation = false
|
||||||
}
|
}
|
||||||
if (this.myChart.options.legend) {
|
if (this.myChart?.options?.legend) {
|
||||||
let pageNavigatorInactiveFill, pageNavigatorFill
|
let pageNavigatorInactiveFill, pageNavigatorFill
|
||||||
if (this.canvasStyleData.panel.themeColor === 'dark') {
|
if (this.canvasStyleData.panel.themeColor === 'dark') {
|
||||||
pageNavigatorFill = '#ffffff'
|
pageNavigatorFill = '#ffffff'
|
||||||
@ -402,6 +405,10 @@ export default {
|
|||||||
this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
|
this.title_class.background = hexColorToRGBA(customStyle.background.color, customStyle.background.alpha)
|
||||||
this.borderRadius = (customStyle.background.borderRadius || 0) + 'px'
|
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()
|
this.initRemark()
|
||||||
},
|
},
|
||||||
|
|||||||
@ -263,7 +263,23 @@
|
|||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</div>
|
</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
|
<el-form-item
|
||||||
v-show="showProperty('alpha')"
|
v-show="showProperty('alpha')"
|
||||||
:label="$t('chart.not_alpha')"
|
:label="$t('chart.not_alpha')"
|
||||||
@ -277,7 +293,35 @@
|
|||||||
@change="changeColorCase('alpha')"
|
@change="changeColorCase('alpha')"
|
||||||
/>
|
/>
|
||||||
</el-form-item>
|
</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
|
<el-form-item
|
||||||
v-show="showProperty('area-border-color') "
|
v-show="showProperty('area-border-color') "
|
||||||
:label="$t('chart.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 { mapState } from 'vuex'
|
||||||
import GradientColorSelector from '@/components/gradientColorSelector'
|
import GradientColorSelector from '@/components/gradientColorSelector'
|
||||||
import bus from '@/utils/bus'
|
import bus from '@/utils/bus'
|
||||||
|
import { equalsAny } from '@/utils/StringUtils'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ColorSelector',
|
name: 'ColorSelector',
|
||||||
@ -414,10 +459,36 @@ export default {
|
|||||||
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
|
colorForm: JSON.parse(JSON.stringify(DEFAULT_COLOR_CASE)),
|
||||||
customColor: null,
|
customColor: null,
|
||||||
colorIndex: 0,
|
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: {
|
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([
|
...mapState([
|
||||||
'batchOptStatus',
|
'batchOptStatus',
|
||||||
'componentViewsData'
|
'componentViewsData'
|
||||||
@ -494,6 +565,11 @@ export default {
|
|||||||
this.$set(this.colorForm, 'gradient', this.colorForm.gradient || false)
|
this.$set(this.colorForm, 'gradient', this.colorForm.gradient || false)
|
||||||
this.colorForm.tableScrollBarColor = this.colorForm.tableScrollBarColor ? this.colorForm.tableScrollBarColor : DEFAULT_COLOR_CASE.tableScrollBarColor
|
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()
|
this.initCustomColor()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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>
|
||||||
@ -1256,13 +1256,108 @@
|
|||||||
/>
|
/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</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>
|
</el-col>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
|
import { CHART_FONT_FAMILY, CHART_FONT_LETTER_SPACE, DEFAULT_SIZE } from '../../chart/chart'
|
||||||
|
import { equalsAny } from '@/utils/StringUtils'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'SizeSelectorAntV',
|
name: 'SizeSelectorAntV',
|
||||||
@ -1321,7 +1416,13 @@ export default {
|
|||||||
minField: {},
|
minField: {},
|
||||||
maxField: {},
|
maxField: {},
|
||||||
liquidMaxField: {},
|
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: {
|
computed: {
|
||||||
@ -1333,6 +1434,19 @@ export default {
|
|||||||
},
|
},
|
||||||
validMaxField() {
|
validMaxField() {
|
||||||
return this.isValidField(this.maxField)
|
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: {
|
watch: {
|
||||||
@ -1435,6 +1549,14 @@ export default {
|
|||||||
|
|
||||||
this.sizeForm.hPosition = this.sizeForm.hPosition ? this.sizeForm.hPosition : DEFAULT_SIZE.hPosition
|
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.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 !== 0 &&
|
||||||
field.deType !== 1 &&
|
field.deType !== 1 &&
|
||||||
field.deType !== 5
|
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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1355,8 +1355,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.chart-icon {
|
.chart-icon {
|
||||||
width: 200px;
|
width: 200px !important;
|
||||||
height: 200px;
|
height: 200px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart-box {
|
.chart-box {
|
||||||
|
|||||||
@ -576,8 +576,11 @@
|
|||||||
$t('chart.drag_block_word_cloud_label')
|
$t('chart.drag_block_word_cloud_label')
|
||||||
}}</span>
|
}}</span>
|
||||||
<span v-else-if="view.type && view.type === 'label'">{{ $t('chart.drag_block_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-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
|
<span
|
||||||
v-else-if="view.type && view.type === 'table-info'"
|
v-else-if="view.type && view.type === 'table-info'"
|
||||||
>{{ $t('chart.dimension_or_quota') }}</span>
|
>{{ $t('chart.dimension_or_quota') }}</span>
|
||||||
@ -625,12 +628,14 @@
|
|||||||
<el-row
|
<el-row
|
||||||
v-if="view.type === 'bar-group'
|
v-if="view.type === 'bar-group'
|
||||||
|| view.type === 'bar-group-stack'
|
|| view.type === 'bar-group-stack'
|
||||||
|| (view.render === 'antv' && view.type === 'line')"
|
|| (view.render === 'antv' && view.type === 'line')
|
||||||
|
|| view.type === 'flow-map'"
|
||||||
class="padding-lr"
|
class="padding-lr"
|
||||||
>
|
>
|
||||||
<span class="data-area-label">
|
<span class="data-area-label">
|
||||||
<span>
|
<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
|
<span
|
||||||
v-show="view.type !== 'line'"
|
v-show="view.type !== 'line'"
|
||||||
style="color:#F54A45;"
|
style="color:#F54A45;"
|
||||||
@ -692,7 +697,7 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
<!--yaxis-->
|
<!--yaxis-->
|
||||||
<el-row
|
<el-row
|
||||||
v-if="view.type !=='table-info' && view.type !=='label'"
|
v-if="!equalsAny(view.type , 'table-info', 'label', 'flow-map')"
|
||||||
class="padding-lr"
|
class="padding-lr"
|
||||||
style="margin-top: 6px;"
|
style="margin-top: 6px;"
|
||||||
>
|
>
|
||||||
@ -701,7 +706,9 @@
|
|||||||
$t('chart.drag_block_table_data_column')
|
$t('chart.drag_block_table_data_column')
|
||||||
}}</span>
|
}}</span>
|
||||||
<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>
|
>{{ $t('chart.drag_block_value_axis') }}</span>
|
||||||
<span
|
<span
|
||||||
v-else-if="view.type && view.type.includes('pie')"
|
v-else-if="view.type && view.type.includes('pie')"
|
||||||
@ -976,7 +983,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</el-row>
|
</el-row>
|
||||||
<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"
|
class="padding-lr"
|
||||||
style="margin-top: 6px;"
|
style="margin-top: 6px;"
|
||||||
>
|
>
|
||||||
@ -1065,6 +1077,7 @@
|
|||||||
@onChangeBackgroundForm="onChangeBackgroundForm"
|
@onChangeBackgroundForm="onChangeBackgroundForm"
|
||||||
@onSuspensionChange="onSuspensionChange"
|
@onSuspensionChange="onSuspensionChange"
|
||||||
@onMarkChange="onMarkChange"
|
@onMarkChange="onMarkChange"
|
||||||
|
@onMapChange="onMapChange"
|
||||||
/>
|
/>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
<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 ScrollCfg from '@/views/chart/components/senior/ScrollCfg'
|
||||||
import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
|
import ChartFieldEdit from '@/views/chart/view/ChartFieldEdit'
|
||||||
import CalcChartFieldEdit from '@/views/chart/view/CalcChartFieldEdit'
|
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 PositionAdjust from '@/views/chart/view/PositionAdjust'
|
||||||
import MarkMapDataEditor from '@/views/chart/components/map/MarkMapDataEditor'
|
import MarkMapDataEditor from '@/views/chart/components/map/MarkMapDataEditor'
|
||||||
|
|
||||||
@ -2017,6 +2030,8 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
|
includesAny,
|
||||||
|
equalsAny,
|
||||||
setTitle(title, id) {
|
setTitle(title, id) {
|
||||||
if (this.view.id !== id) return
|
if (this.view.id !== id) return
|
||||||
this.view.customStyle.text = { ...this.view.customStyle.text, title }
|
this.view.customStyle.text = { ...this.view.customStyle.text, title }
|
||||||
@ -2217,7 +2232,8 @@ export default {
|
|||||||
ele.filter = []
|
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) {
|
view.xaxisExt.forEach(function(ele) {
|
||||||
if (!ele.dateStyle || ele.dateStyle === '') {
|
if (!ele.dateStyle || ele.dateStyle === '') {
|
||||||
ele.dateStyle = 'y_M_d'
|
ele.dateStyle = 'y_M_d'
|
||||||
@ -2686,7 +2702,10 @@ export default {
|
|||||||
this.view.senior.mapMapping = val
|
this.view.senior.mapMapping = val
|
||||||
this.calcStyle()
|
this.calcStyle()
|
||||||
},
|
},
|
||||||
|
onMapChange(val) {
|
||||||
|
this.view.customAttr.map = val
|
||||||
|
this.calcStyle()
|
||||||
|
},
|
||||||
showDimensionEditFilter(item) {
|
showDimensionEditFilter(item) {
|
||||||
this.dimensionItem = JSON.parse(JSON.stringify(item))
|
this.dimensionItem = JSON.parse(JSON.stringify(item))
|
||||||
this.dimensionFilterEdit = true
|
this.dimensionFilterEdit = true
|
||||||
|
|||||||
@ -1,44 +1,46 @@
|
|||||||
const path = require('path');
|
const path = require('path');
|
||||||
const webpack = require('webpack');
|
const webpack = require('webpack');
|
||||||
const CleanWebpackPlugin = require('clean-webpack-plugin');
|
const CleanWebpackPlugin = require('clean-webpack-plugin');
|
||||||
|
|
||||||
// dll文件存放的目录
|
// dll文件存放的目录
|
||||||
const dllPath = 'public/vendor';
|
const dllPath = 'public/vendor';
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
// 需要提取的库文件
|
// 需要提取的库文件
|
||||||
vendor: [
|
vendor: [
|
||||||
'vue',
|
'vue',
|
||||||
'vue-router',
|
'vue-router',
|
||||||
'vuex',
|
'vuex',
|
||||||
'axios',
|
'axios',
|
||||||
'element-ui',
|
'element-ui',
|
||||||
'echarts',
|
'echarts',
|
||||||
'@antv/g2plot',
|
'@antv/g2plot',
|
||||||
'@antv/l7-maps',
|
'@antv/l7-maps',
|
||||||
'@antv/s2',
|
'@antv/l7-core',
|
||||||
'lodash',
|
'@antv/l7-utils',
|
||||||
],
|
'@antv/s2',
|
||||||
},
|
'lodash',
|
||||||
output: {
|
],
|
||||||
path: path.join(__dirname, dllPath),
|
},
|
||||||
filename: '[name].dll.js',
|
output: {
|
||||||
// vendor.dll.js中暴露出的全局变量名
|
path: path.join(__dirname, dllPath),
|
||||||
// 保持与 webpack.DllPlugin 中名称一致
|
filename: '[name].dll.js',
|
||||||
library: '[name]_[hash]',
|
// vendor.dll.js中暴露出的全局变量名
|
||||||
},
|
// 保持与 webpack.DllPlugin 中名称一致
|
||||||
plugins: [
|
library: '[name]_[hash]',
|
||||||
// 清除之前的dll文件
|
},
|
||||||
new CleanWebpackPlugin(['*.*'], {
|
plugins: [
|
||||||
root: path.join(__dirname, dllPath),
|
// 清除之前的dll文件
|
||||||
}),
|
new CleanWebpackPlugin(['*.*'], {
|
||||||
// manifest.json 描述动态链接库包含了哪些内容
|
root: path.join(__dirname, dllPath),
|
||||||
new webpack.DllPlugin({
|
}),
|
||||||
path: path.join(__dirname, dllPath, '[name]-manifest.json'),
|
// manifest.json 描述动态链接库包含了哪些内容
|
||||||
// 保持与 output.library 中名称一致
|
new webpack.DllPlugin({
|
||||||
name: '[name]_[hash]',
|
path: path.join(__dirname, dllPath, '[name]-manifest.json'),
|
||||||
context: process.cwd(),
|
// 保持与 output.library 中名称一致
|
||||||
}),
|
name: '[name]_[hash]',
|
||||||
],
|
context: process.cwd(),
|
||||||
};
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user