vue-cli使用echarts系列之地圖type: map

主要是對配置的一些說明,項目githup地址 https://github.com/shengbid/echarts-series

 

這個地圖做了3個層級,第一層: 中國地圖; 第二層: 省級地圖,點擊第一層進入; 第三層: 市級地圖, 點擊第二層進入

點擊空白處可以回到上一層

效果圖:

      第一層                                                                                                                                                                                                      第二層

第三層

實現步驟,文末會有完整代碼,可以根據步驟來實現,會更清晰

 

1.下載所需要的地圖文件,需要符合echarts的數據規則.我是到這個網址下載的地圖文件: http://datav.aliyun.com/tools/atlas/#&lat=30.316551722910077&lng=106.68898666525287&zoom=3.5

下載下來的json文件改一下文件名,默認是中文的

2.在項目中引入

import chinaJson from '@/utils/map/china.json' // json數據引入

import qinghai from '@/utils/map/qinghai.json'

import neimenggu from '@/utils/map/neimenggu.json'

import xilinguole from '@/utils/map/xilinguole.json'

3.在項目中提供一個展示DOM元素, 配置好echarts的基礎option,注冊地圖

<template>
  <div class="line-container">
    <div>
      <div id="mapChart"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mapChart',
  data() {
    return {
      option: {
         title: { 
          text: '中國地圖',
          subtext: '鼠標縮放比例大於2.5展示名稱'
         },
        tooltip: {
          trigger: 'item'
        },
      },
      mapChart: '', // 地圖實例
      level: 1 // 當前層級
    }
  },
  created() {},
  mounted() {
    this.getMapChart()
  },

   methods: {
    // 初始化圖表
    getMapChart() {
      this.mapChart = this.$echart.init(document.getElementById('mapChart'))

      this.$echart.registerMap('china', chinaJson)

      this.option.series = [{
                type: 'map',
                map: 'china',
                zoom: 1.2,
                roam: true
            }]
      this.mapChart.setOption(this.option)
    }
  }
}

</script>

4.上一步做完就能在頁面上看到一個中國地圖了,echarts默認如果你注冊的地圖名稱是china,會展示右下角南海諸島,如果不想展示,可以換一個名稱

5.現在加入點擊事件,直接加在第三步的getMapChart方法里

getMapChart() {
  .
  .
  .
  this.mapChart.setOption(this.option)

  // 省級地圖
  const provinceName = {
    '青海省': qinghai, // 自己建立的地圖數據映射
    '內蒙古自治區': neimenggu
  }
  // 市級地圖
  const cityName = {
    '錫林郭勒盟': xilinguole
  }
  // 地圖數據
  const map = {
    2: [{
          type: 'map',
          map: 'province', // 省級
          label: {
            show: true
          },
          itemStyle: {
              areaColor: '#f1b290',
          },
          zoom: 1,
          roam: true
      }],
    3: [{
          type: 'map',
          map: 'city', // 市級
          label: {
            show: true
          },
          zoom: 1,
          roam: true,
      }
    ]
  }

  // 點擊地圖
  this.mapChart.on('click', (params) => {
    console.log(params)
    let mapData = qinghai
    if (this.level === 1) { // 省級地圖
      if (provinceName[params.name]) {
        mapData = provinceName[params.name]
      }
      this.level = 2
      this.$echart.registerMap('province', mapData)
    } else if (this.level === 2) { // 市級地圖
      mapData = cityName['錫林郭勒盟']
      this.level = 3
      this.$echart.registerMap('city', mapData)
    }
    this.option.series = map[this.level] // 重置地圖數據
    this.mapChart.setOption(this.option)
  })

}

6.上一步做完就能實現點擊地圖跳轉到下一級功能了,現在在加上點擊空白處跳轉上一級的功能

echarts沒有單獨的點擊空白處的事件,但是提供了getZr()方法,點擊圖表所有地方都可以觸發事件,返回event,可以通過判斷event.target來判斷點擊的是否是空白處

// 點擊所有地方觸發
  this.mapChart.getZr().on('click', (event) => {
    // 該監聽器正在監聽一個`zrender 事件`。
    // console.log(event.target, this.level)
    // 點擊空白處回到上一級
    if (!event.target && this.level !== 1) {
      if (this.level === 2) { // 如果當前是在第二級,返回第一級
        this.option.series = [{
            type: 'map',
            map: 'china',
            label: {
              show: false
            },
            zoom: 1.2,
            roam: true
        }]
        this.level = 1
      } else if (this.level === 3) { // 如果當前是在第三級,返回第二級
        this.option.series = map[2]
        this.level = 2
      }

      this.mapChart.setOption(this.option)
    }
  })

7.以上配置就可以實現一個地圖的層級跳轉了,默認的地圖數據只有name值,如果你還需要展示其他額外數據可以設置data數據,但是要和地圖里的name對應上

const visualData = [ // 錫林郭勒盟映射數據,可以自己增加額外屬性
    {name: '東烏珠穆沁旗', value: 100, level: 3},
    {name: '西烏珠穆沁旗', value: 500, level: 3},
    {name: '錫林浩特市', value: 1100, level: 3},
    {name: '阿巴嘎旗', value: 3300, level: 3},
    {name: '正藍旗', value: 900},
    {name: '多倫縣', value: 350},
    {name: '正鑲白旗', value: 2100},
    {name: '太仆寺旗', value: 1900},
    {name: '蘇尼特左旗', value: 4500},
    {name: '蘇尼特右旗', value: 2800},
    {name: '二連浩特市', value: 3560},
    {name: '鑲黃旗', value: 789},
  ]

  const map = {
    2: [{
          type: 'map',
          map: 'province',
          label: {
            show: true
          },
          itemStyle: {
              areaColor: '#f1b290',
          },
          zoom: 1,
          roam: true
      }],
    3: [{
          type: 'map',
          map: 'city',
          name: '降雨量',
          label: {
            show: true
          },
          zoom: 1,
          roam: true,
          data: visualData // 設置數據
      }
    ]
  }

8.地圖的區域顏色默認是灰色,你可以設置itemStyle改變顏色和邊框,但是這個改變是整個地圖一起改變.如果希望根據某個值,如value值大小進行顏色區分,可以添加visualMap,視覺映射

data() {
    return {
      option: {
         title: { 
          text: '中國地圖',
          subtext: '鼠標縮放比例大於2.5展示名稱'
         },
        tooltip: {
          trigger: 'item'
        },
        visualMap: { // 設置視覺映射
            min: 100,
            max: 5000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
        },
      },
      mapChart: '',
      level: 1
    }
  },

9.最后說一下,我的地圖用的是series的type:'map',不是geo屬性

  這兩個的區別: 

  geo是地理坐標系組件,可以理解為背景圖

  type:'map',地圖, 主要用於地理區域數據的可視化

  也就是如果你要展示的某個地區的數據可以用type:'map',因為你可以設置data來展示你需要展示的數據;如果你要做的是類似散點圖,比如GDP全國前十,你要展示的是前十這幾個數據,但是需要全國地圖做背景就用geo

  完整代碼:

<template>
  <div class="line-container">
    <p>點擊省份可以跳轉到省級地圖(省級數據只有青海和內蒙古,點擊其他省份展示重復數據)</p>
    <p>點擊市可以跳轉到市級地圖(市數據只有錫林郭勒)市數據有顏色塊區分</p>
    <p>點擊地圖空白處回到上一級地圖</p>
    <div>
      <div id="mapChart"></div>
    </div>
  </div>
</template>

<script>
import chinaJson from '@/utils/map/china.json' // json數據引入
import qinghai from '@/utils/map/qinghai.json'
import neimenggu from '@/utils/map/neimenggu.json'
import xilinguole from '@/utils/map/xilinguole.json'

export default {
  name: 'mapChart',
  data() {
    return {
      option: {
         title: { 
          text: '中國地圖',
          subtext: '鼠標縮放比例大於2.5展示名稱'
         },
        tooltip: {
          trigger: 'item'
        },
        visualMap: {
            min: 100,
            max: 5000,
            text: ['High', 'Low'],
            realtime: false,
            calculable: true,
            inRange: {
                color: ['lightskyblue', 'yellow', 'orangered']
            }
        },
      },
      mapChart: '',
      level: 1
    }
  },
  created() {},
  mounted() {
    this.getMapChart()
  },
  methods: {
    // echarts初始化
    getMapChart() {
      this.mapChart = this.$echart.init(document.getElementById('mapChart'))

      this.$echart.registerMap('china', chinaJson);

      this.option.series = [{
                type: 'map',
                map: 'china',
                zoom: 1.2,
                roam: true
            }]
      this.mapChart.setOption(this.option)

      // 監聽地圖縮放事件
      this.mapChart.on('georoam', (params) => {
        // console.log(params)
        const moption = this.mapChart.getOption()
        console.log(moption)
        if (params.zoom) { // 縮放事件
          const zoom = moption.series[0].zoom
          this.option.series[0].zoom = zoom
          if (zoom > 2.5) {
            this.option.series[0].label = {
              show: true
            }
            this.mapChart.setOption(this.option)
          } else {
             this.option.series[0].label = {
              show: false
            }
            this.mapChart.setOption(this.option)
          }
        }
      })
      // geo設置可用
      // this.mapChart.on('geoselectchanged', (params) => {
      //   console.log(params)
      // })

      // 省級地圖
      const provinceName = {
        '青海省': qinghai,
        '內蒙古自治區': neimenggu
      }
      // 市級地圖
      const cityName = {
        '錫林郭勒盟': xilinguole
      }

      // 獲取地圖數據
      const map = this.getMap()
     
      // 點擊地圖省份
      this.mapChart.on('click', (params) => {
        console.log(params)
        let mapData = qinghai
        if (this.level === 1) {
          if (provinceName[params.name]) {
            mapData = provinceName[params.name]
          }
          this.level = 2
          this.$echart.registerMap('province', mapData)
        } else if (this.level === 2) {
          mapData = cityName['錫林郭勒盟']
          this.level = 3
          this.$echart.registerMap('city', mapData)
        }
        this.option.series = map[this.level]
        this.mapChart.setOption(this.option)
      })
      // 點擊所有地方觸發
      this.mapChart.getZr().on('click', (event) => {
          // 該監聽器正在監聽一個`zrender 事件`。
          // console.log(event.target, this.level)
          // 點擊空白處回到上一級
          if (!event.target && this.level !== 1) {
            if (this.level === 2) {
              this.option.series = [{
                  type: 'map',
                  map: 'china',
                  label: {
                    show: false
                  },
                  zoom: 1.2,
                  roam: true
              }]
              this.level = 1
            } else if (this.level === 3) {
              this.option.series = map[2]
              this.level = 2
            }

            this.mapChart.setOption(this.option)
          }
      });
    },

    // 獲取地圖數據
    getMap () {
      const visualData = [ // 錫林郭勒盟映射數據,可以自己增加額外屬性
        {name: '東烏珠穆沁旗', value: 100, level: 3},
        {name: '西烏珠穆沁旗', value: 500, level: 3},
        {name: '錫林浩特市', value: 1100, level: 3},
        {name: '阿巴嘎旗', value: 3300, level: 3},
        {name: '正藍旗', value: 900},
        {name: '多倫縣', value: 350},
        {name: '正鑲白旗', value: 2100},
        {name: '太仆寺旗', value: 1900},
        {name: '蘇尼特左旗', value: 4500},
        {name: '蘇尼特右旗', value: 2800},
        {name: '二連浩特市', value: 3560},
        {name: '鑲黃旗', value: 789},
      ]
      const map = {
        2: [{
              type: 'map',
              map: 'province',
              label: {
                show: true
              },
              itemStyle: {
                  areaColor: '#f1b290',
              },
              zoom: 1,
              roam: true
          }],
        3: [{
              type: 'map',
              map: 'city',
              name: '降雨量',
              label: {
                show: true
              },
              zoom: 1,
              roam: true,
              data: visualData // 設置視覺映射數據
          }
        ]
      }
      return map
    }
  }
}
</script>

<style>
#mapChart {
  width: 800px;
  height: 500px;
}
</style>

 

echarts系列文章:

  vue-cli項目使用echarts系列https://www.cnblogs.com/steamed-twisted-roll/p/14376368.html

  vue-cli使用echarts系列之K線圖Candlestickhttps://www.cnblogs.com/steamed-twisted-roll/p/14368766.html

  vue-cli使用echarts系列之漣漪效果地圖effectScatterhttps://www.cnblogs.com/steamed-twisted-roll/p/14379169.html