<template>
<div ref="chartView" class="chart-panel"></div>
</template>
<script>
import echarts from "echarts";
import "echarts-gl";
import { cityPoints } from "./mapData/mapCity";
import { listByParentName } from "@/api/system/grid";
import { deptList } from "@/api/cockpit/cockpit";
import resize from "../components/mixins/resize";
import { listDistrict } from "@/api/system/district";
require("echarts/theme/macarons"); // echarts theme
export default {
mixins: [resize],
components: {},
props: {
cityData: {
type: Array,
default: () => [],
},
areaType: {
type: String,
default: () => "省级",
},
type: [String, Number],
},
data() {
return {
chartData: [],
curCityName: "",
chartView: null,
overCityName: "",
// 下转到城市
corssCity: "",
};
},
computed: {},
async mounted() {
this.initChartBase("广东省");
},
methods: {
/**
* 图形大小更改
* */
async refresh() {
if (this.chartView) {
this.chartView.resize();
}
},
initChart(areaName, myCity) {
// debugger
this.chartData = this.$parent.cityData;
let citys = [];
let mapSize = 120;
if (areaName == "广东省") {
this.chartData.forEach((item) => {
myCity.features.forEach((jtem) => {
if (jtem.properties.name.indexOf(item.city) > -1) {
let point = jtem.properties.cp;
citys.push({
name: item.city,
value: [point[0] - 0.25, point[1]],
});
}
});
let point = cityPoints[item.city];
});
} else {
if (areaName == "湛江市" || areaName == "广州市") {
mapSize = 200;
} else {
mapSize = 150;
}
if (areaName !== "东莞市" && areaName !== "中山市") {
try {
this.chartData.forEach((item) => {
myCity.features.forEach((jtem) => {
if (jtem.properties.name.indexOf(item.city) > -1) {
let point = jtem.properties.cp;
citys.push({ name: item.city, value: [point[0], point[1]] });
}
});
// let point=cityPoints[item.city];
});
} catch (error) {}
}
}
let that = this;
if (this.chartView == null) {
this.chartView = echarts.init(this.$refs.chartView);
}
let option = {
geo3D: {
show: false,
map: areaName,
roam: true,
zoom: 1,
zlevel: 1,
top: -100,
bottom: -50,
right: "1%",
left: "1%",
/*各个区域线线分隔*/
itemStyle: {
color: "rgb(10,119,186)",
borderWidth: 1, //分界线wdith
borderColor: "rgb(5,225,253)", //分界线颜色
},
/*是否显示标签*/
label: {
show: true,
textStyle: {
color: "#fff", //文字颜色
fontSize: 12, //文字大小
fontWeight: 500,
padding: [50, 0, 0, 0],
backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
},
},
emphasis: {
label: {
show: true, //是否显示高亮
textStyle: {
color: "#FFFF08", //高亮文字颜色
},
},
itemStyle: {
color: "#2eb6f5", //地图高亮颜色
},
},
viewControl: {
distance: mapSize, //地图视角 控制初始大小
rotateSensitivity: 0, //禁止旋转
zoomSensitivity: 0, //禁止缩放
center: [0, 0, 0],
},
},
series: [
{
type: "map3D",
map: areaName,
roam: true,
zoom: 1,
zlevel: 1,
top: -100,
bottom: -50,
right: "1%",
left: "1%",
/*各个区域线线分隔*/
itemStyle: {
color: "rgb(10,119,186)",
borderWidth: 1, //分界线wdith
borderColor: "rgb(5,225,253)", //分界线颜色
},
/*是否显示标签*/
label: {
show: true,
textStyle: {
color: "#fff", //文字颜色
fontSize: 12, //文字大小
fontWeight: 500,
padding: [50, 0, 0, 0],
backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
},
},
emphasis: {
label: {
show: true, //是否显示高亮
formatter: function (params) {
// console.log('cc:', params.name)
// that.overCityName = params.name;
return params.name;
},
textStyle: {
color: "#FFFF08", //高亮文字颜色
},
},
itemStyle: {
color: "#2eb6f5", //地图高亮颜色
},
},
viewControl: {
distance: mapSize, //地图视角 控制初始大小
rotateSensitivity: 0, //禁止旋转
zoomSensitivity: 0, //禁止缩放
center: [0, 0, 0],
},
},
{
name: "scatter3D",
type: "scatter3D",
coordinateSystem: "geo3D",
zlevel: 8,
showEffectOn: "render",
hoverAnimation: false,
silent: false,
itemStyle: {
normal: {
color: "#EAC52E",
borderColor: "rgba(233,196,47,0.5)",
opacity: 1, //点的透明度 1不透明
borderWidth: 1,
},
},
symbolSize: 0,
label: {
position: "top",
distance: 100,
normal: {
show: true,
formatter: function (params) {
let v = "";
that.chartData.forEach((item) => {
if (item.city == params.name) {
v = item.value;
}
});
return v;
},
textStyle: {
fontSize: 12,
color: "#ffff00",
padding: [0, 0, 10, 0],
backgroundColor: "rgba(0,0,0,0)", //透明度0清空文字背景
},
},
},
data: citys,
},
],
};
this.chartView.clear();
this.chartView.setOption(option, true);
// this.chartView.getZr().off("click");
// this.chartView.getZr().on("mouseout", (params) => {
// that.overCityName = ''
// })
this.chartView.off('click')
//点击选中广州市事件
this.chartView.on('click', params => {
this.overCityName = params.name
if (this.curCityName != that.overCityName && that.overCityName) {
that.initChartBase(that.overCityName);
this.$parent.getCockpitData(that.overCityName);
that.overCityName = ''
}else{
deptList({deptName:name})
}
})
// this.chartView.getZr().on("click", (params) => {
// console.log(params)
// if (this.curCityName != that.overCityName && that.overCityName) {
// that.initChartBase(that.overCityName);
// this.$parent.getCockpitData(that.overCityName);
// that.overCityName = ''
// }else{
// deptList({deptName:name})
// }
// });
},
//选中之后执行逻辑
checkedMethod(name) {
console.log(name, this.isFirstClick);
if (this.isFirstClick) {
this.isFirstClick = false;
if (this.selectedCitys.toString().indexOf(name) == -1) {
this.selectedCitys.splice(3, 1);
this.selectedCitys.push(name);
}
} else {
let newCitys = [];
this.selectedCitys.forEach((item) => {
if (item != name) {
newCitys.push(item);
}
});
if (newCitys.length == 4) {
newCitys.splice(3, 1);
newCitys.push(name);
}
this.selectedCitys = newCitys;
}
let op = this.chartView.getOption();
op.series[0].data.forEach((item) => {
item.itemStyle = {};
item.label = {};
this.selectedCitys.forEach((jtem) => {
if (jtem == item.name) {
item.label = { textStyle: { color: "#ffd106" } };
item.itemStyle = {
color: "#a1a8ff",
borderWidth: 3,
};
}
});
});
this.chartView.clear();
this.chartView.setOption(op, true);
this.checkedCity();
},
//给父组件传值
checkedCity() {
this.$parent.checkedCity(this.selectedCitys);
},
changeMapDataType() {
this.initChartBase(this.curCityName);
},
/**
* 初始化地图基图
*/
async initChartBase(name) {
// debugger
console.log('name: ', name)
this.curCityName = name;
let myCity = null;
if (name == "广东省") {
myCity = require("./mapData/guangdong.json");
} else {
let districts = [];
try {
myCity = require("./mapData/city/" + name + ".json");
myCity.features.forEach((jtem, index) => {
if (index < 10) {
districts.push(jtem.properties.name);
}
});
this.$parent.changeReturnCity("广东省");
this.corssCity = name;
} catch (error) {
let countyCode = "";
countyCode = await this.getCountyByName(name);
districts = await this.getGridByParentName(name);
myCity = require("./mapData/county/" + countyCode + ".json");
this.$parent.changeReturnCity(this.corssCity);
}
this.$parent.changeCityData(name, districts);
}
echarts.registerMap(name, myCity);
this.initChart(name, myCity);
},
// 异步更新父页面的城市数据
async changeParentCtiyData(name) {
let districts = await this.getGridByParentName(name);
this.$parent.changeCityData(name, districts);
},
// 根据区县名称获取网格数据
getGridByParentName(name) {
return listByParentName({ type: name }).then((res) => {
return res.data;
});
},
getCountyByName(name) {
let params = {};
params.level = 3;
params.name = name;
return listDistrict(params).then((response) => {
if (response.rows) {
return response.rows[0].code;
}
});
},
},
};
</script>
<style lang='scss' scoped>
.chart-panel {
width: 100%;
height: 100%;
}
</style>