返回

Echarts制作一个固定标记点的中国地图!再也不用在浏览器找地图了

前端

绘制中国地图
下载中国地图文件,将map.json文件放入项目中;
引用地图文件:

import chinaJson from "china.json";

实例化echarts对象,设置地图类型为中国,使用刚才的map.json文件,支持缩放功能,禁止滚轮缩放;

var chinaChart = echarts.init(document.getElementById("main"), 'walden');
chinaChart.setOption({
  series: [
    {
      name: '中国',
      type: 'map',
      mapType: 'china',
      data: chinaJson,
      roam: true,
      zoom: 1,
      scaleLimit: {
        min: 1,
        max: 5
      },
      itemStyle: {
        normal: {
          areaColor: '#323c48',
          borderColor: '#111'
        },
        emphasis: {
          areaColor: '#2a333d'
        }
      }
    }
  ]
});

固定标记点

var markPointData = [{
  name: '上海',
  value: 31.2,
  symbol: 'diamond',
  symbolSize: 10,
  tooltip: {
    show: true
  }
}];
// 绘制固定标记点
chinaChart.setOption({
  series: [{
    name: '标记点',
    type: 'scatter',
    coordinateSystem: 'geo',
    symbol: 'pin',
    symbolSize: 20,
    label: {
      show: true,
      position: 'top',
      formatter: '{b}'
    },
    itemStyle: {
      color: 'orange'
    },
    emphasis: {
      label: {
        show: true
      }
    },
    data: markPointData
  }]
});