Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
yma16
myblogVue_django
提交
0d13cde2
M
myblogVue_django
项目概览
yma16
/
myblogVue_django
通知
5
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
M
myblogVue_django
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
0d13cde2
编写于
7月 10, 2023
作者:
yma16
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
perf:no cdn
上级
b8a42265
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
139 addition
and
146 deletion
+139
-146
src/App.vue
src/App.vue
+1
-1
src/components/weather/echarts/Map.vue
src/components/weather/echarts/Map.vue
+138
-145
未找到文件。
src/App.vue
浏览文件 @
0d13cde2
...
...
@@ -80,7 +80,7 @@
<!-- > 在线聊天室</i-->
<!-- >-->
<div
style=
"float: right; overflow: hidden;display: flex;justify-items: center;align-items:center;word-spacing: 16px;"
>
<span
style=
"cursor: pointer;
width: 8
0px"
v-if=
"currentUserName"
>
<span
style=
"cursor: pointer;
padding-right: 5
0px"
v-if=
"currentUserName"
>
<el-popover
trigger=
"click"
>
<span
@
click=
"loginOut"
style=
"cursor: pointer; height: 16px"
>
注销
</span>
...
...
src/components/weather/echarts/Map.vue
浏览文件 @
0d13cde2
...
...
@@ -98,169 +98,162 @@ export default {
this
.
initOptionData
()
},
initOptionData
:
function
()
{
const
echarts
=
this
.
$echarts
if
(
!
echarts
)
return
le
t
that
=
this
//
const echarts = this.$echarts
//
if (!echarts) return
cons
t
that
=
this
// 置空
that
.
linesCoord
=
[]
function
task1
()
{
let
that
=
this
async
function
task1
()
{
return
new
Promise
((
resolve
)
=>
{
setTimeout
(()
=>
{
console
.
log
(
'
第1个任务geojson获取
'
)
this
.
$axios
.
get
(
'
https://yongma16.xyz/static/json/map/guizhou.json
'
)
.
then
(
function
(
response
)
{
let
res
=
response
.
data
that
.
gisData
=
res
console
.
log
(
'
贵州数据
'
,
res
)
let
itemData
=
res
.
features
let
length
=
itemData
.
length
that
.
aimPointData
=
[]
for
(
let
loc
=
0
;
loc
<
length
;
++
loc
)
{
let
name
=
itemData
[
loc
].
properties
.
name
that
.
aimPointData
.
push
({
value
:
name
})
let
center
=
itemData
[
loc
].
properties
.
center
// 中心位置
if
(
name
===
that
.
focusCity
)
{
that
.
centerLoction
=
center
}
that
.
$axios
.
get
(
'
https://yongma16.xyz/static/json/map/guizhou.json
'
)
.
then
(
function
(
response
)
{
let
res
=
response
.
data
that
.
gisData
=
res
console
.
log
(
'
贵州数据
'
,
res
)
let
itemData
=
res
.
features
let
length
=
itemData
.
length
that
.
aimPointData
=
[]
for
(
let
loc
=
0
;
loc
<
length
;
++
loc
)
{
let
name
=
itemData
[
loc
].
properties
.
name
that
.
aimPointData
.
push
({
value
:
name
})
let
center
=
itemData
[
loc
].
properties
.
center
// 中心位置
if
(
name
===
that
.
focusCity
)
{
that
.
centerLoction
=
center
}
for
(
let
loc
=
0
;
loc
<
length
;
++
loc
)
{
let
name
=
itemData
[
loc
].
properties
.
name
let
number
=
(
Math
.
random
()
*
100
).
toFixed
(
2
)
let
center
=
itemData
[
loc
].
properties
.
center
that
.
locationGis
.
push
({
value
:
center
})
// eslint-disable-next-line eqeqeq
if
(
name
!==
that
.
focusCity
)
{
that
.
linesCoord
.
push
([
center
,
that
.
centerLoction
])
}
// eslint-disable-next-line eqeqeq
if
(
name
&&
name
!==
''
)
{
let
temp
=
{
name
:
`
${
name
}
`
,
value
:
Number
(
number
)
}
that
.
airData
.
push
(
temp
)
}
for
(
let
loc
=
0
;
loc
<
length
;
++
loc
)
{
let
name
=
itemData
[
loc
].
properties
.
name
let
number
=
(
Math
.
random
()
*
100
).
toFixed
(
2
)
let
center
=
itemData
[
loc
].
properties
.
center
that
.
locationGis
.
push
({
value
:
center
})
// eslint-disable-next-line eqeqeq
if
(
name
!==
that
.
focusCity
)
{
that
.
linesCoord
.
push
([
center
,
that
.
centerLoction
])
}
// eslint-disable-next-line eqeqeq
if
(
name
&&
name
!==
''
)
{
let
temp
=
{
name
:
`
${
name
}
`
,
value
:
Number
(
number
)
}
continue
that
.
airData
.
push
(
temp
)
}
console
.
log
(
'
测试热力处理
'
,
that
.
airData
)
echarts
.
registerMap
(
'
geoJson
'
,
res
)
})
resolve
(
'
第一个任务
'
)
},
1000
)
}).
catch
((
error
)
=>
{
throw
Error
(
error
)
continue
}
console
.
log
(
'
测试热力处理
'
,
that
.
airData
)
echarts
.
registerMap
(
'
geoJson
'
,
res
)
resolve
(
'
第一个任务
'
)
}).
catch
(
r
=>
{
resolve
(
r
)
})
})
}
function
task2
()
{
async
function
task2
()
{
return
new
Promise
((
resolve
)
=>
{
setTimeout
(()
=>
{
console
.
log
(
'
第2个任务option配置
'
)
that
.
option
=
{
title
:
{
text
:
'
贵州省地图
'
,
subtext
:
'
geoJson
'
},
geo
:
{
// 经纬度中心
center
:
that
.
centerLoction
,
that
.
option
=
{
title
:
{
text
:
'
贵州省地图
'
,
subtext
:
'
geoJson
'
},
geo
:
{
// 经纬度中心
center
:
that
.
centerLoction
,
type
:
'
map
'
,
map
:
'
geoJson
'
,
// 这里的值要和上面registerMap的第一个参数一致
roam
:
true
,
// 拖拽
nameProperty
:
'
name
'
,
// 悬浮标签
label
:
{
type
:
'
map
'
,
map
:
'
geoJson
'
,
// 这里的值要和上面registerMap的第一个参数一致
roam
:
tru
e
,
// 拖拽
// roam: fals
e, // 拖拽
nameProperty
:
'
name
'
,
// 悬浮标签
label
:
{
type
:
'
map
'
,
map
:
'
geoJson
'
,
// 这里的值要和上面registerMap的第一个参数一致
// roam: false, // 拖拽
nameProperty
:
'
name
'
,
show
:
true
,
color
:
'
#fff
'
,
backgroundColor
:
'
#546de5
'
,
align
:
'
center
'
,
fontSize
:
10
,
width
:
(
function
()
{
// let n = parseInt(Math.random() * 10)
return
110
})(),
height
:
50
,
shadowColor
:
'
rgba(0,0,0,.7)
'
,
borderRadius
:
10
show
:
true
,
color
:
'
#fff
'
,
backgroundColor
:
'
#546de5
'
,
align
:
'
center
'
,
fontSize
:
10
,
width
:
(
function
()
{
// let n = parseInt(Math.random() * 10)
return
110
})(),
height
:
50
,
shadowColor
:
'
rgba(0,0,0,.7)
'
,
borderRadius
:
10
},
zoom
:
1.2
},
series
:
[
// 坐标点的热力数据
{
data
:
that
.
airData
,
geoIndex
:
0
,
// 将热力的数据和第0个geo配置关联在一起
type
:
'
map
'
},
{
type
:
'
effectScatter
'
,
// 渲染显示
zlevel
:
2
,
showEffectOn
:
'
render
'
,
data
:
that
.
locationGis
,
// 配置散点的坐标数据
coordinateSystem
:
'
geo
'
,
// 指明散点使用的坐标系统
rippleEffect
:
{
// 缩放
scale
:
4
,
// 涟漪的颜色
color
:
'
#cf6a87
'
,
// 波纹数量
number
:
2
,
// 扩散方式 stroke(线条) fill(区域覆盖)
brushType
:
'
fill
'
},
zoom
:
1.2
// 形状
symbol
:
'
circle
'
},
series
:
[
// 坐标点的热力数据
{
data
:
that
.
airData
,
geoIndex
:
0
,
// 将热力的数据和第0个geo配置关联在一起
type
:
'
map
'
// 飞线层
{
// name: '贵阳市飞线',
type
:
'
lines
'
,
coordinateSystem
:
'
geo
'
,
polyline
:
true
,
zlevel
:
3
,
effect
:
{
show
:
true
,
period
:
5
,
trailLength
:
0
,
// 拖尾
symbol
:
'
arrow
'
,
// 箭头
color
:
'
red
'
,
// 样式颜色
symbolSize
:
5
},
{
type
:
'
effectScatter
'
,
// 渲染显示
zlevel
:
2
,
showEffectOn
:
'
render
'
,
data
:
that
.
locationGis
,
// 配置散点的坐标数据
coordinateSystem
:
'
geo
'
,
// 指明散点使用的坐标系统
rippleEffect
:
{
// 缩放
scale
:
4
,
// 涟漪的颜色
color
:
'
#cf6a87
'
,
// 波纹数量
number
:
2
,
// 扩散方式 stroke(线条) fill(区域覆盖)
brushType
:
'
fill
'
},
// 形状
symbol
:
'
circle
'
lineStyle
:
{
color
:
'
#000
'
,
width
:
2
,
type
:
'
solid
'
,
dashOffset
:
0
// cap: butt,
// join: bevel
},
// 飞线层
{
// name: '贵阳市飞线',
type
:
'
lines
'
,
coordinateSystem
:
'
geo
'
,
polyline
:
true
,
zlevel
:
3
,
effect
:
{
show
:
true
,
period
:
5
,
trailLength
:
0
,
// 拖尾
symbol
:
'
arrow
'
,
// 箭头
color
:
'
red
'
,
// 样式颜色
symbolSize
:
5
},
lineStyle
:
{
color
:
'
#000
'
,
width
:
2
,
type
:
'
solid
'
,
dashOffset
:
0
// cap: butt,
// join: bevel
},
// 飞线层数据
data
:
that
.
linesCoord
}
],
visualMap
:
{
min
:
0
,
max
:
100
,
inRange
:
{
color
:
[
'
white
'
,
'
#0984e3
'
]
// 控制颜色渐变的范围
},
calculable
:
false
// 出现滑块
// 飞线层数据
data
:
that
.
linesCoord
}
],
visualMap
:
{
min
:
0
,
max
:
100
,
inRange
:
{
color
:
[
'
white
'
,
'
#0984e3
'
]
// 控制颜色渐变的范围
},
calculable
:
false
// 出现滑块
}
resolve
(
'
2
'
)
},
1000
)
}
resolve
(
'
echarts options
'
)
})
}
async
function
allTasks
()
{
...
...
@@ -274,7 +267,7 @@ export default {
})
},
initMapGis
:
function
(
optionParams
)
{
le
t
that
=
this
cons
t
that
=
this
try
{
// 基于准备好的dom,初始化echarts实例
console
.
log
(
'
echarts_map渲染
'
)
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录