使用vue echarts 制作地图map

第一步：下载相关地区的json文件，并将下载的文件放到项目文件夹下（下载地址：） 该篇以显示四川省地区为例 第二步：在vue中引入echarts 1、通过 npm 获取 echarts，npm install echarts --save 2、在main.js文件中引入

import * as echarts from echarts;
Vue.prototype.$echarts = echarts;

第三步：使用map

<template>
	<!--  绘制地图的容器,注意:必须得设置宽高,不然地图不显示  -->
    <div class="map" ref="map" style="width:400px;height:300px;"></div> 
</template>

<script>
    import sichuan from ../assets/510000_full.json; //引入下载的地区json文件
    export default {
          
   
        name: "Test",
        mounted() {
          
   
            this.createMap();
        },
       methods:{
          
   
            createMap(){
          
   
                let　mapChart = this.$echarts.init(this.$refs.map);
                this.$echarts.registerMap(SC, sichuan);     //注册地图
                let mapOption = {
          
   
                    tooltip: {
          
   
                        trigger: item,
                        formatter: {b}<br/>警量：{c}
                    },
                    toolbox: {
          
   
                        show: true,
                        orient: vertical,
                        left: right,
                        top: center,
                        feature: {
          
   
                            dataView: {
          
   readOnly: false},
                            restore: {
          
   },
                            saveAsImage: {
          
   }
                        }
                    },
                    geo: [
                        {
          
   
                            map: SC,   //注：名字必须与注册的名字保持一致
                            aspectScale: 1,   //设置1:1的显示比例
                            label: {
          
   
                                show: false
                            },
                            select:{
          
             //设置选中样式
                                itemStyle:{
          
   
                                    areaColor:"white" //自定义选中区域颜色
                                }
                            },
                            emphasis: {
          
   
                                label: {
          
   
                                    show: true
                                },
                                itemStyle:{
          
   
                                    areaColor:"white"  //自定义hover区域颜色
                                }
                            },
                        }
                    ],
                    visualMap: {
          
   
                        min: 30,
                        max: 60,
                        text: [High, Low],
                        realtime: false,
                        calculable: true,
                        inRange: {
          
   
                            inRange: {
          
   
                                color: [lightskyblue, yellow, orangered]
                            }
                        }
                    },
                    series: [
                        {
          
   
                            name: SC,
                            type: map,
                            geoIndex: 0,
                            map: SC,
                            // 文本位置修正
                            textFixed: {
          
   
                                Alaska: [20, -20]
                            },
                            data:[{
          
   name: "成都市", value: 34},
                                {
          
   name: "自贡市", value: 35}]
                        }
                    ]
                };
                mapChart.setOption(mapOption);
                window.onresize = ()=> {
          
   
                    mapChart.resize();
                };
            }

        }
    }
</script>

注：引入的json文件中的地市名要与series中data的地市名一一对应。不然无法显示对应地区的数据

效果预览：