203 lines
6.7 KiB
Vue
203 lines
6.7 KiB
Vue
<template>
|
||
<div style="width: 45vw;height: 50vh;" id="myChart"></div>
|
||
</template>
|
||
<script setup>
|
||
import { ref, onMounted } from "vue"
|
||
import axios from "axios";
|
||
import * as echarts from 'echarts';
|
||
import "echarts-gl"
|
||
|
||
|
||
const initCharts = () => {
|
||
|
||
|
||
}
|
||
|
||
|
||
|
||
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 mapJson = response.data
|
||
let data = mapJson.features.map((item) => {
|
||
return {
|
||
name: item.properties.name,
|
||
};
|
||
});
|
||
console.log(data, 666)
|
||
|
||
const myChart = document.getElementById('myChart')
|
||
const charts = echarts.init(myChart);
|
||
let option = {
|
||
geo3D: {
|
||
map: "luzhou",
|
||
roam: true,
|
||
itemStyle: {
|
||
color: "#014281",
|
||
opacity: 0.9,
|
||
borderWidth: 0.4,
|
||
borderColor: "#000",
|
||
normal: {
|
||
areaColor: 'red',
|
||
borderWidth: 4, //设置外层边框
|
||
borderColor: '#f8911b',
|
||
},
|
||
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: {
|
||
show: true,
|
||
// position: "bottom",
|
||
color: "white", //地图初始化区域字体颜色
|
||
fontSize: 14,
|
||
lineHeight: 16,
|
||
// textStyle: {
|
||
// color: "#fff", //地图初始化区域字体颜色
|
||
// fontSize: 12,
|
||
// opacity: 1,
|
||
// backgroundColor: "red",
|
||
// },
|
||
},
|
||
shading: "lambert",
|
||
light: {
|
||
//光照阴影
|
||
main: {
|
||
// color: "#fff", //光照颜色
|
||
intensity: 0.8, //光照强度
|
||
shadowQuality: 'high', //阴影亮度
|
||
shadow: true, //是否显示阴影
|
||
shadowQuality: "medium", //阴影质量 ultra //阴影亮度
|
||
alpha: 55,
|
||
beta: 10
|
||
},
|
||
ambient: {
|
||
intensity: 0.7
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: "scatter3D",
|
||
coordinateSystem: "geo3D",
|
||
data: data3d,
|
||
symbol: "circle",
|
||
symbolSize: 20,
|
||
itemStyle: {
|
||
color: "transparent",
|
||
},
|
||
label: {
|
||
show: true,
|
||
position: "top",
|
||
distance: -10,
|
||
formatter(params) {
|
||
return "2";
|
||
},
|
||
|
||
textStyle: {
|
||
// color: "transparent",
|
||
padding: [15, 20],
|
||
backgroundColor: {
|
||
image: '/static/index/aa.png',
|
||
},
|
||
},
|
||
},
|
||
// emphasis: {
|
||
// label: {
|
||
// show: true,
|
||
// textStyle: {
|
||
// backgroundColor: {
|
||
// // image: '/static/index/aa.png',
|
||
// },
|
||
// },
|
||
// },
|
||
// },
|
||
|
||
},
|
||
|
||
],
|
||
|
||
|
||
};
|
||
// 地图注册，第一个参数的名字必须和option.geo.map一致
|
||
echarts.registerMap("luzhou", mapJson)
|
||
|
||
charts.setOption(option);
|
||
|
||
|
||
|
||
})
|
||
|
||
|
||
|
||
})
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</script> |