初使用ECharts绘制地图

快速认识ECharts，没有比官方教程更好的了。请戳：https://echarts.apache.org/zh/tutorial.html

准备工作：安装和引入echarts

你可以使用如下命令通过 npm 安装 ECharts

npm install echarts --save
           

通过 npm 安装的 echarts 会出现在 node_modules 目录下，从而可以直接在项目代码中得到 echarts，例如：

import * as echarts from 'echarts';
           

这样得到的是已经加载了所有图表和组件的 ECharts包，因此体积会比较大，如果在项目中对体积要求比较苛刻，也可以只按需引入需要的模块。

绘制一个简单的地图

为 ECharts 准备一个具备高宽的 DOM 容器。

<div #shenzhenChart style="width:800px;height: 600px;"></div>
           

基于准备好的dom，通过

echarts.init

方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的地图。

@ViewChild('shenzhenChart', { static: true, read: ElementRef }) shenzhenChart: ElementRef;

// 1.初始化echarts实例
let shenzhenChart = echarts.init(this.shenzhenChart.nativeElement);

// 2.指定地图的配置项和数据
let option = {
  title: {
    text: '深圳各区常住人口（2018）'
  },
  tooltip: {
    formatter: '{b}<br/>{c} (万人)'
  },
  visualMap: {
    min: 20,
    max: 350,
    text: ['High', 'Low'],
    realtime: false,
    calculable: true,
    inRange: {
      color: ['lightskyblue', 'yellow', 'orangered']
    }
  },
  series: [
    {
      name: '深圳各区常住人口',
      type: 'map',
      mapType: 'shenzhen',
      label: {
        show:true
      },
      data: [
        { "name": "宝安区", "value": 325.78 },
        { "name": "龙岗区", "value": 238.64 },
        { "name": "南山区", "value": 149.36 },
        { "name": "福田区", "value": 163.37 },
        { "name": "罗湖区", "value": 103.99 },
        { "name": "盐田区", "value": 24.29 },
      ]
    }
  ]
}

// 3.使用刚指定的配置项和数据显示地图
$.get('assets/datas/shenzhen.json', function (geoJson) {
   echarts.registerMap('shenzhen', geoJson, {});
   shenzhenChart.setOption(option);
 });
           

ECharts 使用 geoJSON 格式的数据作为地图的轮廓，你也可以通过其它手段获取地图的 geoJSON 数据注册到 ECharts 中。

仅三步搞定，哈哈哈，地图出来啦！！

再来绘制一个稍微复杂的地图

Echarts中提供了两种格式的地图数据，一种是JSON文件，需要通过AJAX异步加载后手动注册。我们已经在上个例子中使用过了，现在，我们来看看另外一种。另一种是js文件，直接引入即可，引入后会自动注册地图名字和数据。

import '../../../../../node_modules/echarts/map/js/china.js'; //引入中国地图数据

let geoCordMap = {
  "拉萨": [91.11, 29.97],
  "上海": [121.48, 31.22],
  "攀枝花": [101.718637, 26.582347],
  "厦门": [118.1, 24.46],
  "宁波": [121.56, 29.86],
  "湛江": [110.359377, 21.270708],
  "南宁": [108.33, 22.84],
  "嘉峪关": [98.289152, 39.77313],
  "广州": [113.23, 23.16],
  "中山": [113.38, 22.52],
  "深圳": [114.07, 22.62],
  "珠海": [113.52, 22.3],
  "苏州": [120.62, 31.32],
  "三亚": [109.511909, 18.252847],
  "成都": [104.06, 30.67],
  "桂林": [110.28, 25.29],
  "北海": [109.12, 21.49],
  "扬州": [119.42, 32.39],
  "重庆": [106.54, 29.59], 
  "北京": [116.46, 39.92],
  "杭州": [120.19, 30.26],
  "温州": [120.65, 28.01],
  "长沙": [113, 28.21],
  "武汉": [114.31, 30.52]
};

let convertData = function (data) {
  let res = [];
  for (let i = 0; i < data.length; i++) {
    let geoCoord = geoCordMap[data[i].name];
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      })
    }
  }
  return res;
};

export let option= {
  backgroundColor: "#02AFDB",
  title: {
    text: '某些城市人口数量（2010）',
    left: 'center',
    textStyle: {
      color: '#fff'
    }
  },
  tooltip: { //鼠标移到图里面的浮动提示框
    formatter: function (param) {
      return [
        param.name + '：' + '<br/>',
        param.value[2] + '（万人）'
      ].join('');
    }
  }, 
  visualMap: { //视觉映射组件，将数据映射到视觉元素
    type: 'piecewise', //分段型
    min: 0,
    max: 3100,
    splitNumber: 5, //对于连续型数据,自动平均分段
    inRange: {
      color: ['#50a3ba','#eac736','#d94e5d'], //图元颜色
    },
    left: 20,
    bottom: 20,
    textStyle: { //visualMap 文字样式
      color: '#fff'
    }
  },
  geo: { // 地理坐标系组件，这个是重点配置区
    map: 'china', // 表示中国地图
    roam: true, //是否开启鼠标缩放和平移漫游
    label: {
      show: false
    },
    emphasis: {
      label: {
        show: false
      }
    },
    itemStyle: { //地图区域的多边形 图形样式
      normal: {
        borderColor: 'rgba(0, 0, 0, 0.2)' //图形的描边颜色
      },
      emphasis: {
        areaColor: null,
        shadowOffsetX: 0,
        shadowOffsetY: 0,
        shadowBlur: 20,
        borderWidth: 0,
        shadowColor: 'rgba(0, 0, 0, 0.5)'
      }
    }
  },
  series: [
    {
      type: 'scatter',
      coordinateSystem: 'geo', // 该系列使用的坐标系 
      data: convertData([
        {name: "拉萨", value: 55.94},
        {name: "上海", value: 2301.91},
        {name: "攀枝花", value: 121.41},
        {name: "厦门", value: 353.13},
        {name: "宁波", value: 760.57},
        {name: "湛江", value: 699.33},
        {name: "南宁", value: 666.16},
        {name: "嘉峪关", value: 23.19},
        {name: "广州", value: 1270.08},
        {name: "中山", value: 312.09},
        {name: "深圳", value: 1035.79},
        {name: "珠海", value: 156.02},
        {name: "苏州", value: 1046.60},
        {name: "三亚", value: 68.54},
        {name: "成都", value: 1404.76},
        {name: "桂林", value: 474.80},
        {name: "北海", value: 153.93},
        {name: "扬州", value: 445.98},
        {name: "重庆", value: 3017.42},
        {name: "北京", value: 2300.24},
        {name: "杭州", value: 870.04},
        {name: "温州", value: 912.21},
        {name: "长沙", value: 704.41},
        {name: "武汉", value: 910}
      ]),
      label: {
        normal: {
          show: true,
          position: 'top',
          formatter: function (param) {
            return param.name
          },
        }
      }
    }
  ]
}
           

//初始化echarts实例和显示地图
let chinaChart = echarts.init(this.chinaChart.nativeElement);
chinaChart.setOption(option);
           

可以从注释了解到一些配置项，官网有更全面详细的配置项说明，我就不赘述了。请戳：https://echarts.apache.org/zh/option.html#title