echart渲染深圳地图

上图：

 上代码：

1.  
   <template>
2.  
   <div class="dashboard-container">
3.  
   <div class="dashboard-text">name: {{ name }}</div>
4.  
   <div class="map-c">
5.  
   <div class="map-title">echarts深圳市地图</div>
6.  
   <el-select v-model="areaCode" size="mini" class="map-selector" placeholder="深圳市" @change="changeAreaCode">
7.  
   <el-option v-for="item in areaCodList" :key="item.code" :label="item.name" :value="item.code" />
8.  
   </el-select>
9.  
   <div id="szMap" />
10.  
    </div>
11.  
    </div>
12.  
    </template>
13.  
     
14.  
    <script>
15.  
    import { mapGetters } from 'vuex'
16.  
    import * as echarts from 'echarts'
17.  
    import 'echarts-liquidfill'
18.  
    import szMapData from './szMapData/440300.js'
19.  
    import dapengMapData from './szMapData/440301.json'
20.  
    import luohuMapData from './szMapData/440303.json'
21.  
    import futianMapData from './szMapData/440304.json'
22.  
    import nanshanMapData from './szMapData/440305.json'
23.  
    import baoanMapData from './szMapData/440306.json'
24.  
    import longgangMapData from './szMapData/440307.json'
25.  
    import yantianMapData from './szMapData/440308.json'
26.  
    import longhuaMapData from './szMapData/440309.json'
27.  
    import pingshanMapData from './szMapData/440310.json'
28.  
    import guangmingMapData from './szMapData/440311.json'
29.  
    import shenshanMapData from './szMapData/440312.json'
30.  
    import lightLoop from '@/assets/images/lightLoop.png'
31.  
     
32.  
    export default {
33.  
    name: 'Dashboard',
34.  
    data: function() {
35.  
    const getData = function(id) {
36.  
    const data = {
37.  
    1: { count: 100 },
38.  
    2: { count: 200 },
39.  
    3: { count: 300 }
40.  
    }
41.  
    return new Promise((resolve, reject) => {
42.  
    setTimeout(() => {
43.  
    resolve(data[id] || [])
44.  
    }, 300)
45.  
    })
46.  
    }
47.  
     
48.  
    return {
49.  
    areaCode: 440300,
50.  
    areaCodList: [ // 深圳各区code
51.  
    { code: 440300, name: '深圳市' },
52.  
    { code: 440301, name: '大鹏新区' },
53.  
    { code: 440303, name: '罗湖区' },
54.  
    { code: 440304, name: '福田区' },
55.  
    { code: 440305, name: '南山区' },
56.  
    { code: 440306, name: '宝安区' },
57.  
    { code: 440307, name: '龙岗区' },
58.  
    { code: 440308, name: '盐田区' },
59.  
    { code: 440309, name: '龙华区' },
60.  
    { code: 440310, name: '坪山区' },
61.  
    { code: 440311, name: '光明区' },
62.  
    { code: 440312, name: '深汕合作区' }
63.  
    ],
64.  
    szMapEChart: null, // 深圳地图
65.  
    szMapOption: { // 地图配置
66.  
    tooltip: {
67.  
    show: true,
68.  
    trigger: 'item',
69.  
    triggerOn: 'click',
70.  
    formatter: function(params, ticket, callback) {
71.  
    getData(params.data.id).then(cData => {
72.  
    callback(ticket, `
73.  
    <div class="map-item-detail">
74.  
    <div class="title">${params.data.name || ''}</div>
75.  
    <div class="text">人数：<span class="val">${cData.count || ''}</span></div>
76.  
    </div>
77.  
    `)
78.  
    })
79.  
    return 'loading...'
80.  
    }
81.  
    },
82.  
    series: [],
83.  
    geo: {
84.  
    map: 'city',
85.  
    layoutCenter: ['50%', '50%'], // 设置后left/right/top/bottom等属性无效
86.  
    layoutSize: '90%',
87.  
    roam: true, // 开启鼠标缩放和漫
88.  
    aspectScale: 1, // 长宽比
89.  
    zoom: 2,
90.  
    label: {
91.  
    normal: { // 静态的时候展示样式
92.  
    show: true, // 是否显示地图省份得名称
93.  
    textStyle: {
94.  
    color: '#fff',
95.  
    fontFamily: 'Arial'
96.  
    }
97.  
    },
98.  
    emphasis: { // 动态展示的样式
99.  
    color: '#fff'
100.  
     }
101.  
     },
102.  
     itemStyle: {
103.  
     normal: {
104.  
     borderColor: '#fff',
105.  
     areaColor: '#2D85E1',
106.  
     textStyle: {
107.  
     color: '#fff'
108.  
     }
109.  
     },
110.  
     emphasis: {
111.  
     areaColor: '#1c2f59',
112.  
     color: '#fff'
113.  
     }
114.  
     }
115.  
     }
116.  
     }
117.  
     }
118.  
     },
119.  
     computed: {
120.  
     ...mapGetters([
121.  
     'name'
122.  
     ])
123.  
     },
124.  
     mounted() {
125.  
     this.renderSzMap()
126.  
     },
127.  
     created() {
128.  
     echarts.registerMap('city', szMapData)
129.  
     },
130.  
     methods: {
131.  
     // 渲染深圳地图
132.  
     renderSzMap() {
133.  
     this.szMapOption.series = this.getSzMapSeries()
134.  
     this.szMapEChart = echarts.init(document.getElementById('szMap'))
135.  
     this.szMapEChart.setOption(this.szMapOption)
136.  
     window.onresize = function() {
137.  
     this.szMapEChart && this.szMapEChart.resize()
138.  
     }
139.  
     },
140.  
     // 地图落点
141.  
     getSzMapSeries() {
142.  
     const seriesList = [
143.  
     {
144.  
     name: 's1',
145.  
     data: [
146.  
     { id: 1, name: 'test1', areaCode: 440304, value: [114.05096, 22.541009] },
147.  
     { id: 2, name: 'test2', areaCode: 440303, value: [114.13166, 22.54836] },
148.  
     { id: 3, name: 'test3', areaCode: 440307, value: [114.24779, 22.71991] }
149.  
     ]
150.  
     }
151.  
     ]
152.  
      
153.  
     return seriesList.map(sData => {
154.  
     return {
155.  
     type: 'scatter',
156.  
     roam: false,
157.  
     zoom: 1,
158.  
     name: sData.name,
159.  
     coordinateSystem: 'geo',
160.  
     data: this.areaCode === 440300 ? sData.data : sData.data.filter(item => this.areaCode === item.areaCode),
161.  
     symbol: (params) => ('image://' lightLoop), // 图标
162.  
     z: 2,
163.  
     symbolSize: [20, 20] // symbols图标大小
164.  
     }
165.  
     })
166.  
     },
167.  
     // 切换区域
168.  
     changeAreaCode() {
169.  
     const areaCodeMapDataKeyBy = {
170.  
     440300: szMapData,
171.  
     440301: dapengMapData,
172.  
     440303: luohuMapData,
173.  
     440304: futianMapData,
174.  
     440305: nanshanMapData,
175.  
     440306: baoanMapData,
176.  
     440307: longgangMapData,
177.  
     440308: yantianMapData,
178.  
     440309: longhuaMapData,
179.  
     440310: pingshanMapData,
180.  
     440311: guangmingMapData,
181.  
     440312: shenshanMapData
182.  
     }
183.  
      
184.  
     echarts.registerMap('city', areaCodeMapDataKeyBy[this.areaCode] || szMapData)
185.  
     this.szMapOption.geo.zoom = areaCodeMapDataKeyBy[this.areaCode] && this.areaCode === 440300 ? 1.8 : 1.2
186.  
     this.szMapOption.series = this.getSzMapSeries()
187.  
     this.szMapEChart.setOption(this.szMapOption, true)
188.  
     }
189.  
     }
190.  
     }
191.  
     </script>
192.  
      
193.  
     <style lang="scss" scoped>
194.  
     .dashboard {
195.  
     &-container {
196.  
     margin: 30px;
197.  
     }
198.  
     &-text {
199.  
     font-size: 30px;
200.  
     line-height: 46px;
201.  
     }
202.  
     }
203.  
     </style>
204.  
      
205.  
     <style lang="scss">
206.  
     .map-c {
207.  
     position: relative;
208.  
     background-color: #EFF9F8;
209.  
      
210.  
     .map-title {
211.  
     text-align: center;
212.  
     padding: 20px;
213.  
     font-size: 22px;
214.  
     font-weight: 500;
215.  
     }
216.  
      
217.  
     .map-selector {
218.  
     position: absolute;
219.  
     z-index: 99;
220.  
     top: 30px;
221.  
     right: 20px;
222.  
     width: 120px;
223.  
      
224.  
     .el-input {
225.  
     width: 120px !important;
226.  
      
227.  
     input {
228.  
     height: 22px;
229.  
     line-height: 22px;
230.  
     }
231.  
     }
232.  
     }
233.  
      
234.  
     #szMap {
235.  
     width: 100%;
236.  
     height: 750px;
237.  
      
238.  
     .map-item-detail {
239.  
     .title {
240.  
     font-size: 16px;
241.  
     color: #333333;
242.  
     font-weight: 500;
243.  
     margin-bottom: 10px;
244.  
     }
245.  
      
246.  
     .text {
247.  
     font-size: 14px;
248.  
     color: #999;
249.  
     margin-bottom: 5px;
250.  
     }
251.  
      
252.  
     .val {
253.  
     font-size: 14px;
254.  
     color: #333;
255.  
     }
256.  
     }
257.  
     }
258.  
     }
259.  
     </style>

git: https://github.com/Promise-W/vue-admin-template (请切换分支到feature-vue-node)

这篇好文章是转载于：学新通技术网