vue+echart :点击趋势图中的某一点或是柱状图,出现弹窗,并传输数据

样式

在趋势图中点击某一个柱状图,出现下面的弹窗
在这里插入图片描述
在这里插入图片描述

代码实现

主要是在趋势图页面代码中,在初始化趋势图的设置中,添加对趋势图监听的点击方法

drawChart() {const chartData = this.chartData;let option = {};if (!chartData.xData?.length) {option = {title: {text: "暂无数据",x: "center",y: "center",textStyle: {fontSize: 16,fontWeight: "normal",color: "rgba(0, 0, 0, 0.5)",},},};} else {option = {tooltip: {........}},grid: {top: "12%",bottom: "18%",left: 27,right: 35,containLabel: true,},legend: {bottom: 0,lineStyle: {type: "solid",},},xAxis: [......],yAxis: this.yAxisContent,series: this.seriesContent,};this.chart.clear();this.chart.setOption(option);this.chart.resize();// 重点的代码, 当点击时,获取到params参数this.chart.on("click", (params) => {this.contentByTooltip(params);});},// 当点击趋势图时, 调用的方法
contentByTooltip(params) {// 设置传向弹窗的propsthis.loginFailData = {}this.loginFailData.startTime = this.chartData.startTime;this.loginFailData.endTime = this.chartData.endTime;  this.loginFailData.trendType = this.chartType;this.loginFailData.districtCode = this.paramsData.districtCode;this.loginFailData.provinceCode = this.paramsData.provinceCode;this.loginFailData.areaType = this.paramsData.areaType;this.loginFailData.loginType = this.paramsData.loginType;this.loginFailData.xdata = params.name;this.loginFailData.data = { label: params.name, value: params.data };//设置弹窗的显隐this.loginFailDialogVisible = true;},// template 弹窗的组件以及传值, 这儿使用v-if来控制弹窗的显示与隐藏,避免首次加载页面过慢<LoginFailDialogv-if="loginFailDialogVisible":loginFailData="loginFailData"loginFailMark="loginTrend"@handleClose="loginFailDialogVisible = false"></LoginFailDialog>

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

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

相关文章

Swift 类和结构体

类和结构体 一、结构体和类对比1、类型定义的语法2、结构体和类的实例3、属性访问4、结构体类型的成员逐一构造器 二、结构体和枚举是值类型三、类是引用类型1、恒等运算符2、指针 结构体和类作为一种通用而又灵活的结构&#xff0c;成为了人们构建代码的基础。你可以使用定义常…

python mp3转mp4工具

成品UI 安装moviepy库 pip install moviepy 转换demo from moviepy.editor import *# 创建一个颜色剪辑&#xff0c;时长与音频相同 audioclip AudioFileClip(r"C:\Users\Administrator\PycharmProjects\pythonProject44\test4\赵照 - 灯塔守望人.mp3") videoclip…

node-nass安装踩坑

编译DSS的前端&#xff0c;用1.1.4编译&#xff0c;没有问题&#xff0c;用1.1.1版本就有问题&#xff0c;一直是node-gyp有问题&#xff0c;怎么也解决了不了。 后来检查发现&#xff0c;是因为要安装node-nass才导致出现node-gyp的问题。 而1.1.4没问题&#xff0c;是因为我…

头歌c语言实验答案

由于头歌C语言实验的具体内容和题目可能随时间变化&#xff0c;我无法直接提供特定实验的完整答案。但我可以基于参考文章中的内容和结构&#xff0c;给出一个通用的回答格式&#xff0c;并结合相关信息进行说明。 通用回答格式 实验名称和描述 实验名称&#xff1a;头歌C语言…

用Python Pygame做的一些好玩的小游戏

有些游戏的代码比较长就不公布了 1.简简单单 1.疯狂的鸡哥 你要准备的图片&#xff1a; 命名为&#xff1a;ji.png 代码&#xff1a; import pygame import random as r pygame.init() pygame.display.set_caption(aaa) pm pygame.display.set_mode((800,600))class Ls(py…

Java进阶学习笔记15——接口概述

认识接口&#xff1a; Java提供了一个关键字Interface&#xff0c;用这个关键字我们可以定义一个特殊的结构&#xff1a;接口。 接口不能创建对象。 注意&#xff1a;接口不能创建对象&#xff0c;接口是用来被类实现&#xff08;implements&#xff09;的&#xff0c;实现接口…

中国电子学会(CEIT)2023年05月真题C语言软件编程等级考试三级(含详细解析答案)

中国电子学会(CEIT)考评中心历届真题(含解析答案) C语言软件编程等级考试三级 2023年05月 编程题五道 总分:100分一、找和为K的两个元素(20分) 在一个长度为n (n < 1000)的整数序列中,判断是否存在某两个元素之和为k。 时间限制: 1000 内存限制: 65536 输入 …

基于Spring Boot的高校图书馆管理系统

项目和论文都有企鹅号2583550535 基于Spring Boot的图书馆管理系统||图书管理系统_哔哩哔哩_bilibili 第1章 绪论... 1 1.1 研究背景和意义... 1 1.2 国内外研究现状... 1 第2章 相关技术概述... 2 2.1 后端开发技术... 2 2.1.1 SpringBoot 2 2.1.2 MySQL.. 2 2.1.3 My…

unity中如何插入网页

在Unity中插入自己的网页通常是通过使用Unity的WebGL构建目标和HTML页面来实现的。以下是一些步骤&#xff1a; 构建你的Unity项目为WebGL&#xff1a;在Unity中&#xff0c;选择Build Settings&#xff08;构建设置&#xff09;&#xff0c;将Platform&#xff08;平台&#x…

vr商品全景展示场景编辑软件的优点

3D模型展示网站搭建编辑器以强大的3D编辑引擎和逼真的渲染效果&#xff0c;让您轻松实现模型展示的优化。让用户通过简单的操作&#xff0c;就能满足个人/设计师/商户多样化展示的需求&#xff0c;让您的模型成为独一无二的杰作。 3D模型展示网站搭建编辑器采用国内领先的实时互…

java继承使用细节二

构造器 主类是无参构造器时会默认调用 public graduate() {// TODO Auto-generated constructor stub也就是说我这里要用构造器会直接调用父类。它是默认看不到的 &#xff0c;System.out.println("graduate");} 但当主类是有参构造器如 public father_(int s,doubl…

c语言:将小写字母转换为大写字母

//将小写字母转换为大写字母 #include <stdio.h> #include <ctype.h> int main() { char arr[]"you are low"; int i0; while(arr[i]) { if(islower(arr[i])) { arr[i]arr[i]-32; } i; } printf("%s\n",arr); return 0; }

微调Llama3实现在线搜索引擎和RAG检索增强生成功能

视频中所出现的代码 Tavily SearchRAG 微调Llama3实现在线搜索引擎和RAG检索增强生成功能&#xff01;打造自己的perplexity和GPTs&#xff01;用PDF实现本地知识库_哔哩哔哩_bilibili 一.准备工作 1.安装环境 conda create --name unsloth_env python3.10 conda activate …

周末总结(2024/05/25)

工作 人际关系核心实践&#xff1a; 要学会随时回应别人的善意。执行时间控制在5分钟以内 坚持每天早会打招呼 工作上的要点 现状&#xff08;接受破烂现状&#xff0c;改变状态&#xff09; - 这周使用和执行了生产环境发布流程(2天&#xff09;&#xff0c;2天时间在写Java…

大胆预测:计算机将要回暖

中概财报集体亮眼 虽然最近几天恒指&#xff08;港股&#xff09;稍有回落&#xff0c;但年线仍有 9% 的上涨。 过去三年&#xff0c;恒指分别下跌 14.08%、15.46% 和 13.82%。 而在近期&#xff0c;国内各大互联网都公布了财报&#xff0c;别看各个大厂的作妖不断&#xff0c;…

[前端|vue] v-if 和v-show的区别,为什么功能会类似

v-if 和 v-show 都是 Vue 中用于条件渲染的指令&#xff0c;但它们之间存在几个关键区别&#xff0c;这些区别导致了它们在不同场景下的适用性也有所不同&#xff1a; v-if 的特点&#xff1a; 条件渲染&#xff1a;v-if 是一个动态的条件渲染指令&#xff0c;它会根据表达式的…

dubbo复习:(8)使用sentinel对服务进行降级

一、下载sentinel-dashboard控制台应用并在8080端口启动 二、项目添加springboot 和dubbo相关依赖&#xff08;降级规则并未持久化&#xff0c;如果需要持久化&#xff0c;如果需要持久化降级规则&#xff0c;只需增加nacos相关依赖并在nacos中进行配置&#xff0c;然后配置app…

会话机制:Session

1、什么是会话&#xff1a; 会话对应的英语单词&#xff1a;session 用户打开浏览器&#xff0c;进行一系列操作&#xff0c;然后最终将浏览器关闭&#xff0c;这个整个过程叫做&#xff1a;一次会话。会话在服务器端也有一个对应的java对象&#xff0c;这个java对象叫做&…

使用Python Tkinter创建GUI应用程序

大家好&#xff0c;当我们谈及使用Python Tkinter创建GUI应用程序时&#xff0c;我们涉及的不仅是技术和代码&#xff0c;更是关于创造力和用户体验的故事。Tkinter作为Python标准库中最常用的GUI工具包&#xff0c;提供了丰富的功能和灵活的接口&#xff0c;让开发者能够轻松地…

每日一题(4)——String连接,替换,比较,查找等

主要是一些字符串的连接&#xff0c; 替换&#xff0c;比较&#xff0c;去首尾空格&#xff0c;查找等操作&#xff1b; class ZiFu{public static void main(String []args){String s1"hello world";String s2new String("hello,world");s2" "…