echarts+百度地图绘制带效果的散点

一般情况下带效果的散点会用在有排名的数据，所以需要从后台拿到需要的排名数据或者将数据处理成排序后的数据

series: [
         {
           name:"销售额",
           type: "scatter",//散点图
           coordinateSystem: "bmap",//坐标系必须为bmap
           data: testPoint, //测试的城市数据
           tooltip: {//鼠标移上去的提示
             formatter: function(params, ticket, callback) {
               
             }
           },
           //定制点的大小 根据销售额的数据定制点的大小
           symbolSize: function(val) {
             //val是 value: [118.78, 32.04, 300]
             return val[2] / 10;
           },
           label: {
             formatter:(data)=>{//展示名称和销售额
               return data.name+"-"+data.data.value[2]
             },
             position: "right"
           },
           //点的颜色
           itemStyle: {
             color: "#ddb926"
           },
           //鼠标移上去显示文本
           emphasis: {
             label: {
               show: true
             }
           }
         },
         {
           //有效果的散点图
           name:"Top10",
           type:"effectScatter",//有效果散点图
           coordinateSystem: "bmap",//坐标系必须为bmap
           data:topdata,
           //定制点的大小 根据销售额的数据定制点的大小
           symbolSize: function(val) {
             //val是 value: [118.78, 32.04, 300]
             return val[2] / 10;
           },
         }
       ]

soogif.gif

继续定制

{
           //有效果的散点图
           name:"Top10",
           type:"effectScatter",//有效果散点图
           coordinateSystem: "bmap",//坐标系必须为bmap
           data:topdata,
           //定制点的大小 根据销售额的数据定制点的大小
           symbolSize: function(val) {
             //val是 value: [118.78, 32.04, 300]
             return val[2] / 10;
           },
           tooltip:{

           },
           label: {
             formatter:(data)=>{//展示名称和销售额
               return data.name+"-"+data.data.value[2]
             },
             position: "right",
             show:true
           },
           hoverAnimation:true,//鼠标移上去动画
           rippleEffect:{
               brushType:'stroke',//设置波纹样式
               // color:"red"
           },
           itemStyle:{//设置点的样式
               color:"purple",
               shadowBlur:10,
               shadowColor:"#333"
           }
         }

接着传入真实数据即可