8月echarts记录-雷达图tooltip实现单轴显示、解决柱状/折线图点击非图表图形元素不会触发事件、多柱形图点击选中改变背景颜色等

8月echarts记录-雷达图tooltip实现单轴显示、解决柱状/折线图点击非图表图形元素不会触发事件、柱形图点击选中改变背景颜色等

  • 雷达图tooltip实现单轴显示
    • 问题描述
    • 解决方案
  • 解决柱状/折线图点击非图表图形元素不会触发事件
    • 问题描述
    • 解决方案
      • 1. 使用API convertFromPixel和getZr实现
        • API介绍
      • 2.使用ref 或者 echarts 中 getDom() 获取 ECharts 实例容器的 dom 节点,通过addEventListener对click事件进行监听
  • 多柱形图点击选中改变背景颜色
    • 问题描述
    • 解决方案
  • 解决echarts图表点击模块多次触发点击事件
    • 问题描述
    • 解决方案

雷达图tooltip实现单轴显示

问题描述

雷达图官方默认tooltip显示如图,在鼠标移动到某一条轴数据时显示所有指标的值。
需求却要求如图二展示,在鼠标移动到某个label上时用弹框显示所有轴该指标的值。
在这里插入图片描述

在这里插入图片描述

解决方案

设置两组radar,第一组正常显示,第二组设置为透明色
设置两组seriestooptip,使用第二组的数据和格式化展示

 radar: [{// 第一组的样式,自己定义center: ["50%", "50%"], // 外圆的位置radius: "65%",name: {textStyle: {color: "rgba(0,0,0,0.65)",fontSize: 12,fontWeight: 400,},},// TODO:indicator:   [{ text: "第一条轴" },{ text: "第二条轴" },{ text: "第三条轴" },{ text: "第四条轴" },{ text: "第五条轴" },],splitArea: {// 坐标轴在 grid 区域中的分隔区域,默认不显示。areaStyle: {// 分隔区域的样式设置。color: ["rgba(255,255,255,0)"], // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。},},axisLine: {// 指向外圈文本的分隔线样式lineStyle: {type: "dashed",color: "#DCDCDC", // 设置网格的颜色},},splitLine: {lineStyle: {type: "dashed",color: "#DCDCDC", // 设置网格的颜色},},},// 添加第二组 其样式全部隐藏{center: ["50%", "50%"], // 外圆的位置 设置一致radius: "100%", //设置最长 这样可以在圆心到顶点的位置都可以触发tooptipname: {show: false,},// TODO:indicator:   [{ text: "第一条轴" },{ text: "第二条轴" },{ text: "第三条轴" },{ text: "第四条轴" },{ text: "第五条轴" },],// 以下全透明splitArea: {show: false,},axisLine: {show: false,},splitLine: {show: false,},},]series: [{type: "radar",radarIndex: 0,tooltip: {show: false,},data: [{value: [99.18, 0.59, 99.94, 100, 100],name: "",itemStyle: {//此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现color: "#00E319",borderColor: "#FFF",borderWidth: 1,},areaStyle: {color: "#00e3191c",},},{value: [99.18, 0.6, 99.89, 100, 100],name: "",itemStyle: {//此属性的颜色和下面areaStyle属性的颜色都设置成相同色即可实现color: "#155AD1",borderColor: "#FFF",borderWidth: 1,},areaStyle: {color: "#155ad13d",},},],},{type: "radar",radarIndex: 1, //雷达图所使用的 radar 组件的 index。zlevel: 1, //必须设置 zlevel大的Canvas会放在zlevel小的Canvas的上面,这样鼠标移入这个维度的tooptip才能展示tooltip: {show: true,formatter: (params) => {const { data, color } = params.data;const mark = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;return `${params.name}<br/>${mark}昨日&nbsp;${data[0]}%<br/>${mark}前日&nbsp;${data[1]}%<br/>&nbsp;&nbsp;&nbsp;&nbsp;环比&nbsp;${data[2]}%`;},},data: [// 按照单个维度画5次,每次只有对应维度有值,即value分别设置为[6200, null, null, null, null] ,[null, 6200, null, null, null],[null, null, 6200, null, null],[null, null, null, 6200, null],[null, null, null, null, 6200]这种{value: [6200, 0, 0, 0, 0],data: [99.23, 99.19, 0.04],name: "第一个指标",// 同样的,隐藏样式itemStyle: {color: "transparent",},areaStyle: {color: "transparent",},},{value: [0, 6200, 0, 0, 0],data: [0.92, 1.09, -15.6],name: "第二个指标",itemStyle: {color: "transparent",},areaStyle: {color: "transparent",},},{value: [0, 0, 6200, 0, 0],data: [99.7, 98.54, 1.18],name: "第三个指标",itemStyle: {color: "transparent",},areaStyle: {color: "transparent",},},{value: [0, 0, 0, 6200, 0],data: [98.38, 99.96, -1.58],name: "第四个指标",itemStyle: {color: "transparent",},areaStyle: {color: "transparent",},},{value: [0, 0, 0, 0, 6200],data: [100, 92.13, 8.54],name: "第五个指标",itemStyle: {color: "transparent",},areaStyle: {color: "transparent",},},],},],

解决柱状/折线图点击非图表图形元素不会触发事件

问题描述

在这里插入图片描述

  • 使用官方的点击click事件,点我们想要点击的时候,发现折线图只有移动到点上、柱状图只有移动到柱子上才生效,其余都无法点击。
  • 在数据差别很大的图形中,想准确点击数据较小甚至为0的图形是非常困难的,这就使得一些交互体验不是很好。
    在这里插入图片描述在这里插入图片描述

解决方案

1. 使用API convertFromPixel和getZr实现

  • 代码实现
       this.areaChart.getZr().off("click"); // 阻止一次点击事件this.areaChart.getZr().on("click", (params) => {const pointInPixel = [params.offsetX, params.offsetY]; //获取到鼠标点击位置if (this.areaChart.containPixel("grid", pointInPixel)) { //使用containPixel API判断点击位置是否在显示图形区域let xIndex = this.areaChart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX,params.offsetY,])[0]; //使用API convertFromPixel获取点击位置对应的x轴数据的索引值const currentObj = chartData[xIndex]; //chartData为数据源 取点击的该数据//执行想要执行的方法}});// 将可以响应点击事件的范围内,鼠标样式设为pointerthis.areaChart.getZr().on("mousemove", (params) => {var pointInPixel = [params.offsetX, params.offsetY];if (this.areaChart.containPixel("grid", pointInPixel)) {//若鼠标滑过区域位置在当前图表范围内 鼠标设置为小手this.areaChart.getZr().setCursorStyle("pointer");}});
API介绍
  • getZr()用于获取Echarts实例中的zrender实例。zrender是一个轻量级的Canvas绘图库,Echarts使用zrender来进行图表的绘制
  • containPixel用于判断一个点是否在指定的图形元素内部。
 // 用于判断是否在某一个坐标上  使用containPixel 方法支持的类型有 grid, polar, geo, series-map, series-graph, series-pie。
// 判断 [23, 44] 点是否在 geoIndex 为 0 的 geo 坐标系上。
chart.containPixel('geo', [23, 44]); // 'geo' 等同于 {geoIndex: 0}
// 判断 [23, 44] 点是否在 gridId 为 'z' 的 grid 上。
chart.containPixel({gridId: 'z'}, [23, 44]);
// 判断 [23, 44] 点是否在 index 为 1,4,5 的系列上。
chart.containPixel({seriesIndex: [1, 4, 5]}, [23, 44]);
// 判断 [23, 44] 点是否在 index 为 1,4,5 的系列或者 gridName 为 'a' 的 grid 上。
chart.containPixel({seriesIndex: [1, 4, 5], gridName: 'a'}, [23, 44]);
  • convertFromPixel是ECharts(百度开发的一个数据可视化库)中的一个方法,用于将像素坐标转换为数据坐标。
echartsInstance.convertFromPixel(coordinateSystem, pixelPoint); 
//echartsInstance ECharts实例 
//coordinateSystem 坐标系实例
//pixelPoint 像素坐标点,可以是一个数组或者一个对象
//该方法返回一个数组,表示转换后的数据坐标点。 如要将鼠标点击事件的像素坐标转换为数据坐标,可以使用以下代码: 
myChart.on('click', function (params) { var pointInPixel = [params.offsetX, params.offsetY]
}
  • getZr().setCursorStyle(‘pointer’) 用于设置鼠标指针样式的,通过 Echarts 库中的 getZr() 方法获取画布对象,然后调用其 setCursorStyle() 方法来设置鼠标指针的样式。例如:default, pointer

2.使用ref 或者 echarts 中 getDom() 获取 ECharts 实例容器的 dom 节点,通过addEventListener对click事件进行监听

由于getZr()属于私有API存在过多不稳定因素,也可以选择用这种方法

    chart = echarts.init(refChart.value!)// chart.getZr().on('click', clickHover)this.$refs.areaChart?.addEventListener('click',  (params) => {// 获取鼠标位移const pointInPixel = [params.offsetX, params.offsetY]// 判断坐标是否在grid上if (chart.containPixel('grid', pointInPixel)) {//....逻辑同第一种方法}

多柱形图点击选中改变背景颜色

问题描述

点击多柱状图的柱子时,改变柱子的背景颜色,柱子颜色不改变
在这里插入图片描述

解决方案

设置yAxis的splitArea-areaStyle属性,点击时改变该项的color,再赋值

     this.areaChart.on("click", (param) => {//xData 数据的长度 项的长度let colors = Array.from(Array(xData.length).keys()).map((v) => {return "rgba(51, 154, 240, 0)";});colors[param.data.index - 1] = "rgba(51, 154, 240, 0.4)";barChartOption.yAxis.splitArea = {show: true,areaStyle: {//多类目时,可以使用数组设置颜色color: colors,},};this.areaChart.setOption(barChartOption);});

解决echarts图表点击模块多次触发点击事件

问题描述

点击柱状图的柱子或饼图中的模块时弹出详情,但接口调了两次。

解决方案

在点击事件前阻止一次点击事件

this.areaChart.off("click"); // 阻止一次点击事件
this.areaChart.on("click", (params) => {}); // 模块点击事件

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

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

相关文章

Redis17-服务端优化

目录 持久化配置 慢查询 什么是慢查询 如何查看慢查询 命令及安全配置 内存配置 集群优化 持久化配置 Redis的持久化虽然可以保证数据安全&#xff0c;但也会带来很多额外的开销&#xff0c;因此持久化请遵循下列建议&#xff1a; 用来做缓存的Redis实例尽量不要开启持…

一文讲清三极管

说明 下图是一个NPN型的三极管 由于发射极正偏,发射极的多数载流子(无论是P的空穴还是N的自由电子)会不断扩散到基极,并不断从电源补充多子,形成发射极电流IE。由于基极很薄,且基极的多子浓度很低,所以从发射极扩散过来的多子只有很少一部分和基极的多子复合形成基极电…

进程waitwaitpid、线程

一、wait wait功能 1、获取子进程退出状态&#xff0c;分析子进程是否已经退出&#xff08;变成僵尸态&#xff09; 2、回收资源&#xff0c;让僵尸态子进程销毁 wait本身是一个阻塞操作&#xff0c;会使调用者阻塞 2、宏&#xff1a; &#xff08;1&#xff09;WIFEXITE…

加密软件排行榜前五名,为你的数据安全保驾护航

加密软件成为了保护数据中不可缺少的一部分&#xff0c;这是一个重要的存在&#xff0c;能够保护机密文件&#xff0c;防止泄密。加密软件就是专门用于保护数据安全的&#xff0c;近年来多个加密软件的出现&#xff0c;使用户在挑选加密软件时多了一些选择&#xff0c;同时也成…

坐牢第二十五天20240813(网络通信)

一、TCP机械臂测试 通过w(红色臂角度增大)s&#xff08;红色臂角度减小&#xff09;d&#xff08;蓝色臂角度增大&#xff09;a&#xff08;蓝色臂角度减小&#xff09;按键控制机械臂 注意&#xff1a;关闭计算机的杀毒软件&#xff0c;电脑管家&#xff0c;防火墙 1&#x…

小阿轩yx-Docker Compose与私有仓库部署

小阿轩yx-Docker Compose 与私有仓库部署 Docker 的网络模式 Docker 四种网络模式 网络模式参数说明host 模式- - nethost 容器和宿主机共享 Network namespace container 模式- - net{id} 容器和另外一个容器共享 Network namespace。 kubernetes 中的pod就是多个容器共享一…

于博士Cadence视频教程学习笔记备忘

标签&#xff1a;PCB教程 PCB设计步骤 cadence教程 Allegro教程 以下是我学习该视频教程的笔记&#xff0c;记录下备忘&#xff0c;欢迎大家在此基础上完善&#xff0c;能回传我一份是最好了&#xff0c;先谢过。 备注&#xff1a; 1、未掌握即未进行操作 2、操作软件是15.…

论文阅读笔记:ST-MetaNet-2

目录 预备知识 定义1&#xff1a;城市交通 定义2&#xff1a;Geo-graph属性 问题1 方法 RNN 元学习器 元图注意力网络 元循环神经网络 预备知识 在本节中&#xff0c;我们介绍定义和问题陈述。为简洁起见&#xff0c;我们在表1中提供了一个注释表。 假设有个位置&…

40.【C语言】指针(重难点)(E)

目录 13.指针的使用和传址调用 14.数组名的理解 *数组名就是数组首元素的地址 *两个例外 *使用指针访问数组 *一维数组的传参本质 往期推荐 承接上篇39.【C语言】指针&#xff08;重难点&#xff09;&#xff08;D&#xff09; 13. 指针的使用和传址调用 见29.【C语言】函数系…

Android开发-使用FFmpeg-Android进行音视频处理

使用 FFmpeg-Android 进行音视频处理 1. 前言2. FFmpeg-Android 简介3. 功能介绍及实现3.1. 视频字幕添加Kotlin 代码示例&#xff1a;3.2. 尺寸剪切Kotlin 代码示例&#xff1a;3.3. 添加或去除水印Kotlin 代码示例&#xff1a;3.4. 时长截取Kotlin 代码示例&#xff1a;3.5. …

抠图软件哪个好用?3款免费抠图软件!一键智能抠图,高清又高效小白必备!

前言 目前市场上有众多出色的抠图软件&#xff0c;能够高效地完成图片处理工作。在这里推荐三款免费的抠图工具&#xff0c;它们都是非常省力、灵活的一键智能抠图利器&#xff0c;值得收藏&#xff01; 抠图软件一&#xff1a;千鹿设计助手 第一步&#xff0c;打开“千鹿设计…

安全无忧!Windows7全补丁旗舰版:集成所有补丁!

今日&#xff0c;系统之家小编给大家分享集成所有补丁的Windows7旗舰版系统&#xff0c;集成至2023.12所有官方补丁&#xff0c;修复了系统高危漏洞&#xff0c;让大家时刻都能舒心地展开操作。系统基于微软 Windows 7 2009 SP1 旗舰版进行离线制作&#xff0c;全新升级的优化方…

linux文件查找--locate和find命令详解

在文件系统上查找符合条件的文件 文件查找:1.非实时查找(数据库查找):locate2.实时查找: find应用&#xff1a;生产环境中查找到系统中占用磁盘空间较大且时间比较久的大日志文件&#xff0c;对这个较大的日志文件做处理&#xff08;删除移走等)&#xff0c;防止它占用更多的磁…

如何判断监控设备是否支持语音对讲

目录 一、大华摄像机 二、海康摄像机 三、宇视摄像机 一、大华摄像机 注意&#xff1a;大华摄像机支持跨网语音对讲&#xff0c;即设备和服务器可以不在同一网络内&#xff0c;大华设备的语音通道填写&#xff1a;34020000001370000001 配置接入示例&#xff1a; 音频输入…

vue3重构一款仿饿了没APP实战项目

最近重构了一款比较流行的app项目&#xff0c;采用的是vue3做的h5项目&#xff0c;细节知识点很多&#xff0c;滚动&#xff0c;动画&#xff0c;数据通信&#xff0c;状态缓存等&#xff0c;想要学习交流的小伙伴赶紧行动起来。 图1 图2 图1 图2 图3 图4 图5 图5

若依框架中的mybatis依赖在哪里?

对于刚刚接触若依框架的朋友,可能会比较懵逼,因为他可能在依赖文件中没有找到mybatis的依赖是在什么地方引入的,所以本章教程,就告诉你这个依赖是在什么地方引入的。 在ruoyi-common模块中的pom.xml 存在一个pagehelper-spring-boot-starter <!-- pagehelper 分页插件 -…

docker资源控制与数据卷

docker数据卷 容器和宿主机之间数据共享---------挂载卷------------容器内的目录和宿主机的目录进行挂载。实现数据文件共享。 容器的生命周期有限&#xff0c;一旦重启所有对容器内部文件数据修改以及保存的数据都会被初始化&#xff0c;为了防止数据的丢失&#xff0c;重要…

【大模型系列篇】Transformers综述--邱锡鹏

论文标题&#xff1a;A Survey of Transformers 论文作者&#xff1a;Tianyang Lin, Yuxin Wang, Xiangyang Liu, Xipeng Qiu 论文链接&#xff1a;https://arxiv.org/abs/2106.04554 Transformer 在许多人工智能领域&#xff08;如自然语言处理、计算机视觉和音频处理&#…

力扣热题100_二叉树_230_二叉搜索树中第K小的元素

文章目录 题目链接解题思路解题代码 题目链接 230. 二叉搜索树中第K小的元素 给定一个二叉搜索树的根节点 root &#xff0c;和一个整数 k &#xff0c;请你设计一个算法查找其中第 k 小的元素&#xff08;从 1 开始计数&#xff09;。 示例 1&#xff1a; 输入&#xff1a…

深入学习零拷贝

在学习中遇到了一个问题就是什么是零拷贝&#xff0c;因此学习之后以此来记录一下。 零拷贝、直接I/O、异步I/O等&#xff0c;优化的目的就是为了提高系统的吞吐量&#xff0c;减少访问磁盘次数。访问磁盘的速度会比读写内存会慢十倍以上。因此就需要提高它的读写速度。 什么…