echarts 北京热力图以及自定义图标

import '@/beijing.js'

import * as echarts from 'echarts'

各地区js文件 js · master · mirrors / fuhang-lm / echarts · GIT CODEjs文件 Github 镜像仓库 源项目地址 ⬇ ⬇...https://gitcode.net/mirrors/fuhang-lm/echarts/-/tree/master/js

想要更改地图中文字的位置怎么办呢

打开js文件，找到某个地区的cp数组，更改数组中的经纬度即可哦

 let  statisticsList = [

        { name: '怀柔区', value: 84, coord: [116.499999, 40.374272] },

        { name: '密云区', value: 83, coord: [116.993352, 40.377362] },

        { name: '昌平区', value: 84, coord: [116.235906, 40.228085] },

        { name: '顺义区', value: 83, coord: [116.693525, 40.128936] },

        { name: '平谷区', value: 0, coord: [117.112335, 40.204783] },

        { name: '门头沟区', value: 30, coord: [115.75999, 39.987183] },

        { name: '海淀区', value: 12, coord: [116.25999, 40.016074] },

        { name: '石景山区', value: 18, coord: [116.145445, 39.924601] },

        { name: '西城区', value: 0, coord: [116.336794, 39.915309] },

        { name: '东城区', value: 11, coord: [116.460000, 39.887544] },

        { name: '朝阳区', value: 85, coord: [116.539767, 39.987254] },

        { name: '大兴区', value: 79, coord: [116.338033, 39.688908] },

        { name: '房山区', value: 11, coord: [115.809999, 39.685535] },

        { name: '延庆区', value: 0, coord: [116.010000, 40.385325] },

        { name: '通州区', value: 75, coord: [116.768603, 39.752486] },

        { name: '丰台区', value: 82, coord: [116.156968, 39.813642] }

      ], // 此处的coord是为了后面最大值显示自定义图标使用，即自定义图标位置

      // 获取列表数组中的最大值

      let value = Math.max.apply(Math, this.statisticsList.map(item => { return item.value }))

      let maxData = this.statisticsList.filter(item => item.value > 0 && item.value === value)

      // 初始化echarts实例
      var myChart = echarts.init(this.$refs.map)
      let { statisticsList, maxData } = this
      var option = {
		// 提示框
        tooltip: {
          formatter: function(params) {
            var info = '
' + params.name + '

			' + params.value + '
'
            return info
          },
          backgroundColor: '#ff7f50', // 提示标签背景颜色
          textStyle: { color: '#fff' } // 提示标签字体颜色
        },
        // 视觉映射组件 小导航图标
        visualMap: {
          // continuous 类型为连续型  piecewise 分段类型
          type: 'piecewise',
          show: false, // 是否显示 visualMap-continuous 组件 如果设置为 false，不会显示，但是数据映射的功能还存在
          // 指定 visualMapContinuous 组件的允许的最小/大值 min/max 必须用户指定
          //   min,max 形成了视觉映射的定义域
          //   max: 84,
          //   min: 0,
		  //   splitNumber: 5, // 默认分成5段 可以更改
		  // 颜色区间 自定义每一段的范围，以及每一段的文字，以及每一段的样式
		  // 此处设置pieces 则splitNumber无效
          pieces: [
            {
              min: 0,
              max: 28,
              color: '#febf96'
            },
            {
              min: 28,
              max: 56,
              color: '#ff9f8c'
            },
            {
              min: 56,
              max: 84,
              color: '#e8676b'
            },
            {
              min: 84,
              color: '#e94442'
            }
          ],
          // 文本样式
          textStyle: {
            fontSize: 15, // 字体大小
            color: '#fff' // 字体颜色
          },
          // 拖拽时，是否实时更新
          realtime: false,
          // 是否显示拖拽用的手柄
          calculable: true
        },
        series: [
          {
            type: 'map', // 类型
            // 系列名称，用于tooltip的显示，legend 的图例筛选 在 setOption 更新数据和配置项时用于指定对应的系列
            map: '北京',
            mapType: 'province', // 地图类型
            zoom: 2.3, // 地图的缩放比例
            // 是否开启鼠标缩放和平移漫游 默认不开启
            roam: true,
            // scaleLimit: { // 所属组件的z分层，z值小的图形会被z值大的图形覆盖
            //   min: 1.2, // 最小的缩放值
            //   max: 5 // 最大的缩放值
            // },
            // 定位 值: 'top', 'middle', 'bottom' 也可以是具体的值或者百分比
            top: -25,
            left: 115,
            // 地图区域的多边形 图形样式
            itemStyle: {
              normal: {
                label: {
                  show: true, // 是否显示对应地名
                  fontSize: 10,
                  formatter: '{b}\n{c}'
                },
                // 地图区域的颜色 如果设置了visualMap, 这个属性将不起作用
                areaColor: '#7B68EE',
                // 描边线宽 为 0 时无描边
                borderWidth: 1,
                // 图形的描边颜色 支持的颜色格式同 color
                borderColor: '#fff',
                // 描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'
                borderType: 'solid'
              }
            },
            markPoint: { // 数值最大时 添加自定义图片
              symbol: 'image://' + require('../../assets/images/hotList/an-crown.png'), // 自定义图片路径
              symbolSize: [17, 13], // 图片大小
              label: {
                show: false
              },
              data: maxData
            },
            // 地图系列中的数据内容数组，数组项可以为单个数值
            data: statisticsList
          }
        ]
      }
      // 使用制定的配置项和数据显示图表
      myChart.setOption(option)

最后调用下上面的方法就可以出来地图了哦