Skip to content

Y
yqlh-dataEase
Commit 0e043abb by 付振洋
Options

合并分支 'feature/Tippi' 到 'develop' 

新增气泡地图图标类型

查看合并请求 !6
parents 2bc59b29 f17991a0
正在显示 包含 280 行增加 和 9 行删除
.env.development
......@@ -3,8 +3,8 @@ ENV = 'development'
EDITOR=code
# base api
# VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = 'http://192.168.1.100:8081/'
VUE_APP_BASE = 'http://192.168.1.100:8081'
VUE_APP_BASE_API = 'http://47.108.95.221:6191/'
VUE_APP_BASE = 'http://47.108.95.221:6191'
# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
......
.env.production
......@@ -3,6 +3,6 @@ ENV = 'production'
# base api
# VUE_APP_BASE_API = 'http://localhost:8081/'
VUE_APP_BASE_API = 'http://192.168.1.100:8081/'
VUE_APP_BASE = 'http://192.168.1.100:8081'
VUE_APP_BASE_API = 'http://47.108.95.221:6191/'
VUE_APP_BASE = 'http://47.108.95.221:6191'
package.json
......@@ -89,7 +89,8 @@
"vuex": "3.1.0",
"webpack": "^4.46.0",
"xlsx": "^0.17.0",
"xss": "^1.0.14"
"xss": "^1.0.14",
"vue-amap": "^0.5.10"
},
"devDependencies": {
"@babel/core": "^7.4.0-0",
......
src/icons/svg/bubble_map.svg 0 → 100644
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g clip-path="url(#clip0_15_90)"> <rect width="24" height="24" fill="white"></rect> <path d="M20 12C20 16.4183 16.4183 20 12 20C10.5937 20 9.27223 19.6372 8.12398 19C7.53267 18.6719 4.48731 20.4615 3.99998 20C3.44096 19.4706 5.4583 16.6708 5.07024 16C4.38956 14.8233 3.99999 13.4571 3.99999 12C3.99999 7.58172 7.58171 4 12 4C16.4183 4 20 7.58172 20 12Z" stroke="#000000" stroke-linejoin="round"></path> </g> <defs> <clipPath id="clip0_15_90"> <rect width="24" height="24" fill="white"></rect> </clipPath> </defs> </g></svg>
\ No newline at end of file
src/lang/zh.js
......@@ -1552,7 +1552,8 @@ export default {
map_line_type_great_circle: '大圆弧',
map_line_color_source_color: '起始颜色',
map_line_color_target_color: '结束颜色',
map_line_theta_offset: '弧度'
map_line_theta_offset: '弧度',
chart_bubble_map: '气泡地图'
},
dataset: {
scope_edit: '仅编辑时生效',
......
src/views/chart/chart/bubble/bubble_antv.js 0 → 100644
import { Scene, PointLayer } from '@antv/l7'
import { GaodeMap } from '@antv/l7-maps'
import { getLanguage } from '@/lang'
import axios from 'axios'
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 async function baseBubbleMapOption(chartDom, chartId, chart, action) {
export function baseBubbleMapOption(chartDom, chartId, chart, action) {
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,
// style: 'dark',
center: [96.99215001469588, 29.281597225674773],
zoom: 2.194613775109773,
maxZoom: 10
}),
logoVisible: false
})
init = true
} else {
if (chartDom.map) {
chartDom.setPitch(size.mapPitch)
chartDom.setMapStyle(mapStyle)
}
}
// if (xAxis?.length < 2 || xAxisExt?.length < 2) {
if (xAxis?.length < 1 || yAxis?.lang < 1) {
chartDom.removeAllLayer()
return chartDom
}
// const newTableRow = await Promise.all(chart.data.tableRow.map(async(item) => {
const newTableRow = chart.data.tableRow.map((item, index) => {
// const mapInfo = await axios
// .get(
// `https://restapi.amap.com/v3/geocode/geo?key=${'76cd4f09c916ab5edc529185e5d38c38'}&address=${
// item[xAxis[0].dataeaseName]
// }`
// )
// console.log('mapInfo==', mapInfo)
// const location = mapInfo?.data?.geocodes?.length > 0 ? mapInfo.data.geocodes[0].location : ''
// const location = '111,222'
return {
type: 'Feature',
geometry: {
type: 'Point',
coordinates: location[index]
},
properties: {
capacity: item[yAxis[0].dataeaseName]
}
}
})
const mapData = { type: 'FeatureCollection', features: newTableRow }
chartDom.removeAllLayer()
.then(() => {
const pointLayer = new PointLayer({})
.source(mapData)
.shape('circle')
.size('capacity', [0, 16])
.color('capacity', [
// '#34B6B7',
// '#4AC5AF',
// '#5FD3A6',
// '#7BE39E',
// '#A1EDB8',
// '#CEF8D6'
'#FFB7DD',
'#FF88C2',
'#FF44AA',
'#FF0088',
'#C10066',
'#A20055'
])
.active(true)
.style({
opacity: 0.5,
strokeWidth: 0
})
if (!init) {
chartDom.addLayer(pointLayer)
}
chartDom.on('loaded', () => {
chartDom.addLayer(pointLayer)
})
})
return chartDom
}
src/views/chart/chart/util.js
......@@ -1236,6 +1236,7 @@ export const TYPE_CONFIGS = [
]
}
},
{
render: 'antv',
category: 'chart.chart_type_distribute',
......@@ -1947,6 +1948,50 @@ export const TYPE_CONFIGS = [
]
}
},
// 气泡图地图
{
render: 'antv',
category: 'chart.chart_type_space',
value: 'bubble',
title: 'chart.chart_bubble_map',
icon: 'bubble_map',
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',
......
src/views/chart/components/ChartComponentG2.vue
......@@ -61,6 +61,7 @@ import ChartTitleUpdate from './ChartTitleUpdate.vue'
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 { clear } from 'size-sensor'
export default {
name: 'ChartComponentG2',
......@@ -301,6 +302,8 @@ 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 === 'bubble') {
this.myChart = baseBubbleMapOption(this.myChart, this.chartId, chart, this.antVAction)
} else {
if (this.myChart) {
this.antVRenderStatus = false
......@@ -308,7 +311,7 @@ export default {
}
}
if (this.myChart && !equalsAny(chart.type, 'liquid', 'flow-map') && this.searchCount > 0) {
if (this.myChart && !equalsAny(chart.type, 'liquid', 'flow-map', 'bubble') && this.searchCount > 0) {
this.myChart.options.animation = false
}
if (this.myChart?.options?.legend) {
......
vue.config.js
......@@ -24,7 +24,7 @@ module.exports = {
port: port,
proxy: {
'^(?!/login)': {
target: 'http://192.168.1.100:8081/',
target: 'http://47.108.95.221:6191/',
ws: true
}
},
......
yarn.lock
......@@ -3329,7 +3329,7 @@ camel-case@3.0.x:
no-case "^2.2.0"
upper-case "^1.1.1"
camelcase@^1.0.2:
camelcase@^1.0.2, camelcase@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
integrity sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==
......@@ -11545,6 +11545,13 @@ upper-case@^1.1.1:
resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
integrity sha512-WRbjgmYzgXkCV7zNVpy5YgrHgbBv126rMALQQMrmzOVC4GM2waQ9x7xtm8VU+1yF2kWyPzI9zbZ48n4vSxwfSA==
uppercamelcase@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/uppercamelcase/-/uppercamelcase-1.1.0.tgz#324d98a6b3afc7e8a8953e10641509b0e4e23f97"
integrity sha512-C7YEMvhgrvTEKEEVqA7LXNID/1TvvIwYZqNIKLquS6y/MGSkRQAav9LnTTILlC1RqUM8eTVBOe1U/fnB652PRA==
dependencies:
camelcase "^1.2.1"
uri-js@^4.2.2:
version "4.4.1"
resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
......@@ -11836,6 +11843,13 @@ vt-pbf@^3.1.1:
"@mapbox/vector-tile" "^1.3.1"
pbf "^3.2.1"
vue-amap@^0.5.10:
version "0.5.10"
resolved "https://registry.yarnpkg.com/vue-amap/-/vue-amap-0.5.10.tgz#464516203af0c085d404bd8acabf2401e4a36ff6"
integrity sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==
dependencies:
uppercamelcase "^1.1.0"
vue-clipboard2@0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/vue-clipboard2/-/vue-clipboard2-0.3.1.tgz#6e551fb7bd384889b28b0da3b12289ed6bca4894"
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论