1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
| <template>
| <div class="map-container">
| <div ref="map" class="map-style"></div>
| </div>
|
| </template>
|
| <script>
| import * as echarts from 'echarts';
| import 'echarts-gl';
| import mapData from '@/assets/map/zigong2.json';
| echarts.registerMap('zigong', mapData);
| console.log(mapData);
| let mapChart = null;
| let tempName = '';
| let observer = null;
| const mapConfig = {
| series: [{
| map: "zigong", //注册地图的名字
| type: "map3D",
| bottom: 0,
| left: 0,
| top: 0,
| right: 0,
| itemStyle: {
| color: "#4189f2", // 背景
| opacity: 1, //透明度
| borderWidth: 1, // 边框宽度
| borderColor: "#fff", // 边框颜色
| fontSize: 18, //
| },
|
| // 标签
| label: {
| show: true,
| color: "#fff", //地图初始化区域字体颜色
| fontSize: 18,
| },
| // 控制器
| viewControl: {
| beta: -30,
| alpha: 90,
| distance: 100,
| maxBeta: 180,
| panSensitivity: 0
| },
| // 鼠标移入时样式
| emphasis: {
| itemStyle: {
| color: "#F63545"
| }
| },
|
| // 数据
| data: mapData.features.map((item) => {
| return {
| name: item.properties.name,
| itemStyle: {
| color: "#4189f2"
| }
| }
| }),
| }
| ]
|
| };
| export default {
| name: 'DataMap',
| data() {
| return {
|
| }
| },
| components: {
| },
| methods: {
| filterData(name) {
| this.initConfig();
| let temp = mapConfig.series[0].data.find(item => item.name === name);
| temp.itemStyle.color = '#F63545';
| mapChart.setOption(mapConfig, true);
| this.$emit('filterData', name);
| },
| initConfig() {
| mapConfig.series[0].data.forEach(item => {
| item.itemStyle.color = '#4189f2';
| });
| },
| // 监听变化
| observe() {
| if (!observer) {
| observer = new ResizeObserver(entries => {
| this.handleResize();
| })
| }
| observer.observe(this.$refs.map);
| },
| // 窗口变换
| handleResize() {
| if (mapChart) {
| mapChart.resize();
| }
| }
| },
| mounted() {
| mapChart = echarts.init(this.$refs.map);
| mapChart.setOption(mapConfig, true);
| mapChart.on('click', (params) => {
| if (tempName === params.name) {
| tempName = '';
| this.initConfig();
| mapChart.setOption(mapConfig, true);
| this.$emit('filterData', '');
| } else {
| tempName = params.name;
| this.filterData(params.name);
| }
| });
| this.observe();
| },
| beforeDestroy() {
| if (observer) {
| mapChart.dispose();
| observer.unobserve(this.$refs.map);
| }
| },
| }
| </script>
|
| <style lang="scss" scoped>
| .map-container {
| width: 100%;
| height: 100%;
|
| .map-style {
| width: 100%;
| height: 100%;
| }
| }
| </style>
|
|
