当先锋百科网

首页 1 2 3 4 5 6 7

echarts区域热力地图

1.下载所需要的地理区域的JSON文件，推荐阿里云的那个网址
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5

在这里插入图片描述

2.引入JSON文件注册地图

在这里插入图片描述

在这里插入图片描述

3.setOption()

    this.myChart.setOption({
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c}",
        },
        geo: {
          // 公共样式
          map: "china",
          label: {
            normal: {
              show: false, // 显示省份标签
              textStyle: {
                color: "#fff",
              }, // 省份标签字体颜色
            },
          },
          itemStyle: {
            normal: {
              label: {
                show: true,
              },
              borderWidth: 0.5, // 区域边框宽度
              borderColor: "#A4A4A4", // 区域边框颜色
              areaColor: "#fff", // 区域颜色
            },
          },
          emphasis: {
            label: {
              show: true,
            },
            areaColor: "#F6C9AB", // 区域颜色
          },
          roam: false,
          zoom: 1.2, // 设置地图默认大小
        },
        visualMap: [
          {
            // 地图组件映射
            show: true,
            seriesIndex: 0, // 指定系列数据
            min: 0,//最小值
            max: that.max,//最大值
            text: ["最多", "最少"],
            color: MapColor,//热力图渐变颜色，数组形式
            textStyle: {
              color: "#fff",
            },
            left: 100,
          },
        ],
        //backgroundColor: "#fff",//背景色
        series: [
          {
            type: "map", // 地图类型
            mapType: "china",
            roam: true,
            geoIndex: 0,
            aspectScale: 0.75,
            data: that.listData, // 各省地图数据
          },
        ],
      });

4.最后效果
在这里插入图片描述