echarts生成地图(自定义区域色块,自定义图标样式,自定义移入效果)

一、使用echarts生成一个地图,看一下生成效果图

二、使用步骤

1.先准备需要的数据

DataV.GeoAtlas地理小工具系列 可以去这个网站下载需要的json数据,也可在线引入,但是发布到线上有问题,所以我这边是直接把数据下载到本地使用。

把下载好的数据放入到public里面

在api写入一个axios引用本地数据，此处可区分一下在线环境和本地环境

代码如下：

import axios from "axios";

let path;

if (process.env.NODE_ENV === "production") {

    path = `在线前端访问地址/chinaData/510000.json`;

} else {

     path = `/chinaData/510000.json`;

}

export default axios.get(path);

2.准备dom实例，引入数据使用

3.自定义区域颜色块 

给每个区域加上需要的颜色就可以，此处数据是写死的，如果是后端提供就需要拼接一下成这个样式，关键代码块：

itemStyle: { normal: { areaColor: "#2C6AE8" } }, 

 4.自定义鼠标移入显示字段

  tooltip: {

                formatter: function (params) {

                    var dataCon = params.data;

                    let txtCon = `${dataCon.value}`;

                    return txtCon;

                },

            },

5.自定义地图图标

 {

                    type: "scatter",

                    coordinateSystem: "geo",

                    itemStyle: {

                        color: "transparent",

                    },

                    symbol: `image://${imgUrl}`,

                    //针对于多个不同图标使用

                    // symbol: function (params) {

                    //   const mapIcon = seriesData.find((item) => {

                    //     return item.value == params[2]

                    //   })

                    //   return mapIcon.icon

                    // }, // svg图标

                    symbolSize: [15, 21],

                    symbolOffset: [3, -5],

                    z: 999,

                    zoom: 1,

                    roam: true,

                    animationDurationUpdate: 0,

                    data: convertData(seriesData),

                    //自定义鼠标移到图标上显示的东西

                    tooltip: {

                        formatter: function (params) {

                            let txtCon =

                                params.name == "成都市" ||

                                params.name == "绵阳市"

                                    ? "红色预警"

                                    : "哈哈哈";

                            return txtCon;

                        },

                    },

                },

6.地图点击事件，点击某块区域进行跳转

 myChart.on("click", function (args) {

            console.log("地图点击事件");

        });

具体代码，复制即使用

---