vue中使用echarts实现地图散点图

在中介绍了echarts中地图的简单使用，实现了自定义浮窗的功能。

在实现了地图上地区的颜色渐变，对地图进行了一些简化。

在很多大屏功能上是需要地图实现很密集的散点图，这个可以参考别的文章，本文使用散点图，是因为客户需要显示省直的信息，我个人认为在旁边放个点或者什么东西显示省直信息太奇怪了，正好想学一下散点，所以就用一个散点来代表省直。

1.设置散点

在前面两篇文章中，我们知道实现自定义浮窗和颜色渐变，在series中将type设置为map就可以。但是散点需要series中将type设置为effectScatter。实践发现series中是可以直接接受两个type，所以将effectScatter和map并列就可以。

散点的位置是根据地理位置来的，所以需要在value中设定需要的经纬度。

{
  type: effectScatter,
  coordinateSystem: geo,
  effectType: ripple,
  showEffectOn: render,
  // 散点样式
  rippleEffect: {
    period: 1,
    scale: 2,
    brushType: fill
  },
  // 散点大小
  symbolSize: [15, 15],
  hoverAnimation: true,
  // 标志的样式
  itemStyle: {
    normal: {
      color: rgba(255, 235, 59, .7),
      shadowBlur: 10,
      shadowColor: #333
    }
  },
  zlevel: 1,
  data: [
    { name: 省直, value: [118.6, 32.1] }
  ]
}

这样就实现了一个经纬度188.6，32.1的散点如图。

2.自定义浮窗

上篇文章中我们已经总结了，浮窗里的内容可以写在data的text里，所以我们在effectScatter加一个tooltip，在data中加一个text就可以。

tooltip: {
  show: true,
  formatter (value) {
    console.log(value)
    return `地区：${value.data.name}</br>会计人员总人数：${value.data.text.kjnumber}</br>领军人数：${value.data.text.ljnumber}</br>论文数量：${value.data.text.lwnumber}</br>著作数量：${value.data.text.zznumber}`
  },
  color: #fff
},
data: [
  { name: 省直, value: [118.6, 32.1] ,text:{kjnumber:11409,ljnumber:10,lwnumber:10,zznumber:10}}
]

这样就完成了散点的浮窗内容

3.颜色渐变

接下来的问题是，散点如何和地图一样根据会计人数实现颜色渐变呢？

因为散点的位置是根据value中的地理坐标显示的，所以value一定得是一个数组，我们已知颜色渐变需要的value是一个数值。

打印散点这里的data，可以看到 value接收的是一个数组

而地图的颜色渐变是根据value接收的数组的最后一个数值来确定的。比如现在value数组接收的最后一个值是32.1，颜色渐变会自动取数组的最后一个值。

所以只需要把省直的人数写在value数组的最后就可以了。

data: [
  { name: 省直, value: [118.6, 32.1,11409] ,text:{kjnumber:11409,ljnumber:10,lwnumber:10,zznumber:10}}
]

最终效果：

4.完整代码

{
  type: effectScatter,
  coordinateSystem: geo,
  effectType: ripple,
  showEffectOn: render,
  // 散点样式
  rippleEffect: {
    period: 1,
    scale: 2,
    brushType: fill
  },
  // 散点大小
  symbolSize: [15, 15],
  tooltip: {
    show: true,
    formatter (value) {
      console.log(value)
      return `地区：${value.data.name}</br>会计人员总人数：${value.data.text.kjnumber}</br>领军人数：${value.data.text.ljnumber}</br>论文数量：${value.data.text.lwnumber}</br>著作数量：${value.data.text.zznumber}`
    },
    color: #fff
  },
  hoverAnimation: true,
  // 标志的样式
  itemStyle: {
    normal: {
      color: rgba(255, 235, 59, .7),
      shadowBlur: 10,
      shadowColor: #333
    }
  },
  zlevel: 1,
  data: [
    { name: 省直, value: [118.6, 32.1,11409] ,text:{kjnumber:11409,ljnumber:10,lwnumber:10,zznumber:10}}
  ]
}

还有一个和之前不同的地方是，我给浮窗里加了一个地区，主要用来区分省直和南京。还有就是有时候地图会有点小bug，显示地区的话能确保能分清数据是哪个地区的。

关于echarts地图应该就会先用到这里了，之后如果还有别的需求，会再更新。