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

news2024/11/27 6:19:35

在这里插入图片描述

代码:
<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"
            link
            size="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.coloradmin.cn/o/1318811.html

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

相关文章

Postman介绍和快速使用

Postman 是什么&#xff1f; Postman 是一个流行的API&#xff08;Application Programming Interface&#xff09;开发工具&#xff0c;它使得开发者可以很容易地创建、测试、共享和文档化API。Postman 提供了一个友好的用户界面&#xff0c;来发送HTTP请求&#xff0c;接收响…

How to helm install prometheus 【 helm 安装 prometheus 】

文章目录 1. 简介2. 简单部署3. 数据持久化部署3.1 设置必要的环境变量3.2 运行安装脚本3.3 查看 1. 简介 kube-prometheus-stack是一个基于Prometheus和Grafana的开源软件套件&#xff0c;用于在Kubernetes集群中进行监控和可视化。它提供了一套完整的工具和组件&#xff0c;…

Python Django 连接 PostgreSQL 操作实例

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是彭涛&#xff0c;今天为大家分享 Python Django 连接 PostgreSQL 操作实例&#xff0c;全文3500字&#xff0c;阅读大约10分钟 在Web开发中&#xff0c;使用Django连接到PostgreSQL数据库是一种常见的选择。…

如何从 iPhone 上恢复已删除的照片教程分享

您是否错误地删除了 iPhone 上的错误照片&#xff1f;或者您可能已将手机恢复出厂设置&#xff0c;但现在所有照片都消失了&#xff1f;如果您现在遇到这样的情况&#xff0c;我们可以为您提供解决方案。 在本文中&#xff0c;我们将向您展示七种数据恢复方法&#xff0c;可以…

饥荒Mod 开发(十四):制作屏幕弹窗

饥荒Mod 开发(十三)&#xff1a;木牌传送 在上一个文章里面制作了一个传送选择页面&#xff0c;是一个全屏的窗口&#xff0c;那饥荒中如何制作一个全屏的窗口&#xff0c;下面介绍一下如何从零开始制作一个全屏窗口 制作屏幕窗口 饥荒中的全屏窗口都有一个基类 “Screen”,我…

使用Nginx实现负载均衡的实践指南

目录 前言1 负载均衡简介2 需要实现的效果3 准备2个tomcat服务器4 配置Nginx实现负载均衡5 Nginx的服务器策略5.1 轮询&#xff08;默认&#xff09;5.2 权重&#xff08;weight&#xff09;5.3 IP哈希&#xff08;ip_hash&#xff09;5.4 响应时间公平分配&#xff08;fair&am…

论文阅读:Learning sRGB-to-Raw-RGB De-rendering with Content-Aware Metadata

论文阅读&#xff1a;Learning sRGB-to-Raw-RGB De-rendering with Content-Aware Metadata Abstract 大多数的 Camera ISP 会将 RAW 图经过一系列的处理&#xff0c;变成 sRGB 图像&#xff0c;ISP 的处理中很多模块是非线性的操作&#xff0c;这些操作会破坏环境光照的线性…

【深度强化学习】TRPO、PPO

策略梯度的缺点 步长难以确定&#xff0c;一旦步长选的不好&#xff0c;就导致恶性循环 步长不合适 → 策略变差 → 采集的数据变差 → &#xff08;回报 / 梯度导致的&#xff09;步长不合适 步长不合适 \to 策略变差 \to 采集的数据变差 \to &#xff08;回报/梯度导致的&am…

【Unity】简单实现生成式电子围栏

【Unity】简单实现生成式电子围栏 三维电子围栏是一种通过使用三维技术和电子设备来建立虚拟围栏&#xff0c;用于监控和控制特定区域的系统。它可以通过使用传感器和摄像头来检测任何越界行为&#xff0c;并及时发出警报。这种技术可以应用于安防领域以及其他需要对特定区域进…

C#实现MQTT over WebSocket

如何在网页端实现MQTT消息的发布和订阅&#xff1f; 实现MQTT功能&#xff0c;可以发布和订阅主题通过WebSocket协议将MQTT消息转发给对应的网页端 带着这个实现思路&#xff0c;采用C#控制台程序实现MQTT服务端功能&#xff0c;web端可以直接使用websocket插件与服务端双向通…

在金属/绝缘体/p-GaN栅极高电子迁移率晶体管中同时实现大的栅压摆幅和增强的阈值电压稳定性

标题&#xff1a;Simultaneously Achieving Large Gate Swing and Enhanced Threshold Voltage Stability in Metal/Insulator/p-GaN Gate HEMT (IEDM2023) 摘要 摘要&#xff1a;对于增强型GaN功率晶体管的发展&#xff0c;栅压摆幅和阈值电压稳定性通常是互相排斥的。本文展…

Web前端-HTML(简介)

文章目录 1. HTML1.1概述1.2 HTML骨架标签1.3 HTML元素标签及分类1.4 HTML标签关系 2. 代码开发工具&#xff08;书写代码&#xff09;3. 文档类型<!DOCTYPE>4. 页面语言lang5. 字符集 1. HTML 1.1概述 HTML 指的是超文本标记语言 (Hyper Text Markup Language)&#x…

串口通信(6)-C#串口通信Modbus协议完整实例

本文讲解C#基于ModbusRTU协议串口通信完整实例。 前言 关于modbus的协议从上一篇中有介绍,本篇不在阐述。 串口通信(5)-C#串口通信数据接收不完整解决方案 创建实例 添加控件和事件等 参考界面文件 namespace ModbusRTUDemo {partial class MainForm{/// <summary>…

踩坑记录:java连接ssh的问题

目录 概述一、第一个问题解决 二、第二个问题分析解决 三、第三个问题分析解决 第四个问题解决 概述 手里有个CS架构的老系统&#xff0c;服务端要用SSH的方式传文件。没想到写了两天&#xff01;遇到一堆问题&#xff0c;于是记录下。&#xff08;老系统真恶心啊&#xff01;…

msvcp140.dll丢失怎样修复?全面分析msvcp140.dll的修复方法

在执行特定程序时&#xff0c;有可能遭遇msvcp140.dll文件遗失的困扰&#xff0c;此时该如何处理呢&#xff1f;此次将为您讲述面临此类问题的有效解决方案&#xff0c;涉及到多种修复方法&#xff0c;其中包括利用DLL修复工具进行操作。您可依据个人需求选择相应的修复方式&am…

学习Java第70天,过滤器Filter简介

过滤器概述 Filter,即过滤器,是JAVAEE技术规范之一,作用目标资源的请求进行过滤的一套技术规范,是Java Web项目中最为实用的技术之一 Filter接口定义了过滤器的开发规范,所有的过滤器都要实现该接口 Filter的工作位置是项目中所有目标资源之前,容器在创建HttpServletRequest和…

用GitBook制作自己的网页版电子书

用GitBook制作自己的网页版电子书 前言 几年前阅读过其他人用GitBook创建的文档&#xff0c;可以直接在浏览器中打开&#xff0c;页面干净整洁&#xff0c;非常清爽&#xff0c;至今印象深刻。 GitBook非常适合用来为个人或团队制作文档&#xff0c;对于我这种偶尔写博客的人…

Vue 实现一个弹出框,允许用户输入信息,并在确认时将输入的信息进行输出到控制台

父组件用来点击按钮弹出弹出框 <!--ParentComponent.vue--> <template><div><button click"showPopupV">点我会有个弹出框&#xff01;&#xff01;&#xff01;</button><PopupComponent v-if"showPopup" :data"p…

java-sec-code中重定向

重定向 状态码3xx 存在问题的代码段 GetMapping("/redirect") public String redirect(RequestParam("url") String url) {return "redirect:" url; }用户访问/redirect路径时&#xff0c;redirect方法会获取web请求中的url参数内容&#xff0…

leetcode算法题:省份数量

leetcode算法题547 链接&#xff1a;https://leetcode.cn/problems/number-of-provinces 题目 有 n 个城市&#xff0c;其中一些彼此相连&#xff0c;另一些没有相连。如果城市 a 与城市 b 直接相连&#xff0c;且城市 b 与城市 c 直接相连&#xff0c;那么城市 a 与城市 c 间…