• 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,结果气泡出来了。
            },
                  

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

                    希望对大家有用。

  • 相关阅读:
    思达BI软件Style Intelligence实例教程—食品平均价格变动情况分析
    思达BI软件Style Intelligence实例教程—原盐产量分析
    思达BI软件Style Intelligence实例教程—综合能源分析
    思达BI软件Style Intelligence实例教程—交通事故分析
    思达BI软件Style Intelligence实例教程—科技经费投入情况分析
    思达BI软件Style Intelligence实例教程—某高校录取情况分析
    80端口被系统占用,无法kill
    面试题目: PHP 有哪些优缺点?
    面试题目: 获取服务器IP和客户端IP
    Wordpress 忘记密码怎么办?
  • 原文地址:https://www.cnblogs.com/fzczailushang/p/7821721.html
Copyright © 2020-2023  润新知