今天做echarts图标,使用了散点图。很快实现,发现数据不对,应该是3个的企业,页面只显示了2个,查了半天才发现原来是有两个重叠了。想办法解决了,在网上费劲九牛二虎只力终于找到了解决的方法,下面来解释一下如何解决的。

tooltip 中要加入trigger: 'axis',属性,

formatter: (params) => {

console.log(params, 'dsad');

if (!currentData) return;

var htmlF = '';

params.forEach(item => {

if (currentData[0] === item.data[0] && currentData[1] === item.data[1]) {

htmlF += item.data[2] + '
'

+ '亩均产出:'+item.data[0] + '
/';

+ '亩均产出:'+item.data[1] + '
/';

}

      });
return htmlF;
}

htmlF中间的数据根据你后台返回的data来取值的。

我的data:[['2','1','公司名称'],['2','1','公司名称'],['3','5','公司名称']]

转载:https://blog.csdn.net/badmoonc/article/details/80983854

echarts散点图重叠的更多相关文章

  1. 更换 ECharts 散点图图标(散点图中symbol的使用)

    更换 ECharts 散点图图标 使用symbol关键字

  2. 【前端图表】echarts散点图鼠标划过散点显示信息

    在做项目的过程中,总会遇到这样或者那样的bug,这个时候就要看自己的动手能力有多强了,着手解决了一个bug之后,整个人都感觉很开心,端午下班之前遇到了一个小问题,echarts散点图鼠标划过散点的时候 ...

  3. echarts legend 重叠 (转载)

    解决方案:  1. 调整option中的grid.top值才能避免重叠:(可以设置定制,也可以定义了一个计算公式) 2. 文档注明[特殊字符串 ''(空字符串)或者 '\n' (换行字符串)用于图例的 ...

  4. ECharts 散点图+百度地图(案例转载)

    转载来源:https://efe.baidu.com/blog/echarts-map-tutorial-2/ ECharts 实现地图散点图(下)  小红  2016-06-13  ECharts, ...

  5. 用echartsjs 实现散点图与table表格双向交互,以及实现echarts取自于table数据,和自定义echarts提示内容

    本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的 ...

  6. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  7. Echarts 动态更新散点图

      最近遇到一个作业,要求使用 Echarts 散点图,本来这个图是很容易的,官网上也有很多的教程.但是如果可以动态的更新 Echarts 散点图就更好了.我本身对 js 不感兴趣,经过不停的查找资料 ...

  8. vue+vuex+axios+echarts画一个动态更新的中国地图

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

  9. echarts 图表建立步骤

    需要引用的文件 <script src="web/mobile/js/jquery-1.8.3.min.js"></script> <script s ...

随机推荐

  1. Delphi类的默认区域

    //类中数据成员的排列顺序一般是: 字段.方法.属性 //访问权限区域的顺序一般是:   无限制区(默认 published)   private   protected   public   pub ...

  2. ArcGIS10和ArcGIS10.1关于AO Licence初始化的问题

    两个版本主要是esriLicenseProductCode.esriLicenseProductCodeArcInfo和esriLicenseProductCode.esriLicenseProduc ...

  3. 6 Maven聚合与集成

    Maven的聚合特性能够把项目的各个模块聚合在一起构件,而Maven的继承特性能够帮助抽取各个模块相同的依赖和插件等配置,简化POM的同时,还能促进各个模块配置的一致性.     1.聚合     为 ...

  4. linux 脚本统计代码行数

    由于实际需求,需要统计开源产品的代码行数,so,以下命令统计*.c的行数. .h,.java  .同理 find . -name *.c|xargs wc -l

  5. 有关Option.inSamplSize 和 Compress 图片压缩

    1.图片占用内存:占用的内存 = 图片长度 * 图片宽度 * 单位像素占用的字节数 注: 图片长度和图片宽度就是图片在行列上的像素数量. 图片格式: ALPHA_8:表示8位Alpha位图,即A=8, ...

  6. java 图形化界面 布局管理器

    package Layout; import java.awt.*; import javax.swing.*; public class MyBorderLayout extends JFrame{ ...

  7. Android 反编译工具

    想必玩安卓的童鞋大多都知道,安卓的APK安装包是可以反编译出源代码的,如果开发人员发布时没有对其混淆等加密处理,反编译出来的代码几乎与真实的源代码一模一样. 想要反编译apk,需要用到apktool. ...

  8. CSS3学习笔记(2)—左右跳动的红心

    还在为无法表达内心澎湃的心情而着急吗?还在为制作跳动的心而烦恼吗?哈哈,今天我就把代码全部奉上,为你们追妹子添点贡献,下面来看最终的动态效果(事先说明一下:我用的截屏gif制作软件是绿色版的,所以gi ...

  9. div遮罩弹框口

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  10. powershell 扩展 (PSCX) 安装指南

    在玩ansible的过程中,使用win_unzip模块时powershell支持不了,需要安装PSCX对powershell进行扩展,随手记录下安装过程. 从官网下载的Pscx是一个zip压缩文件,解 ...