在echarts中使用geojson地图

最新推荐文章于 2025-10-25 16:57:57 发布

原创

最新推荐文章于 2025-10-25 16:57:57 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

以中国地图为例

先看效果

代码实现：

<div id="refChinaMap" :style="{ width: '75%', height: '100%' }"></div>

import * as echarts from "echarts";
import ChinaJSON from "./chinaMap.json";

const initChinaMap = (touristDomesticFromTop) => {
  // 获取地图容器
  const mapChart = document.getElementById("refChinaMap");
  var mapChartInstance = echarts.init(mapChart);
  // 注册地图
  echarts.registerMap("china", ChinaJSON);
  mapChartInstance.setOption({
    layoutCenter: ["50%", "40%"], //位置
    layoutSize: 420, //大小
    // 游标
    visualMap: {
      orient: "horizontal",
      type: "piecewise",
      itemWidth: 30,
      itemHeight: 7,
      showLabel: false,
      seriesIndex: [0],
      min: 0,
      max: 5000,
      calculable: true,
      splitNumber: 4,
      itemG