实现el-table操作列点击弹出echarts

在这里插入图片描述

代码:
<el-table-column :width="90"><template #default="scope"><el-popover placement="left-end" width="550" trigger="click"><div><div style="font-size: 18px; margin-left: 10px">7日传播情况</div><div:id="scope.row.index":style="{ width: '500px', height: '350px' }"></div></div><template #reference><el-button:key="scope.$index + scope.row.id + '0'"@click="handleClick(scope.row)"type="primary"linksize="small">分析</el-button></template></el-popover></template></el-table-column>
方法:
let myChart1 = null;
let myChart2 = null;
let myChart3 = null;let domId = ref("");
const handleClick = (row) => {domId.value = row.index;mychart();
};
const mychart = () => {setTimeout(() => {let myChart = "myChart" + domId.value;myChart = echarts.init(document.getElementById(domId.value));// 绘制图表myChart.setOption({grid: {// 直角坐标系内绘图网格left: "30", //grid 组件离容器左侧的距离,//left的值可以是80这样具体像素值,//也可以是'80%'这样相对于容器高度的百分比top: "10%",right: "0",bottom: "0",containLabel: true, //gid区域是否包含坐标轴的刻度标签。为true的时候,// left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的//所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景},tooltip: {trigger: "item",formatter: function (params) {let str1 = params.data.name;let str2 = params.data.num;let str = str1 + "<br />" + "传播力:" + str2;return str;},},xAxis: {type: "category",data: ["2016", "2017", "2018", "2019", "2020", "2021", "2022"],},yAxis: {type: "value",name: "单位:万",nameTextStyle: {color: "#5c5c5c",padding: [0, 50, 0, 0],},},series: [{name: "传播力",type: "line",data: [{name: "第一天",value: 193,num: 193321.33,},{name: "第二天",value: 204,num: 204556.73,},{name: "第三天",value: 175,num: 175284.06,},{name: "第四天",value: 218,num: 218246.24,},{name: "第五天",value: 231,num: 231092.75,},{name: "第六天",value: 266,num: 266247.24,},{name: "第七天",value: 335,num: 335274.95,},],},],});window.onresize = function () {// 自适应大小myChart.resize();};}, 200);
};

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

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

相关文章

IDEA报错处理

问题1 IDEA 新建 Maven 项目没有文件结构 pom 文件为空 将JDK换成1.8后解决。 网络说法&#xff1a;别用 java18&#xff0c;换成 java17 或者 java1.8 都可以&#xff0c;因为 java18 不是 LTS 版本&#xff0c;有着各种各样的问题。。

Hadoop和Spark的区别

Hadoop 表达能力有限。磁盘IO开销大&#xff0c;延迟度高。任务和任务之间的衔接涉及IO开销。前一个任务完成之前其他任务无法完成&#xff0c;难以胜任复杂、多阶段的计算任务。 Spark Spark模型是对Mapreduce模型的改进&#xff0c;可以说没有HDFS、Mapreduce就没有Spark。…

2023年全球运维大会(GOPS深圳站)-核心PPT资料下载

一、峰会简介 1、大会背景与概述 全球运维大会&#xff08;GOPS&#xff09;是运维领域最具影响力的国际盛会&#xff0c;每年都会汇聚世界各地的运维专家、企业领袖、技术爱好者&#xff0c;共同探讨运维技术的最新发展、最佳实践以及面临的挑战。2023年GOPS深圳站作为该系列…

2023建筑行业薪资趋势?如何提高建筑设计效率呢?

12月6日&#xff0c;国外著名建筑可视化网站CGarchitect公布了其2023年建筑可视化薪资调查结果&#xff0c;详细描述了行业内的薪资趋势。 调查表明&#xff0c;占比较高的是有16.04%的年收入低于10000美元&#xff08;约71000人民币&#xff09;&#xff0c;其次是11.75%的受…

【C++】封装:练习案例-点和圆的关系

练习案例&#xff1a;点和圆的关系 设计一个圆形类&#xff08;Circle&#xff09;&#xff0c;和一个点类&#xff08;Point&#xff09;&#xff0c;计算点和圆的关系。 思路&#xff1a; 1&#xff09;创建点类point.h和point.cpp 2&#xff09;创建圆类circle.h和circle…

20、WEB攻防——PHP特性缺陷对比函数CTF考点CMS审计实例

文章目录 一、PHP常用过滤函数&#xff1a;1.1 与1.2 md51.3 intval1.4 strpos1.5 in_array1.6 preg_match1.7 str_replace CTFshow演示三、参考资料 一、PHP常用过滤函数&#xff1a; 1.1 与 &#xff1a;弱类型对比&#xff08;不考虑数据类型&#xff09;&#xff0c;甚至…

计算机网络:自顶向下第八版学习指南笔记和课后实验--运输层

记录一些学习计算机网络:自顶向下的学习笔记和心得 Github地址&#xff0c;欢迎star ⭐️⭐️⭐️⭐️⭐️ 运输层 TCP&#xff1a; 传输控制协议 报文段 UDP&#xff1a; 用户数据包协议 数据报 将主机间交付扩展到进程间交付被称为运输层的多路复用与多路分解 将运输层…

RocketMq查看消息轨迹

查看消息轨迹 1.修改配置文件 broker的启动文件加上消息轨迹相关配置 ##if msg tracing is open,the flag will be true traceTopicEnabletrue2.启动broker 使用broker-a.properties配置文件后台启动Broker。 nohup mqbroker -c /usr/local/rocketmq/rocketmq-all-4.9.1-bin…

智能五子棋1

*一、项目需求* 五子棋是一种简单的黑白棋&#xff0c;历史悠久&#xff0c;起源于中国&#xff0c;后传入日本&#xff0c;在日本被称为“连珠”&#xff0c;是一种老少皆宜的益智游戏。 人工智能五子棋系统的目标用户是一切想致力于研究人机对弈算法理论的相关研究者和一切…

关于《企业数字化平台》

大家好&#xff0c;开始我们《企业数字化平台》系列栏目&#xff0c;首先做一个简短的自我介绍&#xff0c;Duster是本人现在的笔名&#xff0c;曾用笔名尘埃&#xff0c;写了本书《生活新视界》&#xff0c;如果有缘的话&#xff0c;希望您读到他&#xff0c;如果您能读懂&…

Android Stuido报错处理

仅用作报错记录。防止以后出项问题不知如何解决。 报错1 Dependency‘androidx.annotation:xx requires libraries and applications … 需要修改CompileSDKVersion更改为报错中提示的版本 打开项目build.gradle文件&#xff0c;将compileSdk和targetSdk修改为报错中提示的版…

2020 年网络安全应急响应分析报告

2020 年全年奇安信集团安服团队共参与和处置了全国范围内 660起网络安全应急响应事件。2020 年全年应急响应处置事件行业 TOP3 分别为:政府部门行业(146 起)医疗卫生行业(90 起)以及事业单位(61 起&#xff0c;事件处置数分别占应急处置所有行业的 22.1%、13.6%、9.2%。2020 年…

防篡改、控权限,一键搞定!迅软DLP助您轻松应对企业外发风险

由于电子文档传播性强&#xff0c;政企单位在与客户或合作伙伴分享重要资料时&#xff0c;存在非法篡改和无序传播的风险。因此&#xff0c;为了保护自身利益并确保与外界的安全交流&#xff0c;对外发文件的有效安全管控变得至关重要。 迅软DLP提供了针对外发文件的严格安全管…

OAuth 2.0进阶指南:解锁高级功能的秘密

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 OAuth 2.0进阶指南&#xff1a;解锁高级功能的秘密 前言令牌管理与刷新令牌的生命周期&#xff1a;刷新机制&#xff1a;有效管理访问令牌&#xff0c;防止令牌泄漏的方法&#xff1a; 客户端凭证客户…

宝塔Linux:部署His医疗项目通过jar包的方式

&#x1f4da;&#x1f4da; &#x1f3c5;我是默&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; ​​​ &#x1f31f;在这里&#xff0c;我要推荐给大家我的专栏《Linux》。&#x1f3af;&#x1f3af; &#x1f680;无论你是编程小白&#xff0c;还是有…

OpenAI发布官方提示工程指南和示例

OpenAI提供了一系列策略和技巧&#xff0c;以帮助用户更有效地使用ChatGPT。这些方法可以单独使用也可以组合使用&#xff0c;以获得更好的效果。官方给出了6 个大提示策略&#xff08;并给出了具体教程和示例&#xff09; 主要策略&#xff1a; 1、清晰的指令&#xff1a; 告…

微信小程序校园跑腿系统怎么做,如何做,要做多久

​ 在这个互联网快速发展、信息爆炸的时代&#xff0c;人人都离不开手机&#xff0c;每个人都忙于各种各样的事情&#xff0c;大学生也一样&#xff0c;有忙于学习&#xff0c;忙于考研&#xff0c;忙着赚学分&#xff0c;忙于参加社团&#xff0c;当然也有忙于打游戏的&#x…

快速排序(一)

目录 快速排序&#xff08;hoare版本&#xff09; 初级实现 问题改进 中级实现 时空复杂度 高级实现 三数取中 快速排序&#xff08;hoare版本&#xff09; 历史背景&#xff1a;快速排序是Hoare于1962年提出的一种基于二叉树思想的交换排序方法 基本思想&#xff1a…

软件测试技术分享| Appium用例录制

下载及安装 下载地址&#xff1a; github.com/appium/appi… 下载对应系统的 Appium 版本&#xff0c;安装完成之后&#xff0c;点击 “Start Server”&#xff0c;就启动了 Appium Server。 在启动成功页面点击右上角的放大镜&#xff0c;进入到创建 Session 页面。配置好…

QT作业3

完善对话框&#xff0c;点击登录对话框&#xff0c;如果账号和密码匹配&#xff0c;则弹出信息对话框&#xff0c;给出提示”登录成功“&#xff0c;提供一个Ok按钮&#xff0c;用户点击Ok后&#xff0c;关闭登录界面&#xff0c;跳转到其他界面 如果账号和密码不匹配&#xf…