echarts+Vue2 绘制2D地图，添加散点，点击散点

原创已于 2025-04-17 14:42:19 修改 · 692 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2025-03-18 10:27:03 首次发布

举例：显示河北省地图

根据DataV.GeoAtlas地理小工具系列，获取到河北省的地图 .json数据。

例如获取到的河北省 json 地址是https://geo.datav.aliyun.com/areas_v3/bound/130000_full.json，

将其在浏览器打开，在项目中新建一个hebei.json文件，复制全部数据到hebei.json。

然后新建.vue文件，在其中引入即可，具体代码如下：（复制即可直接食用，注意需要全局注册echarts）

<template>
  <div class="container">
    <div ref="myChart" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import hebei from "../../../public/extend/map/json/province/hebei.json";
export default {
  components: {},
  props: {},
  data() {
    return {
      chart: null,
      hebei,
      regions: [],
      tableData: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      let that = this;
      that.$echarts.registerMap("hebei", this.hebei);
      // 散点数据
      var data = [
        {
          name: "河北科技大学",
          areaname: "河北科技大学",
          value: ["114.50963", "37.97686"],
          date: "2025-10-01",
          title: "石家庄",
        },
      ];
      that.tableData = data;
      var option = {
        tooltip: {
          trigger: "item",
        },
        visualMap: {
          show: true,
          min: 0,
          max: 200,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ["#00467F", "#A5CC82"], // 蓝绿
          },
        },
        geo: {
          map: "hebei",
          roam: false,
          zoom: 1.0,
          aspectScale: 1,
          scaleLimit: {
            min: 1,
            max: 2,
          },
          top: 35,
          right: 150,
          left: "auto",
          selectedMode: "single",
          select: {
            disabled: true,
            itemStyle: {
              borderWidth: 2.5,
              areaColor: "rgb(8, 207, 221)",
              shadowColor: "rgba(255, 255, 255, 0.3)",
              shadowBlur: 10,
              shadowOffsetX: 4,
              shadowOffsetY: 4,
            },
            label: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          regions: that.tableData,
          label: {
            show: true, // 是否显示地图上的所有地名
            color: "rgba(255, 255, 255, 0.6)",
            fontWeight: "bold",
            fontSize: 16,
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(147, 235, 248, 1)",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(147, 235, 248, 0)", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(147, 235, 248, .2)", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              shadowColor: "rgba(128, 217, 248, 1)",
              // shadowColor: 'rgba(255, 255, 255, 1)',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
            },
            emphasis: {
              areaColor: "#389BB7",
              borderWidth: 0,
            },
          },
          emphasis: {
            disabled: false,
            focus: "none",
            label: {
              color: "rgba(255, 255, 255, 1)",
              fontWeight: "bold",
              fontSize: 16,
            },
            itemStyle: {
              borderWidth: 2.5,
              borderColor: "#9AD0F7",
              areaColor: "#962029",
              shadowColor: "rgba(255, 255, 255, 0.3)",
              shadowBlur: 10,
              shadowOffsetX: 4,
              shadowOffsetY: 4,
            },
          },
          tooltip: {
            show: true,
            textStyle: {
              color: "#FFF",
            },
            backgroundColor: "#011e49",
            borderColor: "transparent",
            borderWidth: 0,
            textShadowColor: "transparent",
            formatter: function (params) {
              let cityitem = that.tableData.find((item) => {
                return item.areaname === params.name;
              });
              // console.log('data', cityitem);
              if (typeof cityitem === "undefined") return "";
              let returnHtml = `
                <div style="font-size: 20px;font-weight: bold;margin-bottom: 6px;">${cityitem.areaname}</div>
                <div style="font-size: 16px;margin-bottom: 22px;">${cityitem.title}</div>
                <div style="font-size: 18px;margin-bottom: 14px;">${cityitem.value}（个）</div>
              `;
              return returnHtml;
            },
          },
        },
        series: [
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: data,
            symbol: "pin",
            symbolSize: 30,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#33C481",
              },
              emphasis: {
                color: "#f00",
              },
            },
          },
        ],
      };
      if (that.chart === null) {
        that.chart = that.$echarts.init(this.$refs.myChart);
      }
      that.chart.setOption(option);
      that.chart.on("click", (params) => {
        console.log("点击到了");

        if (
          params.componentType === "series" &&
          params.componentSubType === "scatter"
        ) {
          const index = params.dataIndex;
          // 取消所有散点高亮
          that.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0, //第几条series
          });
          // 显示指定data 的tooltip
          // myChart.dispatchAction({
          //     type: 'showTip',
          //     seriesIndex: 0, //第几条series
          //     dataIndex: index, //第几个tooltip
          // });
          // 高亮指定的散点
          that.chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0, //第几条series
            dataIndex: index, //第几个tooltip
          });
        }
      });

      window.addEventListener("resize", function () {
        that.chart.resize();
      });
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
};
</script>
<style scoped>
.container {
  width: 1006px;
  height: 696px;
}
</style>

地图贴图：

图片例子：

代码示例：（复制即可食用）

根据DataV.GeoAtlas地理小工具系列，获取到全国地图 china.json 数据。

代码中的 tuceng.jpeg 是上面的第一张图

<template>
  <div class="container">
    <div ref="myChart" style="width: 100%; height: 100%"></div>
  </div>
</template>
 
<script>
import hebei from "../../public/extend/map/json/province/china.json";
export default {
  components: {},
  props: {},
  data() {
    return {
      chart: null,
      hebei,
      regions: [],
      tableData: [],
      mapBg: require("../assets/tuceng.jpeg"),
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  methods: {
    initChart() {
      let that = this;
      that.$echarts.registerMap("hebei", this.hebei);
      let mapBg = document.createElement("img");
      mapBg.src = this.mapBg;
      // 散点数据
      var data = [
        {
          name: "河北科技大学",
          areaname: "河北科技大学",
          value: ["114.50963", "37.97686"],
          date: "2025-10-01",
          title: "石家庄",
        },
      ];
      that.tableData = data;
      var option = {
        tooltip: {
          trigger: "item",
        },
        visualMap: {
          show: true,
          min: 0,
          max: 200,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ["#00467F", "#A5CC82"], // 蓝绿
          },
        },
        geo: {
          map: "hebei",
          roam: true,
          zoom: 1.0,
          aspectScale: 1,
          scaleLimit: {
            min: 1,
            max: 2,
          },
          selectedMode: "single",
          select: {
            disabled: true,
            itemStyle: {
              borderWidth: 2.5,
              areaColor: "rgb(8, 207, 221)",
              shadowColor: "rgba(255, 255, 255, 0.3)",
              shadowBlur: 10,
              shadowOffsetX: 4,
              shadowOffsetY: 4,
            },
            label: {
              color: "rgba(255, 255, 255, 1)",
            },
          },
          regions: that.tableData,
          label: {
            show: true, // 是否显示地图上的所有地名
            color: "rgba(255, 255, 255, 0.6)",
            fontWeight: "bold",
            fontSize: 16,
          },
          itemStyle: {
            normal: {
              areaColor: {
                image: mapBg, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                repeat: "repeat", // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
              }
            },
            emphasis: {
              areaColor: {
                // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串
                image: mapBg,
                // 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat'
                repeat: "repeat"
              },
            },
          },
          emphasis: {
            disabled: false,
            focus: "none",
            label: {
              color: "rgba(255, 255, 255, 1)",
              fontWeight: "bold",
              fontSize: 16,
            },
            itemStyle: {
              borderWidth: 2.5,
              borderColor: "#9AD0F7",
              areaColor: "#962029",
              shadowColor: "rgba(255, 255, 255, 0.3)",
              shadowBlur: 10,
              shadowOffsetX: 4,
              shadowOffsetY: 4,
            },
          },
          tooltip: {
            show: true,
            textStyle: {
              color: "#FFF",
            },
            backgroundColor: "#011e49",
            borderColor: "transparent",
            borderWidth: 0,
            textShadowColor: "transparent",
            formatter: function (params) {
              let cityitem = that.tableData.find((item) => {
                return item.areaname === params.name;
              });
              // console.log('data', cityitem);
              if (typeof cityitem === "undefined") return "";
              let returnHtml = `
                <div style="font-size: 20px;font-weight: bold;margin-bottom: 6px;">${cityitem.areaname}</div>
                <div style="font-size: 16px;margin-bottom: 22px;">${cityitem.title}</div>
                <div style="font-size: 18px;margin-bottom: 14px;">${cityitem.value}（个）</div>
              `;
              return returnHtml;
            },
          },
        },
        series: [
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: data,
            symbol: "pin",
            symbolSize: 30,
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#33C481",
              },
              emphasis: {
                color: "#f00",
              },
            },
          },
        ],
      };
      if (that.chart === null) {
        that.chart = that.$echarts.init(this.$refs.myChart);
      }
      that.chart.setOption(option);
      that.chart.on("click", (params) => {
        console.log("点击到了");

        if (
          params.componentType === "series" &&
          params.componentSubType === "scatter"
        ) {
          const index = params.dataIndex;
          // 取消所有散点高亮
          that.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0, //第几条series
          });
          // 显示指定data 的tooltip
          // myChart.dispatchAction({
          //     type: 'showTip',
          //     seriesIndex: 0, //第几条series
          //     dataIndex: index, //第几个tooltip
          // });
          // 高亮指定的散点
          that.chart.dispatchAction({
            type: "highlight",
            seriesIndex: 0, //第几条series
            dataIndex: index, //第几个tooltip
          });
        }
      });

      window.addEventListener("resize", function () {
        that.chart.resize();
      });
    },
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
    }
  },
};
</script>
<style scoped>
.container {
  width: 900px;
  height: 630px;
}
</style>