echarts使用踩坑实录之气泡图
最近想做一个统计文章点击率,评论率和点赞率的功能,听说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使用踩坑实录之气泡图的更多相关文章
- 后端路由项目由 gulp 改为 webpack 的踩坑实录
前言 公司有个后端路由的项目是用 gulp 作为前端自动化构建工具,最近学习了一下 webpack,深感其强大,一狠心将其改成了 webpack 构建,以下是踩坑实录. gulp 先来说说原来的架构. ...
- JAVA实用案例之文件导出(JasperReport踩坑实录)
写在最前面 想想来新公司也快五个月了,恍惚一瞬间. 翻了翻博客,因为太忙,也有将近五个多月没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六 ...
- ffmpeg 踩坑实录 添加实时水印(二)
一.背景介绍 最近领导要求做一个视频录制的相关项目.其中,需要对视频文件进行添加 实时时间水印.于是,我想到了使用之前的ffmpeg来做. 二.ffmpeg实际操作 首先把需要添加水印的视频文件,上传 ...
- JasperReport报表导出踩坑实录
写在最前面 翻了翻博客,因为太忙,已经好久没认真总结过了. 正好趁着今天老婆出门团建的机会,记录下最近这段时间遇到的大坑-JasperReport. 六月份的时候写过一篇利用poi文件导入导出的小De ...
- HashMap踩坑实录——谁动了我的奶酪
说到HashMap,hashCode 和 equals ,想必绝大多数人都不会陌生,然而你真的了解这它们的机制么?本文将通过一个简单的Demo还原我自己前不久在 HashMap 上导致的线上问题,看看 ...
- (最新)VS2015安装以及卸载过程——踩坑实录
前言 Visual Studio (简称VS)是微软公司旗下最重要的软件集成开发工具产品.是目前最流行的 Windows 平台应用程序开发环境,也是无数人学习编程的入门软件之一.Visual Stud ...
- ffmpeg 踩坑实录 安装与视频切片(一)
这段时间一直在做一个关于视频处理的项目.其中有一块需要切片相关功能.于是采用了ffmpeg来完成相关需求. 第一,ffmpeg的安装. 首先下载官方包,我这里用的是ffmpeg-release-64b ...
- windows安装rabbitmq踩坑实录
最近学习springcloud消息总线需要用到rabbitmq,然后安装的时候踩了一些坑,记录如下: 首先安装rabbitmq之前需要先安装erlang,因为rabbitmq服务端使用erlang写的 ...
- Ubuntu14.04安装PowerDNS踩坑实录
公司要使用PowerDNS,作为内网域名解析的工具.让我和另一组的同事学一下如何配置及调优.所以先找了两台服务器试着安装一下.这一装就是一个礼拜,经历了大大小小的坑,记下来以后可能需要参考.安装过程如 ...
随机推荐
- 阿里云从0安装mysql到远程连接
1.安装mysql数据库. (1)下载mysql源安装包:wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rp ...
- Iview Modal 点击确定就关闭,我想禁止关闭该怎么办呢?
网上各种loading,不推荐.用下面的方法直接就解决了 <div slot="footer"> <Button type="text" si ...
- MySql:SELECT 语句(六) CONCAT() 函数的使用
一.计算字段 为什么要用计算字段? 1)想要在一个字段中既显示公司地址,又显示公司名称,但是往往这两个都不在一个字段中 2)列数据是大小写混合的,但是报表程序需要把他们全部按大写形式展示出来 3)需要 ...
- Java学习--数组--判断数组中是否包含某个元素的方法
package zaLearnpackage; import org.apache.commons.lang3.ArrayUtils; import java.util.Arrays; import ...
- Leetcode_两数相加_python
小编从今天起要开始分享一些Leetcode代码,通过好好练习编程能力,争取以后找一份好工作. 题目:两数相加 # Definition for singly-linked list. # class ...
- Scratch 数字游戏
本想用Scratch给女儿做一个类似舒尔特方格的程序来认识数字和提升专注,想想这对刚刚3岁的孩子来说还是比较困难的,于是只做了3*3的方格,来认识数字1-9. 游戏地址:Random 9 v0.21 ...
- (转)IIS7无法读取配置文件解决办法
web.config 太大导致”出现无法读取配置文件,因为它超过了最大文件大小”错误问题的解决方法,如下:HKLM\SOFTWARE\Microsoft\InetStp\Configuration\M ...
- tensorflow,model,object_detection,训练loss先下降后递增,到几百万,解决tensorflow,model,object,detection,loss,incease
现象:训练loss一开始下降一部分,跌代到若干次(具体多少和你的learning rate大小有关,大就迭代小就发生,小就需要多几次迭代) 日志如下(下面的日志来源于网络,我自己的日志已经clear掉 ...
- 项目(一)ftp搭建
FTP服务 FTP两种模式: 主动模式服务器向客户端敲门,然后客户端开门 被动模式客户端向服务器敲门,然后服务器开门 传输模式:可以是文本模式,也可以是二进制模式,二进制模式更适合传输图片等非文本字符 ...
- Maven插件maven-shade-plugin打包配置
转载以下两篇文章 https://www.cnblogs.com/fuxinci/p/3356087.html https://chenzhou123520.iteye.com/blog/197132 ...