Skip to content

Y
yqlh-dataEase
Commit a7cf06ed by Tippi.Rao
Options

Merge branch 'develop' of http://47.108.78.218:28999/frontend/yqlh-dataEase into feature/Tippi

parents a7b74892 48a57de3
正在显示 包含 297 行增加 和 222 行删除
src/icons/svg/sankey.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="1689905026346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1736" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M955 99h-32c-2.8 0-5 2.2-5 5v62c-173-7.8-345 33.2-494.3 118.4-36.4 22.1-74.2 42-113.2 59.6-57.6-53.2-127.9-91.5-204.4-112.1V104c0-2.8-2.2-5-5-5H69c-2.8 0-5 2.2-5 5v816c0 2.8 2.2 5 5 5h32c2.8 0 5-2.2 5-5v-64.3c146.4-13.8 288.5-55.9 417.7-123.8 39.1-20.8 79.4-39.5 120.7-56 85.9 41.2 178.4 68.2 273.5 79.9V920c0 2.8 2.2 5 5 5H955c2.8 0 5-2.2 5-5V104c0-2.8-2.2-5-5-5zM106 294.4c51 16.2 98.5 41.9 139.4 75.9C200.1 387 153.5 399.9 106 409V294.4z m327 282c-101.5 52.9-212.5 86.7-327 99.7v-206c66.3-11.7 131.1-30.3 193.2-55.7 20 17.9 40.7 37.5 62.5 59.6 29.6 32.3 61.8 62.4 96.3 90l-25 12.4z m86.4-42.3c-40.2-29.4-77.5-62.3-111.3-98.3-16.3-17.3-31.9-33.4-47.5-47.7 33-15.5 65.1-32.6 96.3-51.3C596.4 258.1 756.7 220.1 918 226.7v208.2c-138.5 6-274.4 39.7-398.6 99.2z m208.8 113.8c61.6-18.9 125.3-30.3 189.7-34v82.5c-65.1-8-128.9-24.3-189.7-48.5z" p-id="1737"></path></svg>
\ No newline at end of file
src/lang/en.js
......@@ -1180,6 +1180,7 @@ export default {
chart_pie_rose: 'Rose Pie',
chart_pie_donut_rose: 'Rose Donut Pie',
chart_funnel: 'Funnel',
chart_sankey:'Sankey',
chart_radar: 'Radar',
chart_gauge: 'Gauge',
chart_map: 'Map',
......@@ -1371,6 +1372,7 @@ export default {
table_column_custom: 'Custom',
chart_table_pivot: 'Pivot Table',
chart_heat_map: 'Heat Map',
chart_3d_column_chart_map: '3D Column Chart 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',
......
src/lang/tw.js
......@@ -1178,6 +1178,7 @@ export default {
chart_pie_rose: '南丁格爾玫瑰圖',
chart_pie_donut_rose: '南丁格爾玫瑰環形圖',
chart_funnel: '漏鬥圖',
chart_sankey:'桑基圖',
chart_radar: '雷達圖',
chart_gauge: '儀表盤',
chart_map: '地圖',
......@@ -1369,6 +1370,7 @@ export default {
table_column_custom: '自定義',
chart_table_pivot: '透視表',
chart_heat_map: '热力图',
chart_3d_column_chart_map: '3D柱图',
table_pivot_row: '數據行',
field_error_tips: '該字段所對應的數據集原始字段發生變更（包括維度、指標，字段類型，字段被刪除等），建議重新編輯',
mark_field_error: '數據集變更，當前字段不存在，請重新選擇',
......
src/lang/zh.js
......@@ -1178,6 +1178,7 @@ export default {
chart_pie_rose: '南丁格尔玫瑰图',
chart_pie_donut_rose: '南丁格尔玫瑰环形图',
chart_funnel: '漏斗图',
chart_sankey:'桑基图',
chart_radar: '雷达图',
chart_gauge: '仪表盘',
chart_map: '地图',
......@@ -1369,6 +1370,7 @@ export default {
table_column_custom: '自定义',
chart_table_pivot: '透视表',
chart_heat_map: '热力图',
chart_3d_column_chart_map: '3D柱图',
table_pivot_row: '数据行',
field_error_tips: '该字段所对应的数据集原始字段发生变更（包括维度、指标，字段类型，字段被删除等），建议重新编辑',
mark_field_error: '数据集变更，当前字段不存在，请重新选择',
......
src/views/chart/chart/cityBrightness/cityBrightness_antv.js
import { Scene, PointLayer } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import { getLanguage } from '@/lang'
// const location = [
// [113.950375, 22.534875],
// [113.950625, 22.534875],
// [113.930125, 22.515625],
// [113.930375, 22.515625],
// [113.929625, 22.515625]
// ]
const location = [[
121.473701,
31.230416
], [
102.710002,
25.045806
], [
111.765617,
40.817498
], [
116.407526,
39.90403
], [
125.32599,
43.896536
], [
104.075931,
30.651651
], [
117.200983,
39.084158
], [
106.258754,
38.471317
], [
117.284922,
31.861184
], [
117.020359,
36.66853
], [
112.562398,
37.873531
], [
113.26653,
23.132191
], [
108.327546,
22.815478
], [
87.627704,
43.793026
], [
118.763232,
32.061707
], [
115.909228,
28.675696
], [
114.468664,
38.037057
], [
113.753602,
34.765515
], [
120.152791,
30.267446
], [
110.349228,
20.017377
], [
114.341861,
30.546498
], [
112.98381,
28.112444
], [
103.826308,
36.059421
], [
119.295144,
26.100779
], [
91.117212,
29.646922
], [
106.70741,
26.598194
], [
123.42944,
41.835441
], [
106.551556,
29.563009
], [
108.954239,
34.265472
], [
101.780199,
36.620901
], [
126.661669,
45.742347
]]
export function baseCityBrightnessMapOptionAntV(chartDom, chartId, chart, action) {
// console.log('亮度===', chart)
const xAxis = JSON.parse(chart.xaxis)
const yAxis = JSON.parse(chart.yaxis)
// console.log('chart==chart.data.tableRow==', chart, chart.data.tableRow)
......@@ -128,11 +29,11 @@ export function baseCityBrightnessMapOptionAntV(chartDom, chartId, chart, action
lang: lang,
pitch: size.mapPitch,
// pitch: 64.88, // 地图倾角
style: mapStyle,
// style: 'dark',
center: [116.41667, 39.91667], // 地图中心经纬度-北京
zoom: 10,
maxZoom: 20
style: mapStyle
// style: 'dark'
// center: [116.41667, 39.91667], // 地图中心经纬度-北京
// zoom: 10,
// maxZoom: 20
}),
logoVisible: false
})
......@@ -147,89 +48,28 @@ export function baseCityBrightnessMapOptionAntV(chartDom, chartId, chart, action
chartDom.removeAllLayer()
return chartDom
}
// chart.data.tableRow.map((item, index) => {
// console.log('item===', index, item, item[yAxis[0].dataeaseName])
// })
const newTableRow = location.map((item, index) => {
const newTableRow = chart.data.tableRow.map((item, index) => {
return {
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'
h8: item[yAxis[0].dataeaseName]// 0到6
},
geometry: {
type: 'Point',
coordinates: location[index]
coordinates: [item[xAxis[0].dataeaseName], item[xAxis[1].dataeaseName]]
},
bbox: [location[index][0], location[index][1], location[index][0], location[index][1]]
// bbox 参数: 使用边界框(bbox)指定静态图像的整个视口
bbox: [item[xAxis[0].dataeaseName], item[xAxis[1].dataeaseName], item[xAxis[0].dataeaseName], item[xAxis[1].dataeaseName]]
}
})
const mapData = { type: 'FeatureCollection', features: newTableRow }
// console.log('11==map==', mapData)
// 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] }] }
// bbox 参数: 使用边界框(bbox)指定静态图像的整个视口
// console.log('mapData', mapData)
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(4)
.size(2)
.color('h8', [
'#0A3663',
'#1558AC',
......
src/views/chart/chart/sankey/sankey_antv.js 0 → 100644
import { getLabel, getLegend, getPadding, getTheme, getTooltip, getXAxis } from '@/views/chart/chart/common/common_antv'
import { Sankey } from '@antv/g2plot'
import { antVCustomColor } from '@/views/chart/chart/util'
export function baseSankeyOptionAntV(plot, container, chart, action) {
// theme
const theme = getTheme(chart)
// data
const data = chart.data.tableRow
const sankeyData = []
const valueName = chart.data.fields.find((item) => { return item.originName === 'value' })
const keys = chart.data.fields.map((v) => {
if (v.originName !== 'value') {
return v.dataeaseName
}
}).filter((i) => i)
if (data && keys.length > 0) {
data.forEach((d) => {
keys.reduce((a, b) => {
if (a && b) {
sankeyData.push({
source: d[a],
target: d[b],
value: d[valueName.dataeaseName],
path: keys.map((item) => {
const num = []
num.push(d[item])
return num
}).join('->')
})
}
return b
})
}
)
}
// options
const options = {
theme: theme,
data: sankeyData,
sourceField: 'source',
targetField: 'target',
weightField: 'value',
nodeWidthRatio: 0.01,
nodePaddingRatio: 0.03,
nodeDraggable: true,
rawFields: ['path'],
tooltip: {
fields: ['path', 'value'],
formatter: ({ path, value }) => {
return {
name: path,
value: value
}
}
}
}
// custom color
options.color = antVCustomColor(chart)
// 开始渲染
if (plot) {
plot.destroy()
}
plot = new Sankey(container, options)
// plot.off('interval:click')
// plot.on('interval:click', action)
return plot
}
src/views/chart/chart/threeDColumnChartMap/threeDColumn_antv.js 0 → 100644
import { Scene, PointLayer } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import { getLanguage } from '@/lang'
export function base3DColumnOptionAntV(chartDom, chartId, chart, action) {
console.log('base3DColumnOptionAntV', 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,
center: [104.288144, 31.239692],
style: mapStyle,
zoom: 4
}),
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 PointLayer({})
.source(chart.data.tableRow, {
parser: {
type: 'json',
x: xAxis[0].dataeaseName, // 经度
y: xAxis[1].dataeaseName // 纬度
}
})
.shape('cylinder')
.size(yAxis[0].dataeaseName, function(level) {
return [2, 2, level]
})
.animate(true)
.active(true)
.color(yAxis[0].dataeaseName, color?.colors)
if (!init) {
chartDom.addLayer(layer)
}
chartDom.on('loaded', () => {
chartDom.addLayer(layer)
})
})
return chartDom
}
src/views/chart/chart/util.js
......@@ -1907,6 +1907,58 @@ export const TYPE_CONFIGS = [
},
{
render: 'antv',
category: 'chart.chart_type_relation',
value: 'chart_sankey',
title: 'chart.chart_sankey',
icon: 'sankey',
properties: [
'color-selector',
'label-selector-ant-v',
'title-selector-ant-v',
'legend-selector-ant-v'
],
propertyInner: {
'color-selector': [
'value',
'colorPanel',
'customColor',
'alpha'
],
'label-selector-ant-v': [
'show',
'fontSize',
'color',
'position-h'
],
'tooltip-selector-ant-v': [
'show',
'textStyle'
],
'title-selector-ant-v': [
'show',
'title',
'fontSize',
'color',
'hPosition',
'isItalic',
'isBolder',
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
],
'legend-selector-ant-v': [
'show',
'icon',
'orient',
'textStyle',
'hPosition',
'vPosition'
]
}
},
{
render: 'antv',
category: 'chart.chart_type_space',
value: 'flow-map',
title: 'chart.chart_flow_map',
......@@ -1989,6 +2041,42 @@ export const TYPE_CONFIGS = [
]
}
},
// 3D柱图
{
render: 'antv',
category: 'chart.chart_type_space',
value: 'threeDColumn',
title: 'chart.chart_3d_column_chart_map',
icon: 'heat-map',
properties: [
'color-selector',
'size-selector-ant-v',
'title-selector-ant-v'
],
propertyInner: {
'color-selector': [
'mapStyle',
'value'
],
'size-selector-ant-v': [
'mapPitch'
],
'title-selector-ant-v': [
'show',
'title',
'fontSize',
'color',
'hPosition',
'isItalic',
'isBolder',
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
// 城市亮度图
{
render: 'antv',
......@@ -2003,20 +2091,44 @@ export const TYPE_CONFIGS = [
],
propertyInner: {
'color-selector': [
'alpha',
'mapStyle',
'mapLineGradient',
'mapLineSourceColor',
'mapLineTargetColor'
'mapStyle'
],
'size-selector-ant-v': [
'mapPitch',
'mapLineType',
'mapLineWidth',
'mapLineAnimate',
'mapLineAnimateDuration',
'mapLineAnimateInterval',
'mapLineAnimateTrailLength'
'mapPitch'
],
'title-selector-ant-v': [
'show',
'title',
'fontSize',
'color',
'hPosition',
'isItalic',
'isBolder',
'remarkShow',
'fontFamily',
'letterSpace',
'fontShadow'
]
}
},
// 热力图
{
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',
......@@ -3231,40 +3343,6 @@ 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',
category: 'chart.chart_type_relation',
value: 'scatter',
......
src/views/chart/components/ChartComponentG2.vue
......@@ -55,6 +55,7 @@ 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 { base3DColumnOptionAntV } from '@/views/chart/chart/threeDColumnChartMap/threeDColumn_antv'
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'
......@@ -65,6 +66,7 @@ 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 {
name: 'ChartComponentG2',
components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
......@@ -310,7 +312,11 @@ export default {
this.myChart = baseBubbleMapOption(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'city-brightness') {
this.myChart = baseCityBrightnessMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else {
}else if (chart.type === 'chart_sankey') {
this.myChart = baseSankeyOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else if (chart.type === 'threeDColumn') {
this.myChart = base3DColumnOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
} else {
if (this.myChart) {
this.antVRenderStatus = false
this.myChart.destroy()
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论