|
@@ -1,6 +1,6 @@
|
|
<template>
|
|
<template>
|
|
- <div style="width: 580px">
|
|
|
|
- <div ref="charts" style="width: 100%;height: 900px;margin-top: -120px"></div>
|
|
|
|
|
|
+ <div style="width: 680px">
|
|
|
|
+ <div ref="charts" style="width: 100%;height: 920px;margin-top: -80px"></div>
|
|
<img
|
|
<img
|
|
id="mapBackground"
|
|
id="mapBackground"
|
|
src="@/assets/images/main/map_bg.jpg"
|
|
src="@/assets/images/main/map_bg.jpg"
|
|
@@ -35,6 +35,7 @@ let imgElement
|
|
export default {
|
|
export default {
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
|
|
+ appOrg: "10001",
|
|
showBack: false,
|
|
showBack: false,
|
|
dataSource: {
|
|
dataSource: {
|
|
大同市: 大同市,
|
|
大同市: 大同市,
|
|
@@ -76,17 +77,17 @@ export default {
|
|
{ name: "吕梁市", appOrg: "1J001" }
|
|
{ name: "吕梁市", appOrg: "1J001" }
|
|
];
|
|
];
|
|
const points = [
|
|
const points = [
|
|
- { name: "太原市", coordinate: [112.3493, 37.7570], x: "399", y: "2" },
|
|
|
|
- { name: "大同市", coordinate: [113.3002, 40.0768], x: "399", y: "2" },
|
|
|
|
- { name: "阳泉市", coordinate: [113.6805, 37.7863], x: "399", y: "2" },
|
|
|
|
- { name: "长治市", coordinate: [113.1163, 36.1954], x: "399", y: "2" },
|
|
|
|
- { name: "晋城市", coordinate: [113.1513, 35.5907], x: "399", y: "2" },
|
|
|
|
- { name: "朔州市", coordinate: [112.4329, 39.5312], x: "399", y: "2" },
|
|
|
|
- { name: "晋中市", coordinate: [113.2527, 37.3870], x: "399", y: "2" },
|
|
|
|
- { name: "临汾市", coordinate: [111.5186, 35.8582], x: "399", y: "2" },
|
|
|
|
- { name: "忻州市", coordinate: [112.7341, 38.6167], x: "399", y: "2" },
|
|
|
|
- { name: "运城市", coordinate: [110.9069, 34.9264], x: "399", y: "2" },
|
|
|
|
- { name: "吕梁市", coordinate: [111.1443, 37.4183], x: "399", y: "2" }
|
|
|
|
|
|
+ { name: "太原市", coordinate: [112.3493, 37.7570], appOrg: "1A003", x: "399", y: "2" },
|
|
|
|
+ { name: "大同市", coordinate: [113.3002, 40.0768], appOrg: "1B001", x: "399", y: "2" },
|
|
|
|
+ { name: "阳泉市", coordinate: [113.6805, 37.7863], appOrg: "1C001", x: "399", y: "2" },
|
|
|
|
+ { name: "长治市", coordinate: [113.1163, 36.1954], appOrg: "1D001", x: "399", y: "2" },
|
|
|
|
+ { name: "晋城市", coordinate: [113.1513, 35.5907], appOrg: "1E001", x: "399", y: "2" },
|
|
|
|
+ { name: "朔州市", coordinate: [112.4329, 39.5312], appOrg: "1F001", x: "399", y: "2" },
|
|
|
|
+ { name: "晋中市", coordinate: [113.2527, 37.3870], appOrg: "1K001", x: "399", y: "2" },
|
|
|
|
+ { name: "临汾市", coordinate: [111.5186, 35.8582], appOrg: "1L001", x: "399", y: "2" },
|
|
|
|
+ { name: "忻州市", coordinate: [112.7341, 38.6167], appOrg: "1H001", x: "399", y: "2" },
|
|
|
|
+ { name: "运城市", coordinate: [110.9069, 34.9264], appOrg: "1M001", x: "399", y: "2" },
|
|
|
|
+ { name: "吕梁市", coordinate: [111.1443, 37.4183], appOrg: "1J001", x: "399", y: "2" }
|
|
];
|
|
];
|
|
const charts = echarts.init(this.$refs["charts"]);
|
|
const charts = echarts.init(this.$refs["charts"]);
|
|
const option = {
|
|
const option = {
|
|
@@ -169,10 +170,11 @@ export default {
|
|
padding: [6, 7], // 文字内边距(可选)
|
|
padding: [6, 7], // 文字内边距(可选)
|
|
borderRadius: 2, // 文字框圆角(可选)
|
|
borderRadius: 2, // 文字框圆角(可选)
|
|
},
|
|
},
|
|
- data: points.map(({ name, coordinate, x, y }) => ({
|
|
|
|
|
|
+ data: points.map(({ name, coordinate, appOrg, x, y }) => ({
|
|
name, // 点名称
|
|
name, // 点名称
|
|
value: coordinate, // 经纬度坐标
|
|
value: coordinate, // 经纬度坐标
|
|
label: { formatter: `${x}` }, // 显示 `x` 数据(可换成 y)
|
|
label: { formatter: `${x}` }, // 显示 `x` 数据(可换成 y)
|
|
|
|
+ appOrg,
|
|
x, // 额外数据(在建项目数)
|
|
x, // 额外数据(在建项目数)
|
|
y, // 额外数据(施工项目数)
|
|
y, // 额外数据(施工项目数)
|
|
})),
|
|
})),
|
|
@@ -188,6 +190,7 @@ export default {
|
|
// 点击的是地图区域
|
|
// 点击的是地图区域
|
|
console.log("Clicked map area: ", params.name);
|
|
console.log("Clicked map area: ", params.name);
|
|
} else if (params.componentType === "series") {
|
|
} else if (params.componentType === "series") {
|
|
|
|
+ this.appOrg = params.data.appOrg
|
|
// 点击的是自定义图标(scatter)
|
|
// 点击的是自定义图标(scatter)
|
|
console.log("Clicked scatter point: ", params.name, params.data.appOrg);
|
|
console.log("Clicked scatter point: ", params.name, params.data.appOrg);
|
|
// 销毁当前图表实例
|
|
// 销毁当前图表实例
|