|
|
@@ -31,10 +31,42 @@ import 临汾市 from '@/views/screen/map/临汾市.json'
|
|
|
import 长治市 from '@/views/screen/map/长治市.json'
|
|
|
import 运城市 from '@/views/screen/map/运城市.json'
|
|
|
import 晋城市 from '@/views/screen/map/晋城市.json'
|
|
|
+import { getProjectByAppOrg } from '@/api/screen/service'
|
|
|
let imgElement
|
|
|
export default {
|
|
|
+ props: {
|
|
|
+ list1: Array,
|
|
|
+ list2: Array
|
|
|
+ },
|
|
|
data(){
|
|
|
return{
|
|
|
+ projectList: [],
|
|
|
+ area: [
|
|
|
+ { name: "太原市", appOrg: "1A003" },
|
|
|
+ { name: "大同市", appOrg: "1B001" },
|
|
|
+ { name: "阳泉市", appOrg: "1C001" },
|
|
|
+ { name: "长治市", appOrg: "1D001" },
|
|
|
+ { name: "晋城市", appOrg: "1E001" },
|
|
|
+ { name: "朔州市", appOrg: "1F001" },
|
|
|
+ { name: "晋中市", appOrg: "1K001" },
|
|
|
+ { name: "临汾市", appOrg: "1L001" },
|
|
|
+ { name: "忻州市", appOrg: "1H001" },
|
|
|
+ { name: "运城市", appOrg: "1M001" },
|
|
|
+ { name: "吕梁市", appOrg: "1J001" }
|
|
|
+ ],
|
|
|
+ points: [
|
|
|
+ { name: "太原市", coordinate: [112.4493, 37.8570], appOrg: "1A003", x: "1", y: "2" },
|
|
|
+ { name: "大同市", coordinate: [113.3002, 40.0768], appOrg: "1B001", x: "1", y: "2" },
|
|
|
+ { name: "阳泉市", coordinate: [113.5805, 37.8563], appOrg: "1C001", x: "1", y: "2" },
|
|
|
+ { name: "长治市", coordinate: [113.1163, 36.1954], appOrg: "1D001", x: "1", y: "2" },
|
|
|
+ { name: "晋城市", coordinate: [112.8513, 35.4907], appOrg: "1E001", x: "1", y: "2" },
|
|
|
+ { name: "朔州市", coordinate: [112.4329, 39.3312], appOrg: "1F001", x: "1", y: "2" },
|
|
|
+ { name: "晋中市", coordinate: [112.8527, 37.6870], appOrg: "1K001", x: "1", y: "2" },
|
|
|
+ { name: "临汾市", coordinate: [111.5186, 36.0882], appOrg: "1L001", x: "1", y: "2" },
|
|
|
+ { name: "忻州市", coordinate: [112.7341, 38.4167], appOrg: "1H001", x: "1", y: "2" },
|
|
|
+ { name: "运城市", coordinate: [111.0069, 35.0264], appOrg: "1M001", x: "1", y: "2" },
|
|
|
+ { name: "吕梁市", coordinate: [111.1443, 37.5183], appOrg: "1J001", x: "1", y: "2" }
|
|
|
+ ],
|
|
|
appOrg: "10001",
|
|
|
showBack: false,
|
|
|
dataSource: {
|
|
|
@@ -54,6 +86,12 @@ export default {
|
|
|
},
|
|
|
created () {},
|
|
|
mounted() {
|
|
|
+ let i = 0
|
|
|
+ for (let it of this.points){
|
|
|
+ it.x = this.list1[i]
|
|
|
+ it.y = this.list2[i]
|
|
|
+ i++
|
|
|
+ }
|
|
|
this.$nextTick(() => {
|
|
|
imgElement = document.getElementById("mapBackground");
|
|
|
setTimeout(() => {
|
|
|
@@ -63,33 +101,7 @@ export default {
|
|
|
},
|
|
|
methods: {
|
|
|
initCharts() {
|
|
|
- const area = [
|
|
|
- { name: "太原市", appOrg: "1A003" },
|
|
|
- { name: "大同市", appOrg: "1B001" },
|
|
|
- { name: "阳泉市", appOrg: "1C001" },
|
|
|
- { name: "长治市", appOrg: "1D001" },
|
|
|
- { name: "晋城市", appOrg: "1E001" },
|
|
|
- { name: "朔州市", appOrg: "1F001" },
|
|
|
- { name: "晋中市", appOrg: "1K001" },
|
|
|
- { name: "临汾市", appOrg: "1L001" },
|
|
|
- { name: "忻州市", appOrg: "1H001" },
|
|
|
- { name: "运城市", appOrg: "1M001" },
|
|
|
- { name: "吕梁市", appOrg: "1J001" }
|
|
|
- ];
|
|
|
- const points = [
|
|
|
- { name: "太原市", coordinate: [112.4493, 37.8570], x: "1", y: "2" },
|
|
|
- { name: "大同市", coordinate: [113.3002, 40.0768], x: "1", y: "2" },
|
|
|
- { name: "阳泉市", coordinate: [113.5805, 37.8563], x: "1", y: "2" },
|
|
|
- { name: "长治市", coordinate: [113.1163, 36.1954], x: "1", y: "2" },
|
|
|
- { name: "晋城市", coordinate: [112.8513, 35.4907], x: "1", y: "2" },
|
|
|
- { name: "朔州市", coordinate: [112.4329, 39.3312], x: "1", y: "2" },
|
|
|
- { name: "晋中市", coordinate: [112.8527, 37.6870], x: "1", y: "2" },
|
|
|
- { name: "临汾市", coordinate: [111.5186, 36.0882], x: "1", y: "2" },
|
|
|
- { name: "忻州市", coordinate: [112.7341, 38.4167], x: "1", y: "2" },
|
|
|
- { name: "运城市", coordinate: [111.0069, 35.0264], x: "1", y: "2" },
|
|
|
- { name: "吕梁市", coordinate: [111.1443, 37.5183], x: "1", y: "2" }
|
|
|
- ];
|
|
|
- const charts = echarts.init(this.$refs["charts"]);
|
|
|
+ this.charts = echarts.init(this.$refs["charts"]);
|
|
|
const option = {
|
|
|
// 设置背景颜色，"transparent" 表示透明背景
|
|
|
backgroundColor: "transparent",
|
|
|
@@ -154,7 +166,7 @@ export default {
|
|
|
fontWeight: 600, // 字重
|
|
|
emphasis: { color: "#fff" }, // 悬浮时的文字颜色
|
|
|
},
|
|
|
- data: area
|
|
|
+ data: this.area
|
|
|
},
|
|
|
|
|
|
{
|
|
|
@@ -162,9 +174,10 @@ export default {
|
|
|
coordinateSystem: "geo", // 使用 `geo` 作为坐标系
|
|
|
symbol: "image://" + require("@/assets/zhang/myMap/projectPosition.png"), // 自定义标记（图片）
|
|
|
symbolSize: [30, 20], // 标记大小（宽 30，高 20）
|
|
|
- data: points.map(({ name, coordinate, x, y }) => ({
|
|
|
+ data: this.points.map(({ name, coordinate, appOrg, x, y }) => ({
|
|
|
name, // 点名称
|
|
|
value: coordinate, // 经纬度坐标
|
|
|
+ appOrg,
|
|
|
x, // 额外数据（在建项目数）
|
|
|
y, // 额外数据（施工项目数）
|
|
|
})),
|
|
|
@@ -173,29 +186,42 @@ export default {
|
|
|
};
|
|
|
// 地图注册，第一个参数的名字必须和option.geo.map一致
|
|
|
echarts.registerMap("shanxi",shanxi)
|
|
|
- charts.setOption(option);
|
|
|
+ this.charts.setOption(option);
|
|
|
// 监听点击事件
|
|
|
- charts.on("click", (params) => {
|
|
|
+ this.charts.on("click", (params) => {
|
|
|
if (params.componentType === "geo") {
|
|
|
// 点击的是地图区域
|
|
|
console.log("Clicked map area: ", params.name);
|
|
|
} else if (params.componentType === "series") {
|
|
|
// 点击的是自定义图标（scatter）
|
|
|
- console.log("Clicked scatter point: ", params.name, params.data.appOrg);
|
|
|
+ console.log("Clicked scatter point: ", params.data.appOrg);
|
|
|
this.appOrg = params.data.appOrg
|
|
|
this.$emit('transmit', this.appOrg)
|
|
|
// 销毁当前图表实例
|
|
|
- charts.dispose();
|
|
|
+ this.charts.dispose();
|
|
|
// 重新初始化并设置新的配置项
|
|
|
this.$nextTick(() => {
|
|
|
- this.initChildren(params.name) // 重新初始化图表
|
|
|
- this.showBack = true
|
|
|
+ getProjectByAppOrg(this.appOrg).then((res) => {
|
|
|
+ if (Number(res.code) === 200) {
|
|
|
+ for (let it of res.data){
|
|
|
+ let coordinate = []
|
|
|
+ let obj = {}
|
|
|
+ coordinate.push(it.abscissa)
|
|
|
+ coordinate.push(it.ordinate)
|
|
|
+ obj.coordinate = coordinate
|
|
|
+ obj.name = it.projectName
|
|
|
+ this.projectList.push(obj)
|
|
|
+ }
|
|
|
+ this.initChildren(params.name) // 重新初始化图表
|
|
|
+ this.showBack = true
|
|
|
+ }
|
|
|
+ })
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
initChildren(cityName){
|
|
|
- const charts = echarts.init(this.$refs["charts"]);
|
|
|
+ this.childCharts = echarts.init(this.$refs["charts"]);
|
|
|
const option = {
|
|
|
// 设置背景颜色，"transparent" 表示透明背景
|
|
|
backgroundColor: "transparent",
|
|
|
@@ -251,18 +277,32 @@ export default {
|
|
|
select: { disabled: true }, // 禁用地图的选中状态，防止点击后颜色锁定
|
|
|
label: {
|
|
|
show: true, // 显示区域名称
|
|
|
- color: "#FFF", // 文字颜色
|
|
|
- fontSize: 16, // 文字大小
|
|
|
- fontWeight: 600, // 字重
|
|
|
- emphasis: { color: "#fff" }, // 悬浮时的文字颜色
|
|
|
+ color: "#11F6F2", // 文字颜色
|
|
|
+ fontSize: 12, // 文字大小
|
|
|
+ emphasis: { color: "#11F6F2" }, // 悬浮时的文字颜色
|
|
|
},
|
|
|
- }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "scatter", // 散点图（用于标注特殊位置）
|
|
|
+ coordinateSystem: "geo", // 使用 `geo` 作为坐标系
|
|
|
+ symbol: 'circle', // 自定义标记
|
|
|
+ symbolSize: 10, // 标记的大小
|
|
|
+ itemStyle: {
|
|
|
+ color: 'yellow'
|
|
|
+ },
|
|
|
+ data: this.projectList.map(({ name, coordinate }) => ({
|
|
|
+ name, // 点名称
|
|
|
+ value: coordinate // 经纬度坐标
|
|
|
+ })),
|
|
|
+ },
|
|
|
]
|
|
|
};
|
|
|
echarts.registerMap("child", this.dataSource[cityName])
|
|
|
- charts.setOption(option);
|
|
|
+ this.childCharts.setOption(option);
|
|
|
},
|
|
|
beBack(){
|
|
|
+ this.projectList = []
|
|
|
+ this.childCharts.dispose();
|
|
|
this.initCharts()
|
|
|
this.showBack = false
|
|
|
this.appOrg = "10001"
|
