echarts结合百度地图实现闪点功能

<script setup>
import { ref, reactive, onMounted } from 'vue'
import 'echarts/extension/bmap/bmap'
import imgUrl from '../assets/vue.svg'
import * as echarts from 'echarts'
onMounted(() => {
  let ginsengMap = echarts.init(document.getElementById('ginsengMap'))
  let data = [
          {
            name: '北京',
            value: [116.405285, 39.904989, 199]
          },
          {
            name: '新疆',
            value: [87.617733, 43.792818, 180]
          },
          {
            name: '河南',
            value: [113.665412, 34.757975, 137]
          },
          {
            name: '四川',
            value: [104.065735, 30.659462, 125]
          },
          {
            name: '黑龙江',
            value: [126.642464, 45.756967, 123]
          },
          {
            name: '广东',
            value: [113.280637, 23.125178, 123]
          },
          {
            name: '山东',
            value: [117.000923, 36.675807, 119]
          },
          {
            name: '福建',
            value: [119.306239, 26.075302, 116]
          },
          {
            name: '湖北',
            value: [114.298572, 30.584355, 116]
          },
          {
            name: '浙江',
            value: [120.153576, 30.287459, 114]
          }
        ]
 
    var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
  let option = {
    title: {
      text: '标题的文字内容',
      left: 'center',
      top: '0',
      textStyle: {
        fontSize: 14,
        fontWeight: 400,
        color: "rgb(37,234,255)"
      }
    },
    tooltip: {
      trigger: 'item',
    },
    bmap: {
      center: [120.153576, 30.287459],  //地图的中心点
      zoom: 8,    //地图的等级
      roam: true,
      mapStyle: {  //地图的样式，可根据需要配置
        style: "midnight",
      }
    },
    series: [
      // 设置波纹点上面的长方形
      {
        name: '气泡散点图',
        type: 'scatter',
        coordinateSystem: 'bmap',
        // symbol:imgUrl,
        // 可以使用datauri 这个链接有详细介绍 https://echarts.apache.org/zh/option.html#series-scatter.symbol 
        // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
        symbol: 'rect',
        symbolSize: [10, 20],
        itemStyle: {
          normal: {
            // 气泡颜色
            color: '#F62157',
          }
        },
        symbolOffset: [0, '-50%'],
        tooltip:{
          // 这个tooltip只有外面的tootip trriger item才会生效
          formatter:'{a} {b}'
        },
        zlevel: 6,
        data: data,
      },
      {
        name: 'Top 5',
        type: 'effectScatter',
        coordinateSystem: 'bmap',
        data: data,
        symbolSize: [10, 5],
        showEffectOn: 'render',
        rippleEffect: {
          brushType: 'stroke'
        },
        hoverAnimation: true,
        label: {
          formatter: '{b}',
          position: 'left',
          show: false
        },
        itemStyle: {
          color: 'red',
          shadowBlur: 10,
          shadowColor: 'blue'
        },
        zlevel: 10
      },
      {
            name: 'wha Top2',
            type: 'lines',
            coordinateSystem: 'bmap',
            zlevel: 2,
            effect: {
                show: true,
                period: 6,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 15
            },
            lineStyle: {
                normal: {
                    color: '#a6c84c',
                    width: 1,
                    opacity: 0.4,
                    curveness: 0.2
                }
            },
            data: [{
                fromName: "北京",
                toName: "新疆",
                coords:[[116.405285, 39.904989],[87.617733, 43.792818]]
            },{
                fromName: "北京",
                toName: "河南",
                coords:[[116.405285, 39.904989],[113.665412, 34.757975]]
            },{
                fromName: "北京",
                toName: "四川",
                coords:[[116.405285, 39.904989],[104.065735, 30.659462]]
            },{
                fromName: "北京",
                toName: "黑龙江",
                coords:[[116.405285, 39.904989],[126.642464, 45.756967]]
            },{
                fromName: "北京",
                toName: "广东",
                coords:[[116.405285, 39.904989],[113.280637, 23.125178]]
            },{
                fromName: "北京",
                toName: "山东",
                coords:[[116.405285, 39.904989],[117.000923, 36.675807]]
            },{
                fromName: "北京",
                toName: "福建",
                coords:[[116.405285, 39.904989],[119.306239, 26.075302]]
            }]
        }
    ]
  }
 
  ginsengMap.setOption(option)
})
 
 
</script>
 
<template>
  <div id="ginsengMap" style="width:1500px;height: 1000px;"></div>
</template>
 
<style scoped>
.read-the-docs {
  color: #888;
}
</style>复制

注意 因为使用的事百度地图 需要在index.html 引入 百度api的链接和ak

然后项目中 npm install echarts