最近想做一个统计文章点击率,评论率和点赞率的功能,听说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. “帮你”APP——NABCD需求分析

    1.你的创意解决了用户的什么需求?(N) 本学校已存在的失物招领.表白墙.二手市场等QQ群普遍存在信息冗杂,时效性差等缺点.不能充分发挥信息有效性的,我们的“帮你”APP能够充分发挥信息的有效性,让失 ...

  2. 拾遗----javascript一些实用方法

    1. join() join() 方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. var ids = [];                 for(var i = 0 ...

  3. Ingress介绍与安装配置

    在 Kubernetes 集群中,Ingress是授权入站连接到达集群服务的规则集合,为您提供七层负载均衡能力.您可以给 Ingress 配置提供外部可访问的 URL.负载均衡.SSL.基于名称的虚拟 ...

  4. Spring.xml中配置注解context:annotation-config和context:component-scan简述

    XML中context:annotation-config和context:component-scan简述 <context:annotation-config/> 中文意思:<上 ...

  5. 转: Ext.data.Store 修改Post请求

    Extjs 4.0版本 var Store = Ext.create('Ext.data.Store', { pageSize: pageSize, model: 'Ext.data.Model名称' ...

  6. 查询Oracle版本

    服务器端 Oracle: 1)select* from v$version; 2)select * from product_component_version; 3)set serveroutput ...

  7. R和Python,对抗or融合?

    来源商业新知网,原标题:从对抗到融合,教你充分利用R+Python! 我们应该将关注点放在技能上,而不是工具上. 如果你从事数据科学的工作,可能会立即想到两种编程语言:R和Python. 事实上,R和 ...

  8. 第一周pta作业2

    7-2 求最大值及其下标 (20 分) 本题要求编写程序,找出给定的n个数中的最大值及其对应的最小下标(下标从0开始). 输入格式: 输入在第一行中给出一个正整数n(1<n≤10).第二行输入n ...

  9. mysql访问视图提示:找不到视图

    原因: 1.不存在 2.视图区分大小写(有的不区分) 3.权限问题

  10. java operate

    class OperateDemo { public static void main(String[] args) { /* + - * / %(取余数) */ int x = 2810; Syst ...