|
@@ -33,6 +33,9 @@ import 运城市 from '@/views/screen/map/运城市.json'
|
|
|
import 晋城市 from '@/views/screen/map/晋城市.json'
|
|
|
let imgElement
|
|
|
export default {
|
|
|
+ props: {
|
|
|
+ mapData: Array
|
|
|
+ },
|
|
|
data() {
|
|
|
return {
|
|
|
appOrg: "10001",
|
|
@@ -49,19 +52,38 @@ export default {
|
|
|
长治市: 长治市,
|
|
|
运城市: 运城市,
|
|
|
晋城市: 晋城市,
|
|
|
- }
|
|
|
+ },
|
|
|
+ points:[
|
|
|
+ { 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" }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
created () {},
|
|
|
- mounted() {
|
|
|
- this.$nextTick(() => {
|
|
|
- imgElement = document.getElementById("mapBackground");
|
|
|
- setTimeout(() => {
|
|
|
- this.initCharts();
|
|
|
- }, 500);
|
|
|
- });
|
|
|
- },
|
|
|
+ mounted() {},
|
|
|
methods: {
|
|
|
+ start(){
|
|
|
+ this.$nextTick(() => {
|
|
|
+ let i = 0
|
|
|
+ for (let it of this.points){
|
|
|
+ it.x = this.mapData[i]
|
|
|
+ i++
|
|
|
+ }
|
|
|
+ imgElement = document.getElementById("mapBackground");
|
|
|
+ setTimeout(() => {
|
|
|
+ this.initCharts();
|
|
|
+ }, 500);
|
|
|
+ });
|
|
|
+ },
|
|
|
initCharts() {
|
|
|
const area = [
|
|
|
{ name: "太原市", appOrg: "1A003" },
|
|
@@ -76,19 +98,6 @@ export default {
|
|
|
{ name: "运城市", appOrg: "1M001" },
|
|
|
{ name: "吕梁市", appOrg: "1J001" }
|
|
|
];
|
|
|
- const points = [
|
|
|
- { 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 option = {
|
|
|
// 设置背景颜色,"transparent" 表示透明背景
|
|
@@ -170,7 +179,7 @@ export default {
|
|
|
padding: [6, 7], // 文字内边距(可选)
|
|
|
borderRadius: 2, // 文字框圆角(可选)
|
|
|
},
|
|
|
- data: points.map(({ name, coordinate, appOrg, x, y }) => ({
|
|
|
+ data: this.points.map(({ name, coordinate, appOrg, x, y }) => ({
|
|
|
name, // 点名称
|
|
|
value: coordinate, // 经纬度坐标
|
|
|
label: { formatter: `${x}` }, // 显示 `x` 数据(可换成 y)
|