使用ECharts绘制中国地图

发布于:2022-12-26 ⋅ 阅读:(658) ⋅ 点赞:(0)

想要在echarts中展示地图,我们需要有对应的地图数据,可以去阿里dataV下载

 我们需要的数据就是一个对象,我们需要使用他们提供的接口或者把这个对象下载到本地。

使用地图

想要使用地图,需要在我们的代码中注册地图

echarts.registerMap("自定义地图名称", 地图数据)

在这个例子里

echarts.registerMap("china", china)

然后初始化echarts,配置对应的option

let chart = echarts.init(dom对象)

let option = {
  geo: {
    map: "自定义地图名称"
  }
}

chart.setOption(option)

 

这个地图,其实是我们建立的特殊坐标系——地理坐标系。

我们可以通过配置geo.itemStyle改变默认时的样式,配置geo.select配置选中时的样式。配置geo.emphasis配置移入时的样式。

在地图上显示散点图

Examples - Apache ECharts

散点图的设置在series中,设置一个对象

{
    // 坐标系设置成地理坐标系,默认是直角坐标系
    coordinateSystem: 'geo',
    // 地理坐标系中,data比较复杂 [{name:"名字", value: [经度, 纬度, 值]}]
    data: convertData(data),
    // 散点图
    type: 'scatter',
    // symbolSize: function () {}
    // 散点大小
    symbolSize (value) {
      console.log(value)
      return value[2] / 10
    }
  }

这样我们就可以在地图上展示散点图。

注意!这里有一个坑,geo只是添加地理坐标系。