最近想做一个统计文章点击率,评论率和点赞率的功能,听说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. 如何系统的学习Java

    初学者记住一点,学习Java一定是连续性的且循序渐进的“系统化”学习,首先我给你提供一个优秀Java工程师的学习路线. web前端方面:html.css,Java.jQuery.xml解析.Boots ...

  2. python_12 模块

    在python中,一个.py文件就称之为一个模块(module) 好处:提高代码的可维护性 模块分为三种:1.python标准库   2.第三方库     3.应用程序自定义模块 import的作用: ...

  3. DataTable行列转换

    #region DataTable行列转换 /// <summary> /// DataTable行列转换 /// </summary> /// <param name= ...

  4. SQL函数总结

    字符串函数

  5. CodeForces - 864C-Bus-(模拟加油站问题)

    https://vjudge.net/problem/CodeForces-864C 题意:两地之间有个加油站,往返走k个单程,最少加油多少次. 大佬几十行代码就解决,我却要用一百多行的if语句模拟解 ...

  6. 一千行ABAP代码实现Windows传统游戏扫雷

    *&---------------------------------------------------------------------* *& Report ZCHENH087 ...

  7. Linux Apache虚拟主机配置方法

    apache 虚拟主机配置 注意: 虚拟主机可以开很多个 虚拟主机配置之后,原来的默认/etc/httpd/httpd.conf中的默认网站就不会生效了 练习: 主机server0 ip:172.25 ...

  8. as3.0 比较两个数组

    var arr1:Array=[1,2,3,4] var arr2:Array=[1,2,4,3] trace(arr1.join(",") == arr2.join(" ...

  9. 使用Badboy录制Web脚本 JMeter运行jmx脚本

    1.下载JDK 1.1 官网地址:https://www.oracle.com/technetwork/java/javase/downloads/index.html 在官网下载最新版本的JDK 1 ...

  10. Ubuntu iso下载地址(14、16、18)

    Ubuntu镜像,快速下载 ubuntu 14.04: http://mirrors.aliyun.com/ubuntu-releases/14.04/ubuntu 16.04: http://mir ...