最近想做一个统计文章点击率,评论率和点赞率的功能,听说echarts可以轻易完成它,于是我就选择使用echarts,考虑到我做的模块上文章是没有分类的,所以我的统计是基于一个个点,这一看嘛,感觉散点图可以胜任。为了突出表现那篇文章点击率或点赞率多,感觉气泡图就更能胜任这么回事。于是就选择气泡图干这件事。

简单地从官网拷贝个案例,直接从后台传递需要的json数据,原以为会想直方图那样简单,结果是数据加载了,然而默认没看见意料中的气泡!!怎么回事??

一开始我怀疑是我后台返回的数据不符合需求,于是我在后台强制请List类型转为数组类型;前端用js给alert一个数据,发现数据已经是数组类型了!!

这就怪了,数据都没问题,也是种格式怎么就显示不出气泡尼。更怪的是悬浮在legend上气泡就可以看见。没办法,我转眼想能不能手动触发悬浮鼠标事件,

让echarts图一加载图就可以和鼠标悬停那样。后来,我放弃了,天,要我读源码,不符合我这初级码农的水平。

没办法,百度吧...貌似也没找到个啥。简直发狂。

最后我只能把我的数据和官网给出的案例数据比较,然后不断地改变大小,最后发现原来是数据数值太小...

var data = [
                                [[28604,77,17096869,'Australia',1990]]   这是一个气泡所需要的数据

      series: [{
        name: '1990',
        data: data[0],
        type: 'scatter',
        symbolSize: function (data) {
        return Math.sqrt(data[2]) / 5e2;  data[2] --->17096869这就是控制气泡的那个数据,我后台获取的只有几十的数值大小,这么个开根除法,特么气泡大小就趋于零了,怎么能看得见他存在哦!!于是我反手就将Math.sqrt(data[2]) / 5e2;改成data[2]/50,结果气泡出来了。
        },

可能是分析能力太弱了,或许是对其配置不熟,导致老是做些莫名其妙的傻事!!下次啊,再用什么技术,还是得先摸清楚,使用它的前提条件是啥。

希望对大家有用。

echarts使用踩坑实录之气泡图的更多相关文章

  1. 后端路由项目由 gulp 改为 webpack 的踩坑实录

    前言 公司有个后端路由的项目是用 gulp 作为前端自动化构建工具,最近学习了一下 webpack,深感其强大,一狠心将其改成了 webpack 构建,以下是踩坑实录. gulp 先来说说原来的架构. ...

  2. JAVA实用案例之文件导出(JasperReport踩坑实录)

    写在最前面 想想来新公司也快五个月了,恍惚一瞬间. 翻了翻博客,因为太忙,也有将近五个多月没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六 ...

  3. ffmpeg 踩坑实录 添加实时水印(二)

    一.背景介绍 最近领导要求做一个视频录制的相关项目.其中,需要对视频文件进行添加 实时时间水印.于是,我想到了使用之前的ffmpeg来做. 二.ffmpeg实际操作 首先把需要添加水印的视频文件,上传 ...

  4. JasperReport报表导出踩坑实录

    写在最前面 翻了翻博客,因为太忙,已经好久没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六月份的时候写过一篇利用poi文件导入导出的小De ...

  5. HashMap踩坑实录——谁动了我的奶酪

    说到HashMap,hashCode 和 equals ,想必绝大多数人都不会陌生,然而你真的了解这它们的机制么?本文将通过一个简单的Demo还原我自己前不久在 HashMap 上导致的线上问题,看看 ...

  6. (最新)VS2015安装以及卸载过程——踩坑实录

    前言 Visual Studio (简称VS)是微软公司旗下最重要的软件集成开发工具产品.是目前最流行的 Windows 平台应用程序开发环境,也是无数人学习编程的入门软件之一.Visual Stud ...

  7. ffmpeg 踩坑实录 安装与视频切片(一)

    这段时间一直在做一个关于视频处理的项目.其中有一块需要切片相关功能.于是采用了ffmpeg来完成相关需求. 第一,ffmpeg的安装. 首先下载官方包,我这里用的是ffmpeg-release-64b ...

  8. windows安装rabbitmq踩坑实录

    最近学习springcloud消息总线需要用到rabbitmq,然后安装的时候踩了一些坑,记录如下: 首先安装rabbitmq之前需要先安装erlang,因为rabbitmq服务端使用erlang写的 ...

  9. Ubuntu14.04安装PowerDNS踩坑实录

    公司要使用PowerDNS,作为内网域名解析的工具.让我和另一组的同事学一下如何配置及调优.所以先找了两台服务器试着安装一下.这一装就是一个礼拜,经历了大大小小的坑,记下来以后可能需要参考.安装过程如 ...

随机推荐

  1. HTTP和HTTPS协议,看一篇就够了

    https://blog.csdn.net/xiaoming100001/article/details/81109617 因为http请求是无状态的,所以需要三次握手.四次挥手来确定状态. 大纲 这 ...

  2. 一些java的demo

    //1. false System.out.println(Integer.parseInt("01")>10); //2. abcdefghijklmnopqrstuvwx ...

  3. 将php脚本加入开机启动

    可以看到“/etc/rc.d/init.d”下有很多的文件,每个文件都是可以看到内容的,其实都是一些shell脚本.系统服务的启动就是通过“/etc/rc.d/init.d”中的脚本文件实现的.我们也 ...

  4. Jquery中小数取整

    var uu=Math.floor(5.36) 向下取整 结果为5 var uu=Math.floor(5.88) 结果为5 Math.ceil(5.33) 向上取整,结果为6 Math.round( ...

  5. python day04笔记总结

    2019.4.1 S21 day04笔记总结 昨日内容补充 1.解释器/编译器 1.解释型语言.编译型语言 2.解释型:写完代码后提交给解释器,解释器将代码一行行执行.(边接收边解释/实时解释) 常用 ...

  6. k8s Docker私有仓库认证

    使用过K8s的小伙伴肯定会遇到一个问题,我们在使用自有的Docker仓库的时候都需要先登录用户名和密码,但是如果使用K8S怎么配置密码呢?在secret中有一个类型是docker-registry我们 ...

  7. linux dns域名缓存

    在linux服务器中,我们 总会设置一个dns做域名解析 一般来说dns的缓存是不会造成多大的困扰,但是,有时候会遇到dns解析导致网络不能正常访问 在linux中,有一个缓存服务,我们可以重启这个来 ...

  8. bootstrap日期选择

    <input type="text" class="form-control datepicker" style="padding: 0.375 ...

  9. ASCII,Unicode,GBK和UTF-8字符编码的区别和联系

    如果经常写python2,肯定会遇到各种“奇怪”的字符编码问题,每次都通过谷歌解决了,但是为什么会造成这种乱码.decode/encode失败等等,本文就字符和字符编码做一个总结,更加清晰区分诸多的编 ...

  10. Java跨平台的原理

    使用Java语言编写应用程序最大的优点在于“一次编译,处处运行”,然而这并不是说所有的Java程序都具有Java跨平台的特性, 事实上,相当一部分的Java程序是不能在别的操作系统上正确运行的. Ja ...