Echarts地图(散点图)

本文详细解析了ECharts中散点图symbolSize属性的使用方法,介绍了如何通过data数组设置散点的大小,并提供了代码示例,展示了如何根据数值动态调整散点大小。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

series

symbolSize(散点图)官方解释

首先series是个对象,里面存放多个数组,symbolSize要放到series对象的数组中,具体放在含有type:"scatter"的数组中,但是散点如何使用呢?
我看了一下各种博客、Echarts官网、样例,然后自己测试了一下,发现传给symbolSize中的参数由三种值组成,传过来的参数也就是同级的data属性,data是一个二维数组,其中每个数组中由三种值构成,分别是[经度纬度对应的数值]。举个例子,武汉的地理坐标是(114.31,30.52),设置的值为50,那你在data数组中应该是这样[114.31,30.52,50]。
如果你想让散点的大小根据具体数值来变化,修改返回值即可,如图

symbolSize: function (val) {
                return val[2];   //返回data数组中对应的数值
            },

今天遇到坑了。。代码如下

series: [{
              name: '投资项目数', // 浮动框的标题
              type: 'effectScatter',
              coordinateSystem: 'geo' ,// 对应上方配置
              data:this.sizeList,
              symbolSize: function (val) {
                if(parseInt(val[2]/10)>15){
                  return 15;
                }
                return parseInt(val[2]/10);
              },
              showEffectOn: 'render',   // 绘制完成后显示特效
              rippleEffect: {
                  brushType: 'stroke',  //圆点的波纹方式
              },
              hoverAnimation: true,    //动画效果
              label: {
                normal: {
                    formatter: '{a}'.split(",")[2],
                    position: 'right',
                    show: true
                },
                emphasis: {   //label标签样式控制
                    show: true
                }
              },
              zlevel: 1   //用于分层
            },

label中的formatter格式化问题
Echarts官方文档
**formatter:’{a}’.split(",")[2]**是可以显示的,显示的是特定的值
在这里插入图片描述
但是在tooltip提示框中的formatter这样写却不好使,formatter:’{c}’.split(",")[2],显示的却是{c}完整的字符串,用substring()截取也不好使(前提已经用typeof测过了,是String类型)…
看来用字符串模板不好使,试一下用回调函数
在这里插入图片描述

formatter: function(params){
              // console.log(params);
              return params.seriesName+"<br>"+params.name+":"+params.value[2];
            }

最后通过回调函数终于弄出来啦~,效果如图
在这里插入图片描述
    最后需要提醒一下,有可能会有人问,为什么data数组对象中的value不只设置投资项目数的值?
    由于要在相应的城市下显示项目数,所以就像文章头说的那样,每个数组中由三种值构成,分别是[经度纬度对应的数值],前两个值要存放城市的经纬度,所以value就需要拆分,把项目数挑出来~


额,o_o ....echarts中的属性好多,多背背相关的单词吧。。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

仙人掌上的刺猬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值