当前位置:首页 » 《随便一记》 » 正文

Echarts画散点图

15 人参与  2022年11月28日 16:13  分类 : 《随便一记》  评论

点击全文阅读


提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档

Echarts画散点图

前言一、散点图悬浮框鼠标移入可滚动操作二、散点图偏下方的点悬浮数据显示不全三、数据量大、数据类别多、数据重复点多造成散点图散点展示不全或展示散点出现闪烁问题。


前言

下面是我使用echarts画散点图遇到的一些问题的总结,希望通过这些总结可以帮到遇到类似问题的人。


一、散点图悬浮框鼠标移入可滚动操作

图例:

在这里插入图片描述
参考代码:

tooltip: {    trigger: 'axis',    //提示框文本样式    textStyle: {        //提示框文字大小        fontSize: 12,    },    //固定悬浮框的高,使他超过显示滚动条    extraCssText: 'max-height:155px;overflow-y:scroll',    //鼠标是否可以进入提示框悬浮层中    enterable: true,},

二、散点图偏下方的点悬浮数据显示不全

图例:
在这里插入图片描述
解决办法:在tooltip中使用position进行悬浮框位置的调整
参考代码:

//提示框位置position: function (point, params, dom, rect, size) {    //X坐标位置    var x = 0;    //Y轴坐标位置    var y = 0;    //当前鼠标位置    var pointX = point[0];    var pointY = point[1];    //提示框大小    var boxWidth = size.contentSize[0];    var boxHeight = size.contentSize[1];    //悬浮提示显示不全    if (boxWidth > 1100) {        $(dom).css("width", "800px")        .css("overflow", "hidden")        .css("text-overflow", "ellipsis")        .css("white-space", "nowrap");        boxWidth = 800;    }    //boxwidth > pointX 说明鼠标左边放不下提示框的情况    if (boxWidth > pointX) {        x = 5;        y -= 15;    } else {        x = pointX - boxWidth - 15;    }    x = x < 0 ? 5 : x;    //boxHeight > pointY 说明鼠标右边放不下提示框的情况    if (boxHeight + 20 > pointY) {        y = pointY + 15;    } else if (boxHeight < pointY) {        y = pointY;    } else {        y += pointY - boxHeight;    }    //#67055:洞察中散点图只留组质心时偏左下角的点悬浮数据显示不全    y = y > 330 ? 230 : y;    //这里采用固定Y轴 X轴随鼠标位置变化    return [x, y]},

三、数据量大、数据类别多、数据重复点多造成散点图散点展示不全或展示散点出现闪烁问题。

图例:
在这里插入图片描述

问题原因:散点图散点太集中,区域散点图散点太多造成散点图渲染时出错
参考代码:

 //大数据模式 large: true, // //层级 zlevel: i,

点击全文阅读


本文链接:http://zhangshiyu.com/post/49194.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 此后锦书休寄周窈音全文最新章节(周窈音)全文免费阅读无弹窗大结局_周窈音免费阅读
  • 弹幕说我是捞女?反手收购男主公司养鸡(林朝曦沈墨川)_弹幕说我是捞女?反手收购男主公司养鸡
  • 没给寡嫂抢到La******,老公把我和儿子做成蜡像(顾云州沈云烟)_没给寡嫂抢到La******,老公把我和儿子做成蜡像顾云州沈云烟
  • 出狱后,假千金靠玄术杀疯了(顾九音霍霆修)_出狱后,假千金靠玄术杀疯了
  • 养妹偷我认亲玉佩当上千金,男友当场分手超长版_玉佩陈雨柔养父母一口气看完_小说后续在线阅读_无删减免费完结_
  • 抽卡后,气运之子怎么都缠上来了小说(夏挽棠)(抽卡后,气运之子怎么都缠上来了)全书+后续+结局在线阅读
  • 前传爱意随风消逝续集:全文+番外乔清浅宋轻舟:结局+番外新上热文
  • 宋昭黎陆铭绪(假如从没拥抱你)前文+全本完整阅读预售作品抢先看
  • 终章小说搬空海港!我携军舰嫁军官躺赢了完结篇(温婉历战)已更新+延伸(搬空海港!我携军舰嫁军官躺赢了)清爽版
  • 贵妻在上:废材老公来护航完结篇(贵妻在上:废材老公来护航)章节目录+章节前文(宋锦瑶霍少霆)全章无套路在线
  • 离婚后,前夫一家给我跪下了隐藏剧情_明白双宿双飞江城必读文_小说后续在线阅读_无删减免费完结_
  • 乔芊芊顾宴夜小说(乔芊芊顾宴夜)(踹了渣男后,禁欲大佬为我失控)前传+阅读全新作品预订

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1