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,作为内网域名解析的工具.让我和另一组的同事学一下如何配置及调优.所以先找了两台服务器试着安装一下.这一装就是一个礼拜,经历了大大小小的坑,记下来以后可能需要参考.安装过程如 ...
随机推荐
- Django10-Form组件
一.Form介绍 我们之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来.与此同时我们在很多场景下都需要对用户的输入做校验,比如校验用户是 ...
- C#控件——批量化隐藏或显示同类型控件
当一个页面中添加了许多同类型控件,当需要控制这些控件进行显示或隐藏的时候,需要一个个的将Visible属性设置为false,十分不方便, 后通过论坛受一位大神(至于叫什么忘了)的启发,通过建立控件数组 ...
- PHP通过身份证号码获取性别、出生日期、年龄等信息
$sex = substr($idcard, (strlen($idcard)==18 ? -2 : -1), 1) % 2 ? '1' : '2'; //18位身份证取性别,倒数第二位奇数是男,偶数 ...
- Servlet学习记录3
提交表单信息 Web程序的任务是实现服务器与客户端浏览器之间的信息交互.客户端提交的信息可能来自表单里的文本框,密码框,选择框,单选按钮,复选框以及文件域.这些表单信息被以参数形式提交到了服务器.Se ...
- Habits of Considerate People
Habits of Considerate People体贴人的八种习惯哲学家亚瑟·叔本华曾经说过:“蜡之可贵,在于燃烧自己温暖他人,人之可贵,在于屈尊敬贤彬彬有礼”,事实的确如此.善意与体贴能够抚慰 ...
- git 之连接tfs的git服务器
tfs中的git的管理,注意区分是主页地址,还是代码地址,代码地址中会有 _git http://ip:8080/tfs/p/elasticsearch6.2.0 http://ip:8080/t ...
- 机器学习--Xgboost调参
Xgboost参数 'booster':'gbtree', 'objective': 'multi:softmax', 多分类的问题 'num_class':10, 类别数,与 multisoftma ...
- 一.C#基础:标识符和关键字
只要语言就会有标识符,和关键字的概念,以下是C#的标识符与关键字: 一个字符串要成为标识符要满足的条件1:只包含字母,(包括大小写),数字,@符号,下划线——.2:首位可以是字母,@,但一定不能是数字 ...
- Django form表单功能的引用(注册,复写form.clean方法 增加 验证密码功能)
1. 在app下 新建 forms.py 定义表单内容,类型models from django import forms class RegisterForm(forms.Form): userna ...
- java第八章JDBC
JDBC实现各种数据库的访问 实现把各种数据存入数据库从而长久保存(JDBC充当了java应用程序于各种不同数据库之间进行对话的媒介) JDBC工作原理 JDBC API由Sun公司提供,主要包括Co ...