实现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;有着各种各样的问题。。

numpy-learn

创建数组 import numpy as np import pandas as pd import mathvalue float(nan)# 使用 math.isnan() if math.isnan(value):print("Value is NaN")# 使用 numpy.isnan() if np.isnan(value):print("Value is NaN")np.array([1, 2, 3, 4, 5]) np.linspac…

Hadoop和Spark的区别

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

Python 词法分析

Python 程序由 解析器 读取&#xff0c;输入解析器的是 词法分析器 生成的 形符 流。本章介绍词法分析器怎样把文件拆成形符。 Python 将读取的程序文本转为 Unicode 代码点&#xff1b;编码声明用于指定源文件的编码&#xff0c;默认为 UTF-8&#xff0c;详见 PEP 3120。源文…

Wireshark插件开发

第一章&#xff1a;Wireshark基础及捕获技巧 1.1 Wireshark基础知识回顾 1.2 高级捕获技巧&#xff1a;过滤器和捕获选项 1.3 Wireshark与其他抓包工具的比较 第二章&#xff1a;网络协议分析 2.1 网络协议分析&#xff1a;TCP、UDP、ICMP等 2.2 高级协议分析&#xff1a;HTTP…

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%的受…

【MyBatis-Plus】多数据源分页配置(低版本暂时就支持一种(可选),高版本多支持)

【转载】一、Mybatis Plus 3.4 版本之后分页插件的变化 1、地址 Mybatis Plus 3.4版本之后分页插件的变化 2、内容 1、MybatisPlusInterceptor 从 Mybatis Plus 3.4.0 版本开始&#xff0c;不再使用旧版本的 PaginationInterceptor&#xff0c;而是使用 MybatisPlusInterce…

【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;甚至…

Java中的final关键字和static关键字

这两个关键字编写代码时会经常用&#xff0c;正确的使用这些关键字&#xff0c;可以形成良好的编程习惯&#xff0c;保护好代码的封装性。 1、final 关键字 在Java中&#xff0c;利用关键字final指示常量&#xff0c;习惯上&#xff0c;常量名使用全大写。 关键字final表示这个…

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

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

【Java】【Stream流】分组

Java实际开发中使用流会提升代码的质量&#xff0c;所以这里继续分享使用流 玩分组 import java.util.Arrays; import java.util.List; import java.util.stream.Collectors; public class StreamGroupingExample { public static void main(String[] args) { List<…

深入解析C语言数组与指针:嵌套循环遍历数组

在这篇博客中&#xff0c;我们将深入探讨C语言中数组和指针的关系&#xff0c;通过一个简单的嵌套循环遍历数组的例子展示了它们的使用。 代码示例 #include <stdio.h>int main() {int arr1[] {1, 2, 3, 4, 5};int arr2[] {2, 3, 4, 5, 6};int arr3[] {3, 4, 5, 6, …

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;是一种老少皆宜的益智游戏。 人工智能五子棋系统的目标用户是一切想致力于研究人机对弈算法理论的相关研究者和一切…

使用C语言设计并实现一个成绩管理系统

使用C语言设计并实现一个成绩管理系统&#xff0c;该系统用于教师管理一门课程的成绩。 系统功能&#xff1a;成绩录入、打印成绩单、修改成绩、统计分数段、统计平均分、统计不及格学生&#xff0c;相关要求&#xff1a; 1&#xff09; 系统要有主菜单界面&#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修改为报错中提示的版…