携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第28天，点击查看活动详情

最近在做大屏，总结一下项目中遇到的一些技术。在大屏中实现地图，点击地图的省份，做一些操作，我们一起看看吧~

geo说明

地理坐标系组件

属性名	描述
map	使用 registerMap 注册的地图名称。（使用中国地图是china）
roam	是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
selectedMode	选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'表示单选，或者'multiple'表示多选。
label	图形上的文本标签，可用于说明图形的一些数据信息
itemStyle	地图区域的多边形图形样式
emphasis	高亮状态下的多边形和标签样式。
select	选中状态下的多边形和标签样式
regions	在地图中对特定的区域配置样式

实例代码

// 地图
initMapChart() {
    let mapChart = echarts.init(this.$refs.mapChart);
    let option = {
        geo: {
            map: "china",
            selectedMode: 'single',
            aspectScale: 0.8,
            layoutCenter: ["50%", "50%"],
            layoutSize: "120%",
            itemStyle: {
                areaColor: {
                    type: "linear-gradient",
                    x: 0,
                    y: 1200,
                    x2: 1000,
                    y2: 0,
                    colorStops: [
                        {
                            offset: 0,
                            color: "#0E1C35", // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: "#BB9FFF", // 50% 处的颜色
                        },
                    ],
                    global: true, // 缺省为 false
                },
                shadowColor: "#BB9FFF",
                shadowOffsetX: 0,
                shadowOffsetY: 20,
                opacity: 0.5,
                emphasis: {
                    areaColor: "#9DF5FF",
                },
            },
            regions: [
                {
                    name: "南海诸岛",
                    itemStyle: {
                        areaColor: "rgba(0, 10, 52, 1)",
                        borderColor: "rgba(0, 10, 52, 1)",
                        normal: {
                            opacity: 0,
                            label: {
                                show: false,
                                color: "#009cc9",
                            },
                        },
                    },
                    label: {
                        show: false,
                        color: "#FFFFFF",
                        fontSize: 12,
                    },
                },
            ],
        },
        series: [
            {
                type: "map",
                mapType: "china",
                selectedMode: "single",
                select: {
                    label: {
                        color: '#fff',
                    },
                    itemStyle: {
                        areaColor: '#9DF5FF',
                    }
                },
                aspectScale: 0.8,
                layoutCenter: ["50%", "50%"], // 地图位置
                layoutSize: "130%",
                zoom: 1, // 当前视角的缩放比例
                // roam: true, // 是否开启平游或缩放
                scaleLimit: {
                    // 滚轮缩放的极限控制
                    min: 1,
                    max: 2,
                },
                label: {
                    show: false,// 省份
                    color: "#FFFFFF",
                    fontSize: 14,
                    emphasis: {
                        show: true
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: "#0E1C35",// 每个块颜色
                        borderColor: "#5B8DAA",
                        borderWidth: 1.8,
                    },
                    emphasis: {// 高亮下颜色
                        areaColor: "#9DF5FF",// 鼠标悬浮颜色
                        label: {
                            show: false,
                            color: "#fff",
                        },
                    },
                },
                data: [{name:'江苏', selected: true}]
            },
        ],
    }
    mapChart.setOption(option);
    let that = this;
    mapChart.on("click", function (res) {
        let text = res.data.name;
        that.searchForm.proName = text;
        that.searchForm.province = that.getProvince(text);
        that.page.pageNum = 1;
        that.getTableData();
    });
    window.addEventListener("resize", () => {
        mapChart.resize();
    });
},

热力图

visualMap: [
    {
        min: 0,
        max: 500,
        seriesIndex: 0,
        show: true,
        inRange: {
            color: ["#00ffc6", "#0bd8bd", "#17b2b3","#228baa","#1f3173"],
        },
        calculable: false,// 图例是否显示数值
        textStyle: {
            color: "#fff", // legend图标颜色
            size: 20,
        },
        formatter: function (value) {
            return value.toFixed(1); // 左下角图例滑过时显示空值
        },
    },
],

在serices的data中配置数据

去掉南海诸岛

geo: {
  map: "china",
  regions: [
    {
      name: "南海诸岛",
      value: 0,
      itemStyle: {
        normal: {
          opacity: 0,
          label: {
            show: false
          }
        }
      }
    }
  ]
}

同时，需要将serices的geoIndex设置为0，才有效果。当设定了 geoIndex 后，series-map.map属性，以及 series-map.itemStyle等样式配置不再起作用，而是采用geo中的相应属性。