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

news/2024/11/19 16:43:30/

在这里插入图片描述

代码:
<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.ppmy.cn/news/1273566.html

相关文章

广西岑溪市火灾通报:1人死亡 AI科技助力预防悲剧

近日&#xff0c;广西岑溪市玉梧大道紫坭工业园一厂房发生一起令人心痛的火灾事件&#xff0c;造成1人不幸丧生。这起悲剧再次提醒我们&#xff0c;火灾的防范工作是多么的重要。在这样的背景下&#xff0c;我想分享一个能够有效预防类似悲剧的技术——北京富维图像公司开发的F…

初级数据结构(六)——堆

文中代码源文件已上传&#xff1a;数据结构源码 <-上一篇 初级数据结构&#xff08;五&#xff09;——树和二叉树的概念 | NULL 下一篇-> 1、堆的特性 1.1、定义 堆结构属于完全二叉树的范畴&#xff0c;除了满足完全二叉树的限制之外&#xff0c;还满…

技术分析测试

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 提示&#xff1a;这里可以添加技术概要 例如&#xff1a; openAI 的 GPT 大模型的发展历程。 整体架构流程 提示&#xff1a;这里可以添加技术整体架构 例如&#xff1a; 在语言模型中&#xff0c;编码器和解码器都…

2023新时代中国模特大赛总决赛在京落幕

12月16日&#xff0c;备受瞩目的2023新时代中国模特大赛圆满落幕。本次大赛旨在挖掘和培养具有新时代特色的模特人才&#xff0c;推动中国时尚产业的创新发展。 作为中国时尚界的重要赛事&#xff0c;新时代中国模特大赛吸引了来自全国各地的优秀模特选手45名参加全国总决赛。在…

智安网络|企业网络安全工具对比:云桌面与堡垒机,哪个更适合您的需求

随着云计算技术的快速发展&#xff0c;越来越多的企业开始采用云计算解决方案来提高效率和灵活性。在云计算环境下&#xff0c;云桌面和堡垒机被广泛应用于企业网络安全和办公环境中。尽管它们都有助于提升企业的安全和效率&#xff0c;但云桌面和堡垒机在功能和应用方面存在着…

【Java JVM】实例对象的创建

当我们涉及 Java 编程时, 对象的创建是一个基础而关键的概念。在 Java 中, 一切皆为对象, 而对象的创建方式直接影响代码的结构和性能。 本博客将探讨一下 Java 实例对象的创建过程。 1 创建对象的方法有哪些 在 Java 中如果要创建一个对象, 有哪些方式呢? 运用 new 关键字创…

Kafka本地安装⭐️(Windows)并测试生产消息以及消费消息的可用性

2023.12.17 天气晴 温度较低 十点半&#xff0c;不是不想起实在是阳光浴太nice了日常三连&#xff0c;喂&#xff0c;刷&#xff0c;肝刷会儿博客&#xff0c;看会儿设计模式冷冷冷 进被窝 刷视频 睡觉看看kafka的本地部署 》》实践》》成功写会儿博客&#xff0c…

Qt/C++音视频开发60-坐标拾取/按下鼠标获取矩形区域/转换到视频源真实坐标

一、前言 通过在通道画面上拾取鼠标按下的坐标&#xff0c;然后鼠标移动&#xff0c;直到松开&#xff0c;根据松开的坐标和按下的坐标&#xff0c;绘制一个矩形区域&#xff0c;作为热点或者需要电子放大的区域&#xff0c;拿到这个坐标区域&#xff0c;用途非常多&#xff0…