ECharts地图

效果

地图的实现步骤：

1. 准备json地图数据
   • 可从阿里云数据可视平台获取（没有镇街数据）阿里云数据可视平台
   • 我在bigemap导出KML文件，然后再通过http://geojson.io/转换为json数据（地图数据可能不是最新）
     
     

2. 引入ECharts
   • 通过命令安装ECharts
     • npm install echarts@5.2.1 --save
   • 在main.js文件中引入
     • import * as echarts from 'echarts'
     • Vue.prototype.$echarts = echarts'
3. 示例代码
   • DOM容器
   • eacharts注册刚刚准备的地图数据
   • 通过 echarts.init 方法初始化一个 echarts 实例
   • 指定配置项和数据（option）具体配置项直接查看官方配置项文档
   • 将配置项设置给echarts实例对象

   <template>
     <div id="main" style="width: 700px;height: 700px;"></div>
   </template>
   

   <script>
   import jsonData from '地图.json'
   export default {
     name: 'map',
     data () {
       return {
         regions: [
           {
             name: '岐岭镇', year: 2021, xms: 523
           },
           {
             name: '华城镇', year: 2021, xms: 523
           },
           {
             name: '潭下镇', year: 2021, xms: 523
           },
           {
             name: '转水镇', year: 2021, xms: 523
           },
           {
             name: '长布镇', year: 2021, xms: 523
           },
           {
             name: '周江镇', year: 2021, xms: 523
           },
           {
             name: '横陂镇', year: 2021, xms: 523
           },
           {
             name: '水寨镇', year: 2021, xms: 523
           },
           {
             name: '华阳镇', year: 2021, xms: 523
           },
           {
             name: '安流镇', year: 2021, xms: 523
           },
           {
             name: '河东镇', year: 2021, xms: 523
           },
           {
             name: '龙村镇', year: 2021, xms: 523
           },
           {
             name: '梅林镇', year: 2021, xms: 523
           },
           {
             name: '棉洋镇', year: 2021, xms: 523
           }
         ],
         myCharts: null
       }
     },
     created () {
   
     },
     mounted () {
       this.chartInit()
     },
     methods: {
       chartInit () {
         let that = this
         that.$echarts.registerMap('wuhua', jsonData)
         var option = {
           tooltip: {
             trigger: 'item'
           },
           geo: {
             map: 'wuhua',
             roam: true,
             zoom: 1.1,
             aspectScale: 1,
             scaleLimit: {
               min: 1,
               max: 2
             },
             top: 35,
             right: 150,
             left: 'auto',
             selectedMode: 'single',
             select: {
               disabled: true,
               itemStyle: {
                 borderWidth: 2.5,
                 areaColor: '#962029',
                 shadowColor: 'rgba(255, 255, 255, 0.3)',
                 shadowBlur: 10,
                 shadowOffsetX: 4,
                 shadowOffsetY: 4
               },
               label: {
                 color: 'rgba(255, 255, 255, 0.6)'
               }
             },
             regions: that.regions,
             label: {
               show: false,
               color: 'rgba(255, 255, 255, 0.6)',
               fontWeight: 'bold',
               fontSize: 16
             },
             itemStyle: {
               borderWidth: 2.5, // 区域边框宽度
               borderColor: '#9AD0F7', // 区域边框颜色
               areaColor: 'rgba(29,94,184,.9)' // 区域颜色
             },
             emphasis: {
               disabled: false,
               focus: 'none',
               label: {
                 color: 'rgba(255, 255, 255, 0.6)',
                 fontWeight: 'bold',
                 fontSize: 16
               },
               itemStyle: {
                 borderWidth: 2.5,
                 borderColor: '#9AD0F7',
                 areaColor: '#962029',
                 shadowColor: 'rgba(255, 255, 255, 0.3)',
                 shadowBlur: 10,
                 shadowOffsetX: 4,
                 shadowOffsetY: 4
               }
             },
             tooltip: {
               show: true,
               textStyle: {
                 color: '#FFF'
               },
               backgroundColor: '#011e49',
               borderColor: 'transparent',
               borderWidth: 0,
               textShadowColor: 'transparent',
               formatter: function (params) {
                 let cityitem = that.regions.find((item) => {
                   return item.name === params.name
                 })
                 if (typeof (cityitem) === 'undefined') return ''
                 let returnHtml = `
                   <div style="font-size: 20px;font-weight: bold;margin-bottom: 6px;">${cityitem.name}</div>
                   <div style="font-size: 16px;margin-bottom: 22px;">${cityitem.year}年度</div>
                   <div style="font-size: 18px;margin-bottom: 14px;">项目数&nbsp;&nbsp;${cityitem.xms}（个）</div>
                 `
                 return returnHtml
               }
             }
           }
         }
         if (that.myCharts === null) {
           that.myCharts = that.$echarts.init(document.getElementById('main'))
         }
         that.myCharts.setOption(option)
   
         window.addEventListener('resize', function () {
           that.myCharts.resize()
         })
       }
     }
   }
   </script>