echarts笛卡尔坐标系热力图当坐标及数据为小数时

在这里插入图片描述

// X坐标轴
const xValue = ['6','6.5','7','7.5','8','8.5','9','9.5','10'];
//Y坐标轴
const yValue = ['1.5','2','2.5','3','3.5','4','4.5','5','5.5','6'];
// 需要展示的值【X坐标,Y坐标,展示的数值】
const data = [[6.5,2,4], [7, 2.5, 10]] ;
// 坐标轴及数值存在小数时,需要进行转化,否则当数据过多时会出现覆盖问题
const  z = data.map(function (item) {const xAx = ['6','6.5','7','7.5','8','8.5','9','9.5','10'];const yAx = ['1.5','2','2.5','3','3.5','4','4.5','5','5.5','6'];const xValue = item[0].toString();const yValue = item[1].toString();const xIndex = xAx.indexOf(xValue);const yIndex = yAx.indexOf(yValue);return [xIndex, yIndex, item[2] || '-'];});
option = {tooltip: {position: 'top'//tip展示的位置},grid: {height: '50%',//echarts高度top: '10%',//距离顶部的距离},xAxis: {type: 'category',data: xValue,splitArea: {show: true//斑马纹展示}},yAxis: {type: 'category',data: yValue,splitArea: {show: true//斑马纹展示}},visualMap: {min: 0,//最小值max: 50,//最大值calculable: true,//是否显示数值范围orient: 'horizontal',left: 'center',bottom: '15%'},series: [{name: 'Punch Card',type: 'heatmap',data: z,label: {show: true//是否在图上显示数值},emphasis: {itemStyle: {shadowBlur: 10,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/217264.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Eclipse+Tomcat+Mysql开发的研究生信息教务系统

基于Eclipse的研究生教务系统 项目介绍💁🏻 该研究生教务系统是一款集学生信息管理、学院信息维护、学生类别信息维护、专业信息维护、教师信息导入、课程信息导入及老师信息导入等功能于一体的教育管理软件。它以高效、便捷、准确的方式处理教务管理工作…

vulnhub靶机Aragog-1.0.2

靶机下载:https://download.vulnhub.com/harrypotter/Aragog-1.0.2.ova 主机发现 目标133 端口扫描 端口服务扫描 漏洞扫描 去看web 就一个图片 直接目录扫描 有点东西一个一个看(blog里面有东西) 这里面直接能看到wordpress 直接用wpscan…

iview/view-design+vue2实现表单校验

1.iview/view-design介绍 iview是一款基于Vue.js的开源UI组件库,提供了丰富的组件和样式,支持响应式布局和多语言环境。它使用了最新的前端技术,如ES6、Webpack和SASS,让开发者可以快速构建高质量的Web应用程序。 View-design是一…

bop数据合并到COCO

bop数据合并到COCO JSON转TXT重命名txt文件中类别信息的转换 JSON转TXT import json import os,globcategories [{"id": 12,"name": "OREO","supercategory": "icbin"},{"id": 16,"name": "Paper…

JAVA序列化和反序列化

JAVA序列化和反序列化 文章目录 JAVA序列化和反序列化序列化什么是序列化?为什么要进行序列化?如何将对线进行序列化具体实现过程 完整代码 序列化 什么是序列化? 就是将对象转化为字节的过程 为什么要进行序列化? 让数据更高效的传输让数据更好的…

ACL权限

ACL权限 目录: 1. 什么是ACL 2. 操作步骤 1. 什么是ACL ACL是Access Control List的缩写,即访问控制列表 每个项目成员在有一个自己的项目目录,对自己的目录有完全权限 项目组中的成员对项目目录也有完全权限 其他人对项目目录没有…

Spring Boot配置文件 Spring日志文件相关的知识

在上文中,小编带领大家创建了一个Spring Boot项目,并且成功的执行了第一个SPring Boot项目(在网页上运行hello world) 那么,本文的主要作用便是带领大家走进:Spring Boot配置文件 && Spring日志文件…

基于C#实现外排序

一、N 路归并排序 1.1、概序 我们知道算法中有一种叫做分治思想,一个大问题我们可以采取分而治之,各个突破,当子问题解决了,大问题也就 KO 了,还有一点我们知道内排序的归并排序是采用二路归并的,因为分治…

数据丢失抢救神器之TOP10 Android 数据恢复榜单

在快节奏的数字时代,我们的生活越来越与智能手机交织在一起,使它们成为重要数据和珍贵记忆的存储库。由于意外删除、软件故障或硬件故障而丢失数据可能是一种痛苦的经历。值得庆幸的是,技术领域提供了 Android 数据恢复软件形式的解决方案。这…

SSL握手失败的解决方案

一、SSL握手失败的原因: 1,证书过期:SSL证书有一个有效期限,如果证书过期,就会导致SSL握手失败。 2,证书不被信任:如果网站的SSL证书不被浏览器或操作系统信任,也会导致SSL握手失败…

市场被套牢,没有了解积累和分配,昂首资本一一介绍

很多投资者对市场中的积累和分配的概念不是很清楚,下面昂首资本将一一介绍。 积累意味着尽可能多地买入筹码,而不大幅抬高价格,直到在你买入时的价格水平上没有或几乎没有筹码。这种买入通常发生在市场熊市之后,此时有最佳买入价…

电路 buck-boost相关知识

BUCK-BOOST 文章目录 BUCK-BOOST前言一、DC-DC工作模式电容电感特性伏秒积平衡原理 二、BUCK电路三、BOOST电路四、BUCK-BOOST电路总结 前言 最近需要用到buck-boost相关的电路知识,于是便写下这篇文章复习一下。 一、DC-DC 在学习buck-boost电路之前我们先来看一…