echarts繪制省或市級地圖

很多項目的可視化用到了echarts的地圖，記錄一下

• 繪制地圖之前需要確認自己的地圖要分幾層，分別實現什么功能
• 本次實現的是兩層地圖效果，一層展示基礎地圖，一層在地圖上添加標記點
• 可拖動，可縮放

實現步驟

1. 安裝echarts到項目
2. 從datav選擇對應的省數據，左下角geojson下載，本次選擇西寧市
3. 創建第二層標記數據文件data-level.json
4. 繪制地圖

創建文件data-level.json方便之后引用

本文件name表示標記點提示文字，local表示經緯度在地圖上進行標記

[
  {
    "name": "大通",
    "local": [101.702628,36.935435]
  },
  {
    "name": "湟中",
    "local": [101.584976,36.498543]
  },
  {
    "name": "湟源",
    "local": [101.257563,36.689975]
  },
  {
    "name": "城北",
    "local": [101.772122,36.656525]
  },
  {
    "name": "城西",
    "local": [101.70249,36.634612]
  },
  {
    "name": "城中",
    "local": [101.749737,36.538819]
  },
  {
    "name": "城東",
    "local": [101.829284,36.555646]
  }
]

寫代碼之前在main.js中添加

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

HTML

<div id="map_chart" style="width: 100%;height: 800px;background: #000;"></div>

javascript

        // 繪制地圖
        mounted() {
            this.drawMapLine()
        },
        methods:{
            drawMapLine(){
                let geoCoordMap = require('./../assets/data-level.json')

                const convertData = function (data) {
                    const res = []
                    if (data[0]) {
                        for (let i = 0; i < data.length; i++) {
                            let geoCoord = data[i].name
                            if (geoCoord) {
                                res.push({
                                    name: data[i].name,
                                    value: data[i].local.concat(data[i].code)
                                })
                            }
                        }
                    }
                    return res
                }
                let echarts = require('echarts/lib/echarts')
                //  地圖開始
                let Chart3 = echarts.init(document.getElementById('map_chart'))
                const mapData = require('./../assets/xining.json')
                const name = '西寧'
                this.$echarts.registerMap(name, mapData)
                Chart3.setOption({
                    geo: {
                        zoom: 1.1,
                        map: name,
                        aspectScale: 0.75,
                        roam: true,
                        label: {
                            show: true,
                            color: 'rgba(138,146,246,0.58)',
                            fontSize: 14
                        },
                        scaleLimit: {
                            min: 1,
                            max: 8
                        },
                        emphasis: {
                            label: {
                                color: '#fff',
                                show: true
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderColor: 'rgba(0,0,0,0.18)',
                                borderWidth: 1,
                                areaColor: '#333354',
                                shadowColor: 'rgba(0,0,0,0.13)',
                                shadowOffsetX: 0,
                                shadowOffsetY: 25,
                                label: {
                                    show: true,
                                    fontWeight: 'bold',
                                    opacity: 0.54,
                                    color: 'rgba(138,146,246,0.58)',
                                    letterSpacing: '12.3px',
                                    textAlign: 'right'
                                }
                            },
                            emphasis: {
                                areaColor: '#353555',
                                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [
                                        { offset: 0, color: '#f78879' },
                                        { offset: 0.5, color: '#6af651' },
                                        { offset: 1, color: '#51b3f6' }
                                    ]),
                                borderWidth: 2,
                                label: {
                                    color: '#fff',
                                    show: false
                                }
                            }
                        }
                    },
                    tooltip: {
                        formatter: function (e) {
                            // return e.data.displayname;
                            return e.name
                        }
                    },
                    series: [
                        {
                            type: 'scatter',
                            showEffectOn: 'render',
                            zoom: 1.1,
                            symbol: 'pin',
                            coordinateSystem: 'geo',
                            data: convertData(geoCoordMap),
                            symbolSize: 50,
                            hoverAnimation: true,
                            rippleEffect: {
                                period: 15,
                                scale: 4,
                                brushType: 'fill'
                            }
                        }
                    ]
                })
            }
        }

實現效果