<template>
<div class="news_content">
<div id="main" style="width: 100%; height: 100%"></div>
</div>
</template>
<script>
//引入echarts与地图json文件
import * as echarts from "echarts"; // echarts@v5.2.2
import china from "../../assets/echartsData/china.json";//中国地图
import scatter from "../../assets/echartsData/scatter.json";//经纬度坐标
export default {
data() {
return {
//散点图数据
echartsData: null,
};
},
methods: {
//散点图数据处理
handleData() {
const data1 = scatter.data;
console.log(data1);
let array1 = [];
let object1 = { name: "", value: [] };
data1.forEach((item) => {
object1.name = "1";
object1.value[0] = item.staLon;
object1.value[1] = item.staLat;
array1.push(object1);
object1 = { name: "", value: [] };
});
this.echartsData = array1;
this.$nextTick(() => {
//调用渲染方法
this.drawLine();
});
},
drawLine() {
let data3 = this.echartsData;
let chart = echarts.init(document.getElementById("main"));
echarts.registerMap("中国", china);
//获取经纬度
let jinweidu = [];
let option = {
geo: [
//底层地图纯属为了好看
{
map: "中国",
zlevel: -1,
top: "11%",
itemStyle: {
areaColor: "#06050a",
borderColor: "#06050a",
borderWidth: 10,
shadowColor: "rgba(0,119,207,0.75)",
shadowOffsetY: 1,
shadowOffsetY: 1,
shadowBlur: 5,
},
},
//正面地图
{
show: true,
map: "中国",
zlevel: 0,
label: {
show: true,
color: "#fff",
fontSize: 10,
},
itemStyle: {
areaColor: "#011C33",
borderColor: "#007480",
borderWidth: 1,
},
emphasis: {
areaColor: "#108dc7",
borderColor: "#108dc7",
label: {
show: true,
color: "#fff",
},
},
},
],
//echarts自定义弹出框
tooltip: {
show: true,
triggerOn: "click",
formatter: (params) => {
let jingdu = Number(jinweidu[0]).toFixed(2);
let weidu = Number(jinweidu[1]).toFixed(2);
return `
<table>
<tbody>
<tr>
<td>经度:</td>
<td>${jingdu}</td>
</tr>
<tr>
<td>纬度:</td>
<td>${weidu}</td>
</tr>
</tbody>
</table>
`;
},
},
series: [
//经纬度示例 散点图
{
name: "图",
type: "scatter",
coordinateSystem: "geo",
data: data3,
symbol: "triangle",
symbolSize: 12,
hoverSymbolSize: 15,
encode: {
value: 2,
},
label: {
formatter: "{b}",
position: "right",
show: false,
},
itemStyle: {
color: "yellow",
},
emphasis: {
label: {
show: true,
},
},
},
],
};
window.addEventListener("resize", function () {
chart.resize();
});
//点击地图获取经纬度
chart.on("mousemove", function (params) {
jinweidu = chart.convertFromPixel("geo", [
params.event.offsetX,
params.event.offsetY,
]);
});
chart.setOption(option);
},
},
mounted() {
this.handleData();
},
};
</script>
echarts地图
于 2023-02-27 16:17:30 首次发布