2023-12-01 18:22:09 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<div style="width: 45vw;height: 50vh;" id="myChart"></div>
|
2023-12-02 00:02:08 +08:00
|
|
|
|
<div style="width: 45vw;height: 50vh;" id="chart2"></div>
|
|
|
|
|
|
<img src="/static/index/aa.png" id="img" style="opacity: 0;" alt="">
|
|
|
|
|
|
|
2023-12-01 18:22:09 +08:00
|
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
|
|
|
import { ref, onMounted } from "vue"
|
|
|
|
|
|
import axios from "axios";
|
|
|
|
|
|
import * as echarts from 'echarts';
|
|
|
|
|
|
import "echarts-gl"
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-12-02 00:02:08 +08:00
|
|
|
|
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'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
}
|
2023-12-01 18:22:09 +08:00
|
|
|
|
|
|
|
|
|
|
|
2023-12-02 00:02:08 +08:00
|
|
|
|
});
|
|
|
|
|
|
return data3d
|
2023-12-01 18:22:09 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
|
|
|
|
const u = 'https:\/\/ceshi-worker-task.lihaink.cn\/uploads\/images\/20231129\/202311291816106120a4034.png'
|
|
|
|
|
|
axios.get('https://geo.datav.aliyun.com/areas_v3/bound/510000_full.json')
|
|
|
|
|
|
.then(function (response) {
|
2023-12-02 00:02:08 +08:00
|
|
|
|
let dot=document.getElementById('img')
|
2023-12-01 18:22:09 +08:00
|
|
|
|
let mapJson = response.data
|
2023-12-02 00:02:08 +08:00
|
|
|
|
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, `五指山市`]
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
]
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-12-01 18:22:09 +08:00
|
|
|
|
|
2023-12-02 00:02:08 +08:00
|
|
|
|
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)
|
2023-12-01 18:22:09 +08:00
|
|
|
|
const myChart = document.getElementById('myChart')
|
|
|
|
|
|
const charts = echarts.init(myChart);
|
|
|
|
|
|
let option = {
|
2023-12-02 00:02:08 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// geo3D: {
|
|
|
|
|
|
// map: `海南`,
|
|
|
|
|
|
// viewControl: {
|
|
|
|
|
|
// autoRotate: false,
|
|
|
|
|
|
// distance: 180
|
|
|
|
|
|
// },
|
|
|
|
|
|
// shading: `color`,
|
|
|
|
|
|
// boundingCoords: [
|
|
|
|
|
|
// [-180, 90],
|
|
|
|
|
|
// [180, -90]
|
|
|
|
|
|
// ],
|
|
|
|
|
|
// colorMaterial: {
|
|
|
|
|
|
// detailTexture: this.bg, // 纹理贴图
|
|
|
|
|
|
// textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
|
|
|
|
|
// },
|
|
|
|
|
|
// // 是否显示地面
|
|
|
|
|
|
// groundPlane: {
|
|
|
|
|
|
// show: false
|
|
|
|
|
|
// }
|
|
|
|
|
|
// },
|
|
|
|
|
|
|
|
|
|
|
|
|
2023-12-01 18:22:09 +08:00
|
|
|
|
geo3D: {
|
2023-12-02 00:02:08 +08:00
|
|
|
|
|
2023-12-01 18:22:09 +08:00
|
|
|
|
map: "luzhou",
|
2023-12-02 00:02:08 +08:00
|
|
|
|
shading: `color`,
|
|
|
|
|
|
//
|
2023-12-01 18:22:09 +08:00
|
|
|
|
roam: true,
|
|
|
|
|
|
itemStyle: {
|
2023-12-02 00:02:08 +08:00
|
|
|
|
// color: "#014281",
|
2023-12-01 18:22:09 +08:00
|
|
|
|
opacity: 0.9,
|
|
|
|
|
|
borderWidth: 0.4,
|
|
|
|
|
|
borderColor: "#000",
|
|
|
|
|
|
normal: {
|
|
|
|
|
|
areaColor: 'red',
|
|
|
|
|
|
borderWidth: 4, //设置外层边框
|
2023-12-02 00:02:08 +08:00
|
|
|
|
// borderColor: '#f8911b',
|
2023-12-01 18:22:09 +08:00
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
// areaColor: '#01215c'
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// areaColor: '#fff'
|
|
|
|
|
|
},
|
|
|
|
|
|
viewControl: {
|
|
|
|
|
|
autoRotate: true,
|
|
|
|
|
|
autoRotateAfterStill: 3,
|
|
|
|
|
|
distance: 90,
|
|
|
|
|
|
minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
|
|
|
|
|
|
maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
|
|
|
|
|
|
minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
|
|
|
|
|
|
maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
|
|
|
|
|
|
animation: true, // 是否开启动画。[ default: true ]
|
|
|
|
|
|
animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
|
|
|
|
|
|
animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
disabled: true, //是否可以被选中
|
|
|
|
|
|
label: {
|
|
|
|
|
|
//移入时的高亮文本
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
},
|
|
|
|
|
|
itemStyle: {
|
|
|
|
|
|
color:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
"#B17049" //显示移入的区块变粉色
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
label: {
|
2023-12-02 00:02:08 +08:00
|
|
|
|
show: false,
|
2023-12-01 18:22:09 +08:00
|
|
|
|
// position: "bottom",
|
|
|
|
|
|
color: "white", //地图初始化区域字体颜色
|
|
|
|
|
|
fontSize: 14,
|
|
|
|
|
|
lineHeight: 16,
|
|
|
|
|
|
// textStyle: {
|
|
|
|
|
|
// color: "#fff", //地图初始化区域字体颜色
|
|
|
|
|
|
// fontSize: 12,
|
|
|
|
|
|
// opacity: 1,
|
|
|
|
|
|
// backgroundColor: "red",
|
|
|
|
|
|
// },
|
|
|
|
|
|
},
|
2023-12-02 00:02:08 +08:00
|
|
|
|
shading: "color",
|
2023-12-01 18:22:09 +08:00
|
|
|
|
light: {
|
|
|
|
|
|
//光照阴影
|
|
|
|
|
|
main: {
|
|
|
|
|
|
// color: "#fff", //光照颜色
|
|
|
|
|
|
intensity: 0.8, //光照强度
|
|
|
|
|
|
shadowQuality: 'high', //阴影亮度
|
|
|
|
|
|
shadow: true, //是否显示阴影
|
|
|
|
|
|
shadowQuality: "medium", //阴影质量 ultra //阴影亮度
|
|
|
|
|
|
alpha: 55,
|
|
|
|
|
|
beta: 10
|
|
|
|
|
|
},
|
|
|
|
|
|
ambient: {
|
|
|
|
|
|
intensity: 0.7
|
|
|
|
|
|
}
|
2023-12-02 00:02:08 +08:00
|
|
|
|
},
|
|
|
|
|
|
colorMaterial: {
|
|
|
|
|
|
detailTexture: bg, // 纹理贴图
|
|
|
|
|
|
textureTiling: 1 // 纹理平铺，1是拉伸，数字表示纹理平铺次数
|
|
|
|
|
|
},
|
2023-12-01 18:22:09 +08:00
|
|
|
|
},
|
|
|
|
|
|
series: [
|
|
|
|
|
|
{
|
|
|
|
|
|
type: "scatter3D",
|
|
|
|
|
|
coordinateSystem: "geo3D",
|
2023-12-02 00:02:08 +08:00
|
|
|
|
data: initData(mapJson.features),
|
|
|
|
|
|
// symbol: "circle",
|
2023-12-01 18:22:09 +08:00
|
|
|
|
symbolSize: 20,
|
2023-12-02 00:02:08 +08:00
|
|
|
|
// itemStyle: {
|
|
|
|
|
|
// color: "transparent",
|
|
|
|
|
|
// },
|
2023-12-01 18:22:09 +08:00
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
position: "top",
|
|
|
|
|
|
distance: -10,
|
|
|
|
|
|
formatter(params) {
|
|
|
|
|
|
return "2";
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
// color: "transparent",
|
|
|
|
|
|
padding: [15, 20],
|
|
|
|
|
|
backgroundColor: {
|
|
|
|
|
|
image: '/static/index/aa.png',
|
|
|
|
|
|
},
|
2023-12-02 00:02:08 +08:00
|
|
|
|
// backgroundColor:""
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
emphasis: {
|
|
|
|
|
|
label: {
|
|
|
|
|
|
show: true,
|
|
|
|
|
|
textStyle: {
|
|
|
|
|
|
backgroundColor: {
|
|
|
|
|
|
// image: '/static/index/aa.png',
|
|
|
|
|
|
},
|
|
|
|
|
|
},
|
2023-12-01 18:22:09 +08:00
|
|
|
|
},
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
],
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
// 地图注册，第一个参数的名字必须和option.geo.map一致
|
|
|
|
|
|
echarts.registerMap("luzhou", mapJson)
|
|
|
|
|
|
|
|
|
|
|
|
charts.setOption(option);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
