效果图

1. template结构

<template>
  <div class="wrap" style="position: relative; width: 100%">
    <div id="map" style="width: 100%; height: 835px;"></div>
  </div>
</template>

2. 引用

bj.json是北京市的json数据，不能暴露echarts官方的Amd规范的js文件，参考这篇

import * as esriLoader from 'esri-loader'
import $ from 'jquery'
import echarts from 'echarts'
import beijing from '../../assets/js/mapchart/bj.json'

3. export default

测试功能，虚拟数据

export default {
  data() {
    return {
      geoCoordMap: {
        东城区: [116.418757, 39.937544],
        西城区: [116.366794, 39.910309],
        朝阳区: [116.486409, 39.991489],
        丰台区: [116.286968, 39.863642],
        石景山区: [116.170445, 39.974601],
        海淀区: [116.280316, 40.039074],
        门头沟区: [115.905381, 40.009183],
        房山区: [115.701157, 39.735535],
        通州区: [116.758603, 39.802486],
        顺义区: [116.753525, 40.128936],
        昌平区: [116.235906, 40.318085],
        大兴区: [116.338033, 39.658908],
        怀柔区: [116.607122, 40.524272],
        平谷区: [117.112335, 40.244783],
        密云区: [116.943352, 40.477362],
        延庆区: [115.985006, 40.465325]
      },
      rawData: [
        // ["东城区",10,20,30],
        // ["西城区",10,20,30],
        ['朝阳区', 0.0544, 2.1299, 6.3964],
        ['丰台区', 0.056, 1.892, 6.434],
        ['石景山区', 0.043, 1.967, 5.842],
        ['海淀区', 0.053, 2.143, 6.543],
        ['门头沟区', 0.034, 1.907, 5.434],
        ['房山区', 0.038, 2.231, 4.34],
        ['通州区', 0.023, 2.201, 4.58],
        ['顺义区', 0.037, 2.231, 5.21],
        ['昌平区', 0.025, 2.542, 4.85],
        ['大兴区', 0.043, 2.145, 3.82],
        ['怀柔区', 0.032, 1.981, 4.74],
        ['平谷区', 0.042, 1.992, 4.30],
        ['密云区', 0.032, 2.090, 3.99],
        ['延庆区', 0.046, 2.313, 3.84]
      ]
    }
  },
  mounted() {
    echarts.registerMap('BJ', beijing)
    esriLoader.setDefaultOptions({ version: '3.31' })
    this.createMap(this)
  },
  methods: {
    createMap: function (that) {
      var myChart = echarts.init(document.getElementById('map'))

      var option = {
        animation: false,
        tooltip: {
          trigger: 'axis'
        },
        geo: {
          map: 'BJ',
          // silent: true,
          roam: true,
          zoom: 1.155, 
          center: [116.366794, 40.400309], 
          label: {
            emphasis: {
              show: false,
              areaColor: '#eee'
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#EECFA1',
              borderColor: '#FFF'
            },
            emphasis: {
              areaColor: '#C1CDC1'
            }
          }
        },
        series: []
      }

      function renderEachCity() {
        option = {
          xAxis: [],
          yAxis: [],
          grid: [],
          series: [],
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'none'
            }
          }
        }

        if (that.rawData !== undefined) {
          that.rawData.forEach(function (dataItem, idx) {
            console.log(idx)
            var geoCoord = that.geoCoordMap[dataItem[0]]
            var coord = myChart.convertToPixel('geo', geoCoord)

            idx += ''

            var inflationData = []
            for (var k = 1; k < 4; k++) {
              inflationData.push(dataItem[k])
            }

            option.xAxis.push({
              id: idx,
              gridId: idx,
              type: 'category',
              name: dataItem[0],
              nameLocation: 'middle',
              nameGap: 3,
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              axisLine: {
                onZero: false,
                lineStyle: {
                  color: '#666'
                }
              },
              // data: xAxisCategory,
              data: ['二阶', '一阶', 'b'],
              z: 100

            })
            option.yAxis.push({
              id: idx,
              gridId: idx,
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLabel: {
                show: false
              },
              axisLine: {
                show: false,
                lineStyle: {
                  color: '#1C70B6'
                }
              },
              z: 100
            })
            option.grid.push({
              id: idx,
              width: 30,
              height: 40,
              left: coord[0] - 15,
              top: coord[1] - 15,
              z: 100
            })
            option.series.push({
              id: idx,
              type: 'bar',
              xAxisId: idx,
              yAxisId: idx,
              barGap: 0,
              barCategoryGap: 0,
              data: inflationData,
              z: 100,
              itemStyle: {
                normal: {
                  color: function (params) {
                    var colorList = ['#F75D5D', '#59ED4F', '#4C91E7']
                    return colorList[params.dataIndex]
                  }
                },
                emphasis: {
                  label: {
                    show: false
                  }
                }
              }
            })
          }, that.rawData)
        } else {
          console.log('error')
        }
        myChart.setOption(option)
      }

      setTimeout(renderEachCity, 0)

      function throttle(fn, delay, debounce) {
        var currCall
        var lastCall = 0
        var lastExec = 0
        var timer = null
        var diff
        var scope
        var args

        delay = delay || 0

        function exec() {
          lastExec = (new Date()).getTime()
          timer = null
          fn.apply(scope, args || [])
        }

        var cb = function () {
          currCall = (new Date()).getTime()
          scope = that
          args = arguments
          diff = currCall - (debounce ? lastCall : lastExec) - delay

          clearTimeout(timer)

          if (debounce) {
            timer = setTimeout(exec, delay)
          } else {
            if (diff >= 0) {
              exec()
            } else {
              timer = setTimeout(exec, -diff)
            }
          }

          lastCall = currCall
        }

        return cb
      }

      var throttledRenderEachCity = throttle(renderEachCity, 0)
      myChart.on('geoRoam', throttledRenderEachCity)
      myChart.setOption(option)
      myChart.on('click', function (e) {
        console.log(e)
        // console.log(params);
        if (e.componentSubType === 'bar') {
          $('.tongJiTu').remove()
          creatWrap()
          var divObj = document.createElement('div')
          $(divObj).addClass('tongJiTu')
          divObj.id = 'zhuzhuang'
          var divX = getMousePos().x
          var divY = getMousePos().y
          $(divObj).css({
            width: 250,
            height: 300,
            border: '1px solid #ccc',
            position: 'absolute',
            top: divY,
            left: divX
          }).appendTo('.wrap')
          zhuZhuangTu(e)
          clearWrap('.zhedang')
        }
      })

      // 获取横纵坐标
      function getMousePos(event) {
        var e = event || window.event
        var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft
        var scrollY = document.documentElement.scrollTop || document.body.scrollTop
        var x = e.pageX || e.clientX + scrollX
        var y = e.pageY || e.clientY + scrollY
        // console.log(x,y)
        return { x: x, y: y }
      }

      // 生成柱状图
      function zhuZhuangTu(e) {
        var index = e.seriesIndex
        var infodata = []
        for (var k = 1; k < 4; k++) {
          infodata.push(that.rawData[index][k])
          console.log(infodata)
        }

        var zhuzhuang = echarts.init(document.getElementById('zhuzhuang'))
        option = {
          backgroundColor: 'rgba(255,255,255,.6)',
          legend: {
            data: ['二阶', '一阶', 'b']
          },
          xAxis: [
            {

              type: 'category',
              data: ['二阶', '一阶', 'b']
            }
          ],
          yAxis: [
            {
              splitLine: {
                show: false
              },
              type: 'value'
            }
          ],
          series: [
            {
              type: 'bar',
              itemStyle: {
                normal: {
                  color: function (params) {
                    var colorList = ['#F75D5D', '#59ED4F', '#4C91E7']
                    return colorList[params.dataIndex]
                  }
                }
              },
              data: infodata
            }
          ]
        }
        zhuzhuang.setOption(option)
      }

      // 生成遮挡层
      function creatWrap() {
        var zheDang = document.createElement('div')
        $(zheDang).addClass('zhedang').css({
          width: '100%',
          height: '100%',
          position: 'absolute',
          top: 0,
          left: 0,
          backgroundColor: 'rgba(0,0,0,.3)'
        }).appendTo('.wrap')
      }

      // 去掉遮挡层
      function clearWrap(id) {
        $(id).click(function (e) {
          // console.log(that);
          this.remove()
          $('.tongJiTu').remove()
          return false
        })
      }
    }
  }
}

文章目录

1. 效果图
2. 1. template结构
3. 2. 引用
4. 3. export default

原文链接: http://enofeng.github.io/2021/07/22/echarts绘制map，添加图表，符合ES6规范/

版权声明: 转载请注明出处.