shit
This commit is contained in:
parent
2e33cda8d5
commit
e4dd66c51e
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="width: 45vw;height: 50vh;" id="myChart"></div>
|
<div style="width: 45vw;height: 50vh;" id="myChart"></div>
|
||||||
|
<div style="width: 45vw;height: 50vh;" id="chart2"></div>
|
||||||
|
<img src="/static/index/aa.png" id="img" style="opacity: 0;" alt="">
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from "vue"
|
import { ref, onMounted } from "vue"
|
||||||
|
|
@ -8,71 +11,157 @@ import * as echarts from 'echarts';
|
||||||
import "echarts-gl"
|
import "echarts-gl"
|
||||||
|
|
||||||
|
|
||||||
const initCharts = () => {
|
const initData = (data) => {
|
||||||
|
|
||||||
|
var data3d = data.map(el => {
|
||||||
|
return {
|
||||||
|
name: el.properties.name,
|
||||||
|
value:el.properties.center,
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
position: 'right',
|
||||||
|
formatter: '{b}',
|
||||||
|
color: 'white',
|
||||||
|
fontWeight: "bold",
|
||||||
|
fontSize: 18
|
||||||
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#FFB923'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
});
|
||||||
|
return data3d
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
|
const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
|
||||||
|
|
||||||
var scatterData = [
|
|
||||||
{
|
|
||||||
name: "荔湾",
|
|
||||||
value: [104.679127, 31.467673, 5]
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// name: "花都",
|
|
||||||
// value: [113.211184, 23.39205, 5]
|
|
||||||
// },
|
|
||||||
|
|
||||||
// {
|
|
||||||
// name: "天河",
|
|
||||||
// value: [113.335367, 23.13559, 5]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "黄埔",
|
|
||||||
// value: [113.450761, 23.103239, 5]
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// name: "南沙",
|
|
||||||
// value: [113.53738, 22.794531, 5]
|
|
||||||
// }
|
|
||||||
];
|
|
||||||
var data3d = scatterData.map(el => {
|
|
||||||
return {
|
|
||||||
name: el.name,
|
|
||||||
value: el.value,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
|
axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
|
||||||
.then(function (response) {
|
.then(function (response) {
|
||||||
|
let dot=document.getElementById('img')
|
||||||
let mapJson = response.data
|
let mapJson = response.data
|
||||||
let data = mapJson.features.map((item) => {
|
let chartOption= {
|
||||||
return {
|
geo: {
|
||||||
name: item.properties.name,
|
backgroundColor: {
|
||||||
};
|
color: {
|
||||||
});
|
image: dot, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
|
||||||
console.log(data, 666)
|
repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
show: true,
|
||||||
|
map: `lz`,
|
||||||
|
left: '0',
|
||||||
|
top: `0%`,
|
||||||
|
right: '8%',
|
||||||
|
bottom: '0',
|
||||||
|
itemStyle: {
|
||||||
|
// normal: {
|
||||||
|
// areaColor: `rgba(115, 219, 249, 0)`,
|
||||||
|
// borderwidth: 3,
|
||||||
|
// borderColor: `#37C1FD`,
|
||||||
|
// shadowBlur: 20,
|
||||||
|
// shadowOffsetY: 4,
|
||||||
|
// shadowOffsetX: 4,
|
||||||
|
// shadowColor: `#ddd`
|
||||||
|
// },
|
||||||
|
areaColor: {
|
||||||
|
image: dot,
|
||||||
|
repeat: 'repeat'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
type: `effectScatter`,
|
||||||
|
coordinateSystem: `geo`,
|
||||||
|
rippleEffect: { //涟漪特效
|
||||||
|
period: 4, //动画时间，值越小速度越快
|
||||||
|
brushType: `stroke`, //波纹绘制方式 stroke, fill
|
||||||
|
scale: 8 //波纹圆环最大限制，值越大波纹越大
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
// normal: {
|
||||||
|
// color: `orange`,
|
||||||
|
// shadowBlur: 2
|
||||||
|
// },
|
||||||
|
|
||||||
|
},
|
||||||
|
symbolSize: 8,
|
||||||
|
data: [
|
||||||
|
{ name: `三亚市`, value: [ 104.065735, 30.659462] },
|
||||||
|
{ name: `五指山市`, value: [104.773447,29.352765] }
|
||||||
|
//[109.508268, 18.247872, `三亚市`],
|
||||||
|
//[109.516662, 18.776921, `五指山市`]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
echarts.registerMap(`lz`, mapJson)
|
||||||
|
// const myChart2 = document.getElementById('chart2')
|
||||||
|
// const bg = echarts.init(myChart2);
|
||||||
|
// bg.setOption(chartOption)
|
||||||
|
|
||||||
|
const canvas = document.createElement(`canvas`)
|
||||||
|
let bg = echarts.init(canvas, null, {
|
||||||
|
width: 1024,
|
||||||
|
height: 1024
|
||||||
|
})
|
||||||
|
bg.setOption(chartOption)
|
||||||
const myChart = document.getElementById('myChart')
|
const myChart = document.getElementById('myChart')
|
||||||
const charts = echarts.init(myChart);
|
const charts = echarts.init(myChart);
|
||||||
let option = {
|
let option = {
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// geo3D: {
|
||||||
|
// map: `海南`,
|
||||||
|
// viewControl: {
|
||||||
|
// autoRotate: false,
|
||||||
|
// distance: 180
|
||||||
|
// },
|
||||||
|
// shading: `color`,
|
||||||
|
// boundingCoords: [
|
||||||
|
// [-180, 90],
|
||||||
|
// [180, -90]
|
||||||
|
// ],
|
||||||
|
// colorMaterial: {
|
||||||
|
// detailTexture: this.bg, // 纹理贴图
|
||||||
|
// textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||||||
|
// },
|
||||||
|
// // 是否显示地面
|
||||||
|
// groundPlane: {
|
||||||
|
// show: false
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
|
||||||
|
|
||||||
geo3D: {
|
geo3D: {
|
||||||
|
|
||||||
map: "luzhou",
|
map: "luzhou",
|
||||||
|
shading: `color`,
|
||||||
|
//
|
||||||
roam: true,
|
roam: true,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: "#014281",
|
// color: "#014281",
|
||||||
opacity: 0.9,
|
opacity: 0.9,
|
||||||
borderWidth: 0.4,
|
borderWidth: 0.4,
|
||||||
borderColor: "#000",
|
borderColor: "#000",
|
||||||
normal: {
|
normal: {
|
||||||
areaColor: 'red',
|
areaColor: 'red',
|
||||||
borderWidth: 4, //设置外层边框
|
borderWidth: 4, //设置外层边框
|
||||||
borderColor: '#f8911b',
|
// borderColor: '#f8911b',
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
show: false,
|
show: false,
|
||||||
|
|
@ -110,7 +199,7 @@ onMounted(() => {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: false,
|
||||||
// position: "bottom",
|
// position: "bottom",
|
||||||
color: "white", //地图初始化区域字体颜色
|
color: "white", //地图初始化区域字体颜色
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
|
|
@ -122,7 +211,7 @@ onMounted(() => {
|
||||||
// backgroundColor: "red",
|
// backgroundColor: "red",
|
||||||
// },
|
// },
|
||||||
},
|
},
|
||||||
shading: "lambert",
|
shading: "color",
|
||||||
light: {
|
light: {
|
||||||
//光照阴影
|
//光照阴影
|
||||||
main: {
|
main: {
|
||||||
|
|
@ -137,18 +226,22 @@ onMounted(() => {
|
||||||
ambient: {
|
ambient: {
|
||||||
intensity: 0.7
|
intensity: 0.7
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
colorMaterial: {
|
||||||
|
detailTexture: bg, // 纹理贴图
|
||||||
|
textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||||||
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: "scatter3D",
|
type: "scatter3D",
|
||||||
coordinateSystem: "geo3D",
|
coordinateSystem: "geo3D",
|
||||||
data: data3d,
|
data: initData(mapJson.features),
|
||||||
symbol: "circle",
|
// symbol: "circle",
|
||||||
symbolSize: 20,
|
symbolSize: 20,
|
||||||
itemStyle: {
|
// itemStyle: {
|
||||||
color: "transparent",
|
// color: "transparent",
|
||||||
},
|
// },
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: "top",
|
position: "top",
|
||||||
|
|
@ -163,18 +256,19 @@ onMounted(() => {
|
||||||
backgroundColor: {
|
backgroundColor: {
|
||||||
image: '/static/index/aa.png',
|
image: '/static/index/aa.png',
|
||||||
},
|
},
|
||||||
|
// backgroundColor:""
|
||||||
|
},
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
textStyle: {
|
||||||
|
backgroundColor: {
|
||||||
|
// image: '/static/index/aa.png',
|
||||||
|
},
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
// emphasis: {
|
|
||||||
// label: {
|
|
||||||
// show: true,
|
|
||||||
// textStyle: {
|
|
||||||
// backgroundColor: {
|
|
||||||
// // image: '/static/index/aa.png',
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 137 KiB |
Loading…
Reference in New Issue