【Echarts】 绘制世界地图和中国省份

部分代码

# 参数设置
lineOptions: {
  backgroundColor: 'transparent',
  title: {
    text: this.title,
    left: 'center',
    top: "5",
    textStyle: {
        color: '#333',
        fontSize: '20'
    }
  },
  geo: {
    map: 'worldAndChina', // china/world
    center: [xxx,xxxx], // 视角中心点，经纬度
    zoom: 5, // 当前视角缩放比例, china:1；world:3,
    roam: true,
    silent: true,
    top: "top",
    label: {
      normal: {
        show: true,
      }
    },
    itemStyle: {
      normal: {
        areaColor: '#ACBDEF99',
        borderColor: '#fff'
      },
      emphasis: {
        areaColor: '#ACBDEF',
      }
    },
  },
  grid: {
    containLabel: true,
    left: "10",
    right: "10%",
    bottom: "10"
  },
  toolbox: {
    feature: {
      restore: {
        icon:
          "path://M744.825185 959.604364c99.432617-180.095751 116.152417-454.878025-274.385231-445.671339l0 221.86404L134.765845 400.102491 470.439954 64.394612l0 217.134319C938.120562 269.358751 990.225267 694.347025 744.825185 959.604364L744.825185 959.604364 744.825185 959.604364zM744.825185 959.604364"
      },
      saveAsImage: {},
    }
  },
  tooltip: {
    triggerOn: 'mousemove',
    confine: true, // 是否限制在图表区域
    extraCssText: "box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);",
    backgroundColor: "#dde4ed",
    padding: 10,
    textStyle: {
      color: "#000"
    },
    position:"right",
  },
  series: []
},

## 渲染绘制
let echartsBox = document.getElementById("echartsMap");
let myChart = window.echarts.init(echartsBox);
 myChart.showLoading({
   text: "数据加载中 请稍后...",
   textStyle: {
     fontSize: 20
   }
 });

metricData= [{
  name: el,
  value: el.prop_lon_lat, // 此处为经纬度
}]
// 填充数据
let echartsOptions = this.lineOptions
echartsOptions.series.push({
    type: 'effectScatter',
    name: 'test',
    coordinateSystem: 'geo',
    symbol: "circle", // 标记的图形
    symbolSize: 7,
    showEffectOn: 'render',
    data: metricData,
    itemStyle: {
      color: "#00a65a",
    },
}),


myChart.clear(); 
this.$nextTick(() => {
  myChart.setOption(echartsOptions, true);
  this.pointClick(myChart);
  // 监听地图缩放事件，
  // 由于缩小地图的时候，地图文字存在堆在一起的情况，故判断zoom，控制label的展示和消失
  // 该部分参考：https://juejin.im/post/5dca2e5b5188255719075f64
  myChart.on('georoam', (params) => {
    //获取最新的option配制
    const { center, zoom } = myChart.getOption().geo[0];
    echartsOptions.geo.zoom = zoom;
    echartsOptions.geo.center = center;
    if(zoom<3 && this.mapIsLarge){
      echartsOptions.geo.label.normal.show = false;
      myChart.setOption(echartsOptions, true);
      this.mapIsLarge = false;
    }else if(zoom>=3 && !this.mapIsLarge){
      echartsOptions.geo.label.normal.show = true;
      myChart.setOption(echartsOptions, true);
      this.mapIsLarge = true;
    }
  });
});

截图

地图经纬度资源下载