Skip to content

Y
yqlh-dataEase
Commit 0cc6d2ac by ChenXiHi
Options

桑基图

parents ae938620 53471fe9
正在显示 包含 321 行增加 和 10 行删除
src/icons/svg/city-brightness.svg 0 → 100644
<svg t="1689841433435" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5685" width="200" height="200"><path d="M290.773333 213.333333v85.333334H426.666667v512H149.333333V213.333333h141.44m42.666667-42.666666H106.666667v682.666666h362.666666V256h-135.893333V170.666667z" p-id="5686"></path><path d="M661.333333 384v426.666667h-192V384h192m42.666667-42.666667H426.666667v512h277.333333V341.333333z" p-id="5687"></path><path d="M768 298.666667v128h106.666667v384h-170.666667V298.666667h64m42.666667-42.666667h-149.333334v597.333333h256V384h-106.666666v-128z" p-id="5688"></path><path d="M85.333333 810.666667h853.333334v42.666666H85.333333zM234.666667 384h106.666666v42.666667h-106.666666zM234.666667 533.333333h106.666666v42.666667h-106.666666zM234.666667 682.666667h106.666666v42.666666h-106.666666zM533.333333 512h64v42.666667h-64zM533.333333 640h64v42.666667h-64zM768 533.333333h42.666667v42.666667h-42.666667zM768 661.333333h42.666667v42.666667h-42.666667z" p-id="5689"></path></svg>
src/icons/svg/heat-map.svg 0 → 100644
<?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="1689841504633" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1855" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M781.981888 1014.033538C649.277769 945.497049 431.312619 990.61918 298.608501 972.93895 165.904382 955.25872 80.23377 832.725854 35.111639 706.301971-80.32183 383.00634 113.136746 295.287826 270.483965 302.387223 427.899447 309.691411 362.093496 148.180122 582.720919 27.558632 803.348343-93.062859 862.874059 217.126192 838.367485 287.574057 813.792648 358.021923 796.863316 425.32967 963.357836 601.858915 1129.852355 778.456422 914.686006 1082.706555 781.981888 1014.033538ZM891.408175 606.432565C745.66574 458.778754 743.413046 396.044657 768.397464 329.692597 789.900446 272.214785 777.886081 13.22331 589.478999 113.229243 401.071917 213.30344 457.730569 374.746465 324.207289 370.650659 190.615746 366.554852 7.601475 440.279363 102.28286 701.250477 139.281642 803.236049 225.976205 884.810855 338.474347 897.644381 450.972489 910.54617 634.259813 878.735409 746.211847 932.868314 858.163882 987.069481 1031.0069 747.874403 891.408175 606.432565ZM650.09693 792.51869C581.014333 766.646848 565.723324 679.337914 586.270618 607.388253 606.886175 535.302065 543.947288 435.773976 514.730537 379.866222 485.58205 323.753678 553.708959 197.671113 626.068201 178.352561 743.549573 146.95138 684.365175 331.7405 689.280142 455.092528 694.331636 578.444556 870.314773 658.79062 868.47166 734.28998 866.628548 809.789339 719.111263 818.458796 650.09693 792.51869ZM471.997627 693.058865C411.379696 748.01093 334.105487 776.886363 255.943853 750.604941 177.918747 724.255255 125.902009 596.124786 186.519939 541.991882 310.076758 431.541643 323.04681 547.179903 423.803641 498.098493 524.492209 449.085346 532.547294 638.106799 471.997627 693.058865Z" p-id="1856"></path></svg>
\ No newline at end of file
src/lang/en.js
......@@ -1370,6 +1370,7 @@ export default {
table_column_adapt: 'Adapt',
table_column_custom: 'Custom',
chart_table_pivot: 'Pivot Table',
chart_heat_map: 'Heat Map',
table_pivot_row: 'Data Row',
field_error_tips: 'This field is changed(Include dimension、quota，field type，deleted),please edit again.',
mark_field_error: 'The current field does not exist, please select again',
......@@ -1529,6 +1530,7 @@ export default {
step: 'Step(px)',
no_function: 'Function not enter，please input.',
chart_flow_map: 'Flow Map',
chart_city_brightness_map: 'City Brightness Map',
start_point: 'Start point(Lat/Long)',
end_point: 'End point(Lat/Long)',
line: 'Line',
......
src/lang/tw.js
......@@ -1369,6 +1369,7 @@ export default {
table_column_adapt: '自適應',
table_column_custom: '自定義',
chart_table_pivot: '透視表',
chart_heat_map: '热力图',
table_pivot_row: '數據行',
field_error_tips: '該字段所對應的數據集原始字段發生變更（包括維度、指標，字段類型，字段被刪除等），建議重新編輯',
mark_field_error: '數據集變更，當前字段不存在，請重新選擇',
......@@ -1523,6 +1524,7 @@ export default {
step: '步長(px)',
no_function: '函數尚未支持直接引用，請在字段表達式中手動輸入。',
chart_flow_map: '流向地圖',
chart_city_brightness_map: '城市亮度圖',
start_point: '起點經緯度',
end_point: '終點經緯度',
line: '線條',
......
src/lang/zh.js
......@@ -1368,6 +1368,7 @@ export default {
table_column_adapt: '自适应',
table_column_custom: '自定义',
chart_table_pivot: '透视表',
chart_heat_map: '热力图',
table_pivot_row: '数据行',
field_error_tips: '该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑',
mark_field_error: '数据集变更，当前字段不存在，请重新选择',
......@@ -1554,7 +1555,8 @@ export default {
map_line_color_source_color: '起始颜色',
map_line_color_target_color: '结束颜色',
map_line_theta_offset: '弧度',
chart_bubble_map: '气泡地图'
chart_bubble_map: '气泡地图',
chart_city_brightness_map: '城市亮度图'
},
dataset: {
scope_edit: '仅编辑时生效',
......
src/styles/index.scss
......@@ -800,6 +800,9 @@ div:focus {
.amap-container {
// position: inherit !important;
right: 0px;
.amap-copyright{
opacity: 0;
}
}
.l7-scene {
......
src/views/chart/chart/cityBrightness/cityBrightness_antv.js 0 → 100644
import { Scene, PointLayer } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import { getLanguage } from '@/lang'
export function baseCityBrightnessMapOptionAntV(chartDom, chartId, chart, action) {
console.log('chart==chart.data.tableRow==', chart, chart.data.tableRow)
const xAxis = JSON.parse(chart.xaxis)
const yAxis = JSON.parse(chart.yaxis)
let customAttr
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
}
const size = customAttr.size
const color = customAttr.color
const mapStyle = `amap://styles/${color.mapStyle ? color.mapStyle : 'normal'}`
const lang = getLanguage().includes('zh') ? 'zh' : 'en'
let init = false
if (!chartDom?.map) {
try {
chartDom.destroy()
} catch (e) {
// ignore
}
chartDom = new Scene({
id: chartId,
map: new GaodeMap({
lang: lang,
pitch: size.mapPitch,
// pitch: 64.88, // 地图倾角
style: mapStyle,
// style: 'dark',
center: [114.060288, 22.53684], // 地图中心经纬度
zoom: 15.63,
maxZoom: 20
}),
logoVisible: false
})
init = true
} else {
if (chartDom.map) {
chartDom.setPitch(size.mapPitch)
chartDom.setMapStyle(mapStyle)
}
}
if (xAxis?.length < 1 || yAxis?.lang < 1) {
chartDom.removeAllLayer()
return chartDom
}
// const newTableRow = chart.data.tableRow.map((item, index) => {
// return {
// type: 'Feature',
// properties: {
// capacity: item[yAxis[0].dataeaseName]
// },
// geometry: {
// type: 'Point',
// coordinates: provinceLocation[index]
// },
// bbox: [provinceLocation[index][0], provinceLocation[index][1], provinceLocation[index][0], provinceLocation[index][1]]
// }
// })
// const mapData = { type: 'FeatureCollection', features: newTableRow }
const mapData = { type: 'FeatureCollection', features: [{ type: 'Feature', properties: {
h0: '3',
h1: '2',
h2: '1',
h3: '0',
h4: '0',
h5: '0',
h6: '0',
h7: '3',
h8: '4',
h9: '5',
h10: '6',
h11: '5',
h12: '6',
h13: '4',
h14: '4',
h15: '5',
h16: '4',
h17: '5',
h18: '4',
h19: '4',
h20: '5',
h21: '4',
h22: '6',
h23: '6'
}, geometry: {
type: 'Point',
coordinates: [113.950375, 22.534875]
}, bbox: [113.950375, 22.534875, 113.950375, 22.534875] }] }
chartDom.removeAllLayer()
.then(() => {
const pointLayer = new PointLayer({})
.source(mapData)
// .source(chart.data.tableRow, {
// parser: {
// type: 'json',
// x: xAxis[0].dataeaseName,
// y: xAxis[1].dataeaseName
// }
// })
.size(2)
.color('h8', [
'#0A3663',
'#1558AC',
'#3771D9',
'#4D89E5',
'#64A5D3',
'#72BED6',
'#83CED6',
'#A6E1E0',
'#B8EFE2',
'#D7F9F0'
])
if (!init) {
chartDom.addLayer(pointLayer)
}
chartDom.on('loaded', () => {
chartDom.addLayer(pointLayer)
})
})
return chartDom
}
src/views/chart/chart/heatMap/heat_map.js 0 → 100644
import { Scene, HeatmapLayer } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import { getLanguage } from '@/lang'
export function baseHeatMapOptionAntV(chartDom, chartId, chart, action) {
console.log('baseHeatMapOptionAntV', chart)
const xAxis = JSON.parse(chart.xaxis)
const yAxis = JSON.parse(chart.yaxis)
let customAttr
if (chart.customAttr) {
customAttr = JSON.parse(chart.customAttr)
}
const size = customAttr.size
const color = customAttr.color
const mapStyle = `amap://styles/${color.mapStyle ? color.mapStyle : 'normal'}`
const lang = getLanguage().includes('zh') ? 'zh' : 'en'
let init = false
if (!chartDom?.map) {
try {
chartDom.destroy()
} catch (e) {
// ignore
}
chartDom = new Scene({
id: chartId,
map: new GaodeMap({
lang: lang,
pitch: size.mapPitch,
style: mapStyle,
zoom: 3
}),
logoVisible: false
})
init = true
} else {
if (chartDom.map) {
chartDom.setPitch(size.mapPitch)
chartDom.setMapStyle(mapStyle)
}
}
if (xAxis?.length < 1 || yAxis?.length < 1) {
chartDom.removeAllLayer()
return chartDom
}
chartDom.removeAllLayer()
.then(() => {
const layer = new HeatmapLayer({})
.source(chart.data.tableRow, {
parser: {
type: 'json',
x: xAxis[0].dataeaseName,
y: xAxis[1].dataeaseName
}
})
.shape('heatmap')
.style({
intensity: 2,
radius: 20,
rampColors: {
colors: [
'#206C7C',
'#2EA9A1',
'#91EABC',
'#FFF598',
'#F7B74A',
'#FF4818'
],
positions: [0, 0.2, 0.4, 0.6, 0.8, 1.0]
}
})
.size('mag', [1, 80])
.scale('mag', {
type: 'linear',
domain: [1, 50]
})
if (!init) {
chartDom.addLayer(layer)
}
chartDom.on('loaded', () => {
chartDom.addLayer(layer)
})
})
return chartDom
}
src/views/chart/chart/map/map_antv.js
......@@ -61,8 +61,8 @@ export function baseFlowMapOption(chartDom, chartId, chart, action) {
.animate({
enable: size.mapLineAnimate,
duration: size.mapLineAnimateDuration,
interval: 1,
trailLength: 1
interval: size.mapLineAnimateInterval,
trailLength: size.mapLineAnimateTrailLength
})
if (color.mapLineGradient) {
lineLayer.style({
......
src/views/chart/chart/util.js
......@@ -2045,6 +2045,50 @@ export const TYPE_CONFIGS = [
]
}
},
// 城市亮度图
{
render: 'antv',
category: 'chart.chart_type_space',
value: 'city-brightness',
title: 'chart.chart_city_brightness_map',
icon: 'city-brightness',
properties: [
'color-selector',
'size-selector-ant-v',
'title-selector-ant-v'
],
propertyInner: {
'color-selector': [
'alpha',
'mapStyle',
'mapLineGradient',
'mapLineSourceColor',
'mapLineTargetColor'
],
'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',
......@@ -3242,6 +3286,39 @@ export const TYPE_CONFIGS = [
]
}
},
{
render: 'antv',
category: 'chart.chart_type_distribute',
value: 'heat-map',
title: 'chart.chart_heat_map',
icon: 'heat-map',
properties: [
'color-selector',
'size-selector-ant-v',
'title-selector-ant-v'
],
propertyInner: {
'color-selector': [
'mapStyle'
],
'size-selector-ant-v': [
'mapPitch'
],
'title-selector-ant-v': [
'show',
'title',
'fontSize',
'color',
'hPosition',
'isItalic',
'isBolder',
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
{
render: 'echarts',
......
src/views/chart/components/ChartComponentG2.vue
......@@ -54,6 +54,7 @@ import { baseTreemapOptionAntV } from '@/views/chart/chart/treemap/treemap_antv'
import { baseRadarOptionAntV } from '@/views/chart/chart/radar/radar_antv'
import { baseWaterfallOptionAntV } from '@/views/chart/chart/waterfall/waterfall'
import { baseWordCloudOptionAntV } from '@/views/chart/chart/wordCloud/word_cloud'
import { baseHeatMapOptionAntV } from '@/views/chart/chart/heatMap/heat_map'
import TitleRemark from '@/views/chart/view/TitleRemark'
import { DEFAULT_TITLE_STYLE } from '@/views/chart/chart/chart'
import { baseMixOptionAntV } from '@/views/chart/chart/mix/mix_antv'
......@@ -62,6 +63,7 @@ import { equalsAny } from '@/utils/StringUtils'
import { mapState } from 'vuex'
import { baseFlowMapOption } from '@/views/chart/chart/map/map_antv'
import { baseBubbleMapOption } from '@/views/chart/chart/bubble/bubble_antv'
import { baseCityBrightnessMapOptionAntV } from '@/views/chart/chart/cityBrightness/cityBrightness_antv'
import { clear } from 'size-sensor'
import {baseSankeyOptionAntV} from "@/views/chart/chart/sankey/sankey_antv";
export default {
......@@ -303,17 +305,22 @@ export default {
this.myChart = baseFlowMapOption(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'bidirectional-bar') {
this.myChart = baseBidirectionalBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'heat-map') {
this.myChart = baseHeatMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'bubble') {
this.myChart = baseBubbleMapOption(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'chart_sankey') {
} else if (chart.type === 'city-brightness') {
this.myChart = baseCityBrightnessMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
}else if (chart.type === 'chart_sankey') {
this.myChart = baseSankeyOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
}else {
} else {
if (this.myChart) {
this.antVRenderStatus = false
this.myChart.destroy()
}
}
if (this.myChart && !equalsAny(chart.type, 'liquid', 'flow-map', 'bubble') && this.searchCount > 0) {
if (this.myChart && !equalsAny(chart.type, 'liquid', 'flow-map', 'bubble', 'city-brightness') && this.searchCount > 0) {
this.myChart.options.animation = false
}
if (this.myChart?.options?.legend) {
......@@ -442,7 +449,11 @@ 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') {
if (this.chart.type === 'flow-map' || this.chart.type === 'heat-map') {
this.title_class.zIndex = 4
this.title_class.position = 'absolute'
}
if (this.chart.type === 'city-brightness') {
this.title_class.zIndex = 4
this.title_class.position = 'absolute'
}
......
src/views/chart/components/shapeAttr/SizeSelectorAntV.vue
......@@ -1330,7 +1330,7 @@
/>
</el-form-item>
<el-form-item
v-show="false"
v-show="true"
:label="$t('chart.map_line_animate_interval')"
class="form-item form-item-slider"
>
......@@ -1343,7 +1343,7 @@
/>
</el-form-item>
<el-form-item
v-show="false"
v-show="true"
:label="$t('chart.map_line_animate_trail_length')"
class="form-item form-item-slider"
>
......@@ -1427,7 +1427,8 @@ export default {
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_arc_3d'), value: 'arc3d' },
{ name: this.$t('chart.map_line_type_great_circle'), value: 'greatcircle' }
]
}
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论