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

在vue中使用echarts实现地图自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客_浮窗vue中介绍了echarts中地图的简单使用,实现了自定义浮窗的功能。

在vue中使用echarts实现地图颜色渐变及自定义浮窗内容_芝士焗红薯的博客-CSDN博客实现了地图上地区的颜色渐变,对地图进行了一些简化。

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

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的散点如图。

vue中使用echarts实现地图散点图_第1张图片

 2.自定义浮窗

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

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

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

vue中使用echarts实现地图散点图_第2张图片

3.颜色渐变 

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

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

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

vue中使用echarts实现地图散点图_第3张图片

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

vue中使用echarts实现地图散点图_第4张图片

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

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

最终效果:

vue中使用echarts实现地图散点图_第5张图片

 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}
会计人员总人数:${value.data.text.kjnumber}
领军人数:${value.data.text.ljnumber}
论文数量:${value.data.text.lwnumber}
著作数量:${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地图应该就会先用到这里了,之后如果还有别的需求,会再更新。

你可能感兴趣的:(#,echarts,前端,echarts,vue.js,javascript)