vue echarts 地图

本文以echarts官方文档的例子来介绍vue中使用echarts地图
echarts官方文档
https://www.echartsjs.com/zh/index.html

1.安装echarts插件
运行命令安装插件

npm install echarts --save

2.新建vue文件，引入echars组件及城市地图

import echarts from 'echarts'
import BJ from 'echarts/map/json/province/beijing.json' //echarts map json文件

3.vue文件

<template>
    <div id="mapContainer" style="width:100%; height:100%"></div>
</template>
<script>
    import echarts from 'echarts'
    import BJ from 'echarts/map/json/province/beijing.json'
    export default {
        name:'mapContainer',
        data() {
            return {
                chart: null
            }
        },
        mounted() {
            this.initCharts()
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }

            this.chart.dispose()
            this.chart = null
        },
        methods:{
            initCharts() {
                let charMap = document.getElementById('mapContainer')
                // 注册可用的地图  
                echarts.registerMap('beijing', BJ);
                this.chart = echarts.init(charMap)
                this.setOption()
            },
            setOption() {
                const option = {
                    title: {
                        text: '北京区域人口密度 （2011）'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}<br/>{c} (p / km2)'
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            dataView: {readOnly: false},
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    visualMap: {
                        min: 800,
                        max: 50000,
                        text:['High','Low'],
                        realtime: false,
                        calculable: true,
                        inRange: {
                            color: ['lightskyblue','yellow', 'orangered']
                        }
                    },
                    series: [
                        {
                            name: '北京人口密度',
                            type: 'map',
                            roam:true, //鼠标滚动缩放
                            mapType: 'beijing', //  echarts.registerMap('beijing', BJ); 与这部分对应
                            itemStyle:{
                                normal:{label:{show:true}},
                                emphasis:{label:{show:true}}
                            },
                            data:[
                                {name: '东城区', value: 20057.34},
                                {name: '西城区', value: 15477.48},
                                {name: '朝阳区', value: 31686.1},
                                {name: '丰台区', value: 6992.6},
                                {name: '石景山区', value: 44045.49},
                                {name: '海淀区', value: 40689.64},
                                {name: '门头沟区', value: 37659.78},
                                {name: '房山区', value: 45180.97},
                                {name: '通州区', value: 55204.26},
                                {name: '顺义区', value: 21900.9},
                                {name: '昌平区', value: 4918.26},
                                {name: '大兴区', value: 5881.84},
                                {name: '怀柔区', value: 4178.01},
                                {name: '平谷区', value: 2227.92},
                                {name: '密云区', value: 2180.98},
                                {name: '延庆区', value: 9172.94}
                            ]
                        }
                    ]
                }
                this.chart.setOption(option)
            }
        }
    }
</script>