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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
| <template>
| <div class="map-container">
| <wrapper-title :title="'区域地图'"></wrapper-title>
| <div class="map-content">
| <div ref="map" class="map-style"></div>
| </div>
| </div>
|
| </template>
|
| <script>
| import * as echarts from 'echarts';
| import 'echarts-gl';
| import mapData from '@/assets/map/zigong.json';
| import WrapperTitle from '../wrapper-title/index';
|
| 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: {
| WrapperTitle
| },
| 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%;
| flex: 1;
| margin-bottom: 20px;
| display: flex;
| flex-direction: column;
|
| .map-content {
| flex: 1;
| background: rgba(67, 102, 155, 0.3);
| border: 1px solid rgba(47, 91, 157, 0.8);
| }
| .map-style {
| width: 100%;
| height: 100%;
| }
| }
| </style>
|
|
