181 lines
3.8 KiB
Vue
181 lines
3.8 KiB
Vue
<template>
|
|
<view class="content">
|
|
<view class="themapdiv">
|
|
<view class="chart pt-10">
|
|
<view id="mapChart2" class="mapChart2"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
getMyMarketColor
|
|
} from "@/config/mine.js";
|
|
import {
|
|
_debounce
|
|
} from "@/config/common.js";
|
|
import axios from "axios";
|
|
export default {
|
|
data() {
|
|
return {
|
|
countryList: [],
|
|
myChart: null,
|
|
chinaCode: "world",
|
|
curMapName: "China", // 当前地图名
|
|
colorList: [],
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getMapData(this.chinaCode);
|
|
window.addEventListener("resize", this.resizeCharts);
|
|
},
|
|
beforeDestroy() {
|
|
window.addEventListener("resize", this.resizeCharts);
|
|
},
|
|
methods: {
|
|
async drawMapChart(mapName, mapJSON) {
|
|
if (
|
|
this.myChart != null &&
|
|
this.myChart != "" &&
|
|
this.myChart != undefined
|
|
) {
|
|
this.myChart.dispose();
|
|
}
|
|
this.myChart = this.$echarts.init(document.getElementById("mapChart2"));
|
|
this.$echarts.registerMap(mapName, mapJSON);
|
|
// 获取颜色列表
|
|
const res = await getMyMarketColor();
|
|
const thecolorJson = res.data;
|
|
|
|
// 修改颜色列表
|
|
thecolorJson.forEach((item) => {
|
|
item.itemStyle = {
|
|
normal: {
|
|
areaColor: "#C8161D", // 选中区域的颜色
|
|
},
|
|
};
|
|
});
|
|
|
|
|
|
this.myChart.setOption({
|
|
series: [{
|
|
type: "map",
|
|
map: mapName,
|
|
roam: false, // 是否开启鼠标缩放和平移漫游
|
|
zoom: 2,
|
|
selectedMode: "false", // 是否允许选中多个区域
|
|
label: {
|
|
show: false, //地图上地区文字的现实
|
|
color: "#a8e6e1",
|
|
},
|
|
zoom: 1, // 设置初始缩放级别
|
|
zoomLimit: {
|
|
// 设置缩放级别的限制范围
|
|
min: 1, // 最小缩放级别
|
|
max: 1, // 最大缩放级别
|
|
},
|
|
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
areaColor: "#14517c",
|
|
borderColor: "#14517c",
|
|
borderWidth: 1,
|
|
},
|
|
//鼠标悬浮区域上的背景颜色
|
|
emphasis: {
|
|
show: true,
|
|
areaColor: "#C8161D",
|
|
},
|
|
},
|
|
tooltip: {
|
|
trigger: "item",
|
|
show: true,
|
|
backgroundColor: "transparent",
|
|
|
|
textStyle: {
|
|
width: 300,
|
|
height: 300,
|
|
},
|
|
},
|
|
|
|
// data: this.initMapData(mapJSON),
|
|
data: thecolorJson, // 使用修改后的颜色列表作为地图数据
|
|
}, ],
|
|
});
|
|
|
|
|
|
},
|
|
initMapData(mapJson) {
|
|
var thecolorJson = this.colorList;
|
|
thecolorJson.map((item) => {
|
|
item.itemStyle = {
|
|
normal: {
|
|
areaColor: "#C8161D", //选中区域的颜色
|
|
},
|
|
};
|
|
});
|
|
let mapData = [];
|
|
for (let i = 0; i < mapJson.features.length; i++) {
|
|
mapData.push({
|
|
name: mapJson.features[i].properties.name
|
|
});
|
|
}
|
|
// console.log("🌈thecolorJson", thecolorJson);
|
|
return thecolorJson;
|
|
},
|
|
|
|
// 浏览器窗口大小改变时，重新加载图表以自适应
|
|
resizeCharts: _debounce(function() {
|
|
this.$echarts.init(document.getElementById("mapChart2")).resize();
|
|
}, 500),
|
|
// 获取地图数据
|
|
getMapData(map) {
|
|
axios
|
|
.get(`/static/map/${map}.json`)
|
|
.then((res) => {
|
|
if (res.status == 200) {
|
|
const mapJSON = res.data;
|
|
this.drawMapChart(this.curMapName, mapJSON);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$message({
|
|
message: err,
|
|
type: "error",
|
|
showClose: true
|
|
});
|
|
});
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.content{
|
|
background-color: #ffffff;
|
|
height: 100vh;
|
|
.chart{
|
|
#mapChart2 {
|
|
width: 100%;
|
|
height: 580rpx;
|
|
position: relative;
|
|
}
|
|
}
|
|
.themapdiv {
|
|
width: 100%;
|
|
background: #ffffff;
|
|
// height: 952px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style> |