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>
|
||||
<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>
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue"
|
||||
|
|
@ -8,71 +11,157 @@ import * as echarts from 'echarts';
|
|||
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(() => {
|
||||
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')
|
||||
.then(function (response) {
|
||||
let dot=document.getElementById('img')
|
||||
let mapJson = response.data
|
||||
let data = mapJson.features.map((item) => {
|
||||
return {
|
||||
name: item.properties.name,
|
||||
};
|
||||
});
|
||||
console.log(data, 666)
|
||||
let chartOption= {
|
||||
geo: {
|
||||
backgroundColor: {
|
||||
color: {
|
||||
image: dot, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
|
||||
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 charts = echarts.init(myChart);
|
||||
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: {
|
||||
|
||||
map: "luzhou",
|
||||
shading: `color`,
|
||||
//
|
||||
roam: true,
|
||||
itemStyle: {
|
||||
color: "#014281",
|
||||
// color: "#014281",
|
||||
opacity: 0.9,
|
||||
borderWidth: 0.4,
|
||||
borderColor: "#000",
|
||||
normal: {
|
||||
areaColor: 'red',
|
||||
borderWidth: 4, //设置外层边框
|
||||
borderColor: '#f8911b',
|
||||
// borderColor: '#f8911b',
|
||||
},
|
||||
emphasis: {
|
||||
show: false,
|
||||
|
|
@ -110,7 +199,7 @@ onMounted(() => {
|
|||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
show: false,
|
||||
// position: "bottom",
|
||||
color: "white", //地图初始化区域字体颜色
|
||||
fontSize: 14,
|
||||
|
|
@ -122,7 +211,7 @@ onMounted(() => {
|
|||
// backgroundColor: "red",
|
||||
// },
|
||||
},
|
||||
shading: "lambert",
|
||||
shading: "color",
|
||||
light: {
|
||||
//光照阴影
|
||||
main: {
|
||||
|
|
@ -137,18 +226,22 @@ onMounted(() => {
|
|||
ambient: {
|
||||
intensity: 0.7
|
||||
}
|
||||
}
|
||||
},
|
||||
colorMaterial: {
|
||||
detailTexture: bg, // 纹理贴图
|
||||
textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "scatter3D",
|
||||
coordinateSystem: "geo3D",
|
||||
data: data3d,
|
||||
symbol: "circle",
|
||||
data: initData(mapJson.features),
|
||||
// symbol: "circle",
|
||||
symbolSize: 20,
|
||||
itemStyle: {
|
||||
color: "transparent",
|
||||
},
|
||||
// itemStyle: {
|
||||
// color: "transparent",
|
||||
// },
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
|
|
@ -163,18 +256,19 @@ onMounted(() => {
|
|||
backgroundColor: {
|
||||
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