vue echarts tooltip使用动态模板

先上代码

					  tooltip: {// 这里是车辆iconshow: true,// trigger: "item",// backgroundColor: "transparent",appendToBody: true,textStyle: {color: "#ffffff" //设置文字颜色},formatter: (params) => {return formatHtml(params.data)},},

然后mounted(){}

mounted(){window.formatHtml = function(params){// 车辆弹窗const item = params.extraInfo.item;let carData = {};carData.stop_time = item.stopTime;carData.car_number = item.carNum;carData.vkey = item.vkey;carData.isConn = item.isConn == 1 ? '在线' : '离线';carData.ups = item.ups == 1 ? '电源正常' : '电源异常';carData.accStatus = item.accStatus == 1 ? '点火' : '熄火';carData.speed = item.speed + 'km/h';carData.dir = (item.dir);carData.live = '';// carData.car_token = car_token;carData.shareUrl = item.shareUrl ? item.shareUrl.replace("http://", "https://") : '';carData.userName = item.userName;carData.userPhone = item.userPhone;return `<div class='input-card content-window-card'><div class="showInfo"><div class='input-item'><p>车牌号: ${carData.car_number}</p><p>联网状态: ${carData.isConn}</p></div><div class='input-item'><p>车辆状态: ${carData.accStatus}</p><p>电源状态: ${carData.ups}</p></div><div class='input-item'><p>行驶方向: ${carData.dir}</p><p>行驶速度: ${carData.speed}</p></div><div class='input-item'><p>车辆轨迹: <a href="javascript:void(0)" onclick="guiji('${carData.shareUrl}')"><img src="${require('@/assets/big_screen/icon/cheliangguiji.png')}"/></a></p></div><div class='input-item'><p>司机姓名: ${carData.userName}</p><p>联系方式: ${carData.userPhone}</p></div>            <div class='input-item'>${carData.live ? "<p>车辆监控: <img id='monitor_car' data-deviceSerial='"+carData.live+"' src='" + require('@/assets/big_screen/icon/monitor.png') + "' />" + carData.live + "</p>" : ""}</div></div></div>`}}

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

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

相关文章

Lesson1 MySQL的安装(环境为CentOS云服务器)

卸载内置环境 我们初期使用root账号&#xff0c;后期再切换成普通账号 使用 ps axj | grep mysql 查看系统中是否有MySQL相关的进程 使用 systemctl stop mysqld 关停进程 使用 rpm -qa | grep mysql 查看MySQL相关的安装包 使用 rpm -qa | grep mysql | xargs yum -y remo…

计算机毕业设计非遗项目网站 登录注册搜索 评论留言资讯 前后台管理/springboot/javaWEB/J2EE/MYSQL数据库/vue前后分离小程序

遗项目网站需求&#xff0c;以下是一个基于Spring Boot、Java Web、J2EE技术栈&#xff0c;使用MySQL数据库&#xff0c;并结合Vue实现前后端分离的简要设计方案&#xff1a; 系统功能概述 ‌用户登录与注册‌&#xff1a;实现用户的注册、登录功能&#xff0c;确保用户信息的…

【Docker】解决Docker Engine stopped

解决Docker Engine stopped 解决Docker Engine stopped1.检查虚拟设置2 安装wslwindows安装wsl 解决Docker Engine stopped 在安装完docker之后不少用户会遇到Docker Engine stopped。下面就下给出解决方法让docker正常运行起来 1.检查虚拟设置 打开任务管理器查看cpu页面&a…

华为全联接大会HUAWEI Connect 2024印象(五):讯飞星火企业级智能体平台

在HC大会上&#xff0c;除了有华为自己的产品&#xff0c;还有很多合作伙伴的产品&#xff0c;今天就简单说一下讯飞星火的企业级智能体平台。讯飞星火此次在HC上有多个展台。我以前是讯飞星火的拥泵&#xff0c;在B站发过视频介绍其API的使用&#xff08;利用API访问讯飞星火认…

PR视频剪辑工具全指南:开启专业剪辑之旅

pr视频剪辑可以说是视频剪辑里的一把好手&#xff0c;就是如果你想在这方面深耕那还是掌握这个工具的使用比较方便。如果你只是刚入门&#xff0c;那也有不少可以快速帮你剪辑出片的工具。这次我介绍几款我用过的视频剪辑工具&#xff0c;助你开启视频剪辑大门。 1.福昕视频剪…

构建预测睡眠质量模型_相关性分析,多变量分析和聚类分析

数据入口&#xff1a;睡眠质量记录数据集 - Heywhale.com 本数据集目的是探究不同因素是如何影响睡眠质量和整体健康的。 数据说明 字段说明Heart Rate Variability心率变异性&#xff1a;心跳时间间隔的模拟变化Body Temperature体温&#xff1a;以摄氏度为单位的人工生成体…

深度学习(2):梯度下降

文章目录 梯度下降梯度是什么常见梯度下降算法 代码实现批量梯度下降 梯度下降 梯度是什么 类似y ax b这种单变量的函数来说&#xff0c;导数就是它的斜率&#xff0c;这种情况下可以说梯度就是导数。 但在多变量函数中&#xff0c;梯度是一个向量&#xff0c;其分量是各个…

时间序列LSTM实现

这个代码参考了时间序列预测模型实战案例(三)(LSTM)(Python)(深度学习)时间序列预测(包括运行代码以及代码讲解)_lstm预测模型-CSDN博客 结合我之前所学的lstm-seq2seq里所学习到的知识对其进行预测 import time import numpy as np import pandas as pd import torch import…

STM32F407之超声波模块使用

#include "sys.h" #include "delay.h" #include "usart.h" #include "includes.h" #include "HC_SR04.h"int main() {OS_ERR err;//错误uart_init(9600);//串口初始化//超声波初始化HC_SR04();//OS初始化 他是第一个运行的函…

Karmada新版本发布,支持联邦应用跨集群滚动升级

摘要&#xff1a;本次升级支持联邦应用跨集群滚动升级&#xff0c;使用户版本发布流程更加灵活可控&#xff1b;透明同事karmadactl 新增了多项运维能力&#xff0c;提供独特的多集群运维体验。 本文分享自华为云社区 《Karmada v1.11 版本发布&#xff01;新增应用跨集群滚动升…

nfs版本问题导致挂载失败

一、系统环境 环境版本操作系统Linux Mint 22 Wilma内核版本6.8.0-44-genericgcc 版本arm-none-linux-gnueabihf-gcc (GNU Toolchain for the A-profile Architecture 9.2-2019.12 (arm-9.10)) 9.2.1 20191025uboot 版本2020.01开发板Linux版本5.4.31 二、问题描述 内核通过…

Unity开发绘画板——03.简单的实现绘制功能

从本篇文章开始&#xff0c;将带着大家一起写代码&#xff0c;我不会直接贴出成品代码&#xff0c;而是会把写代码的历程以及遇到的问题、如何解决这些问题都记录在文章里面&#xff0c;当然&#xff0c;同一个问题的解决方案可能会有很多&#xff0c;甚至有更好更高效的方式是…

微信小程序——引入 iconfont 矢量图标,如何使用引用阿里巴巴矢量图标

本文介绍如何在小程序中加入图标&#xff0c;效果如下图&#xff1a; 1、访部iconfont-阿里巴巴矢量图标库 找到需要的图标&#xff0c;然后添加入库 将增加好的图标添加到项目中 2、点击更新生成代码 生成后如下图 3、打开生成的css样式文件 4、在小程序中新建/static/iconfon…

AI大模型助力数据消费,构建数据飞轮科学、高效的体系

随着互联网的技术高速发展&#xff0c;越来越多的应用层出不穷&#xff0c;伴随着数据应用的需求变多&#xff0c;为快速响应业务需求&#xff0c;很多企业在初期没有很好的规划的情况下&#xff0c;存在不同程度的烟囱式的开发模式&#xff0c;这样会导致企业不同业务线的数据…

**CentOS7安装redis**

CentOS7安装redis 首先解压压缩包 redis-7.0.0.tar.gz tar -xvf redis-7.0.0.tar.gz接着进入到redis中 cd redis-7.0.0.tar.gz执行make命令编译 make接着执行安装命令 make install之后编译安装完后 程序都会在/usr/local/bin目录下 这里需要将在redis目录中redis.conf配置…

Kubernetes从零到精通(14-Storage)

存储简介 在Kubernetes中&#xff0c;存储是一个关键的部分&#xff0c;用于持久化应用程序的数据。Kubernetes的存储模型支持多种存储类型&#xff0c;并且能根据应用程序的需求动态地提供存储资源。以下是Kubernetes存储的基本概念和机制。 Kubernetes支持很多类型的卷。Pod可…

【Java面向对象高级一08】继承_使用继承的好处

前言 一、继承是什么&#xff1f; 二、使用继承的好处 总结 前言 继承的学习 一、继承是什么&#xff1f; Java中提供了一个关键字extends&#xff0c;用这个关键字&#xff0c;可以让一个类和另一个类建立起父子关系。extends(中文意思就是继承)。 继承的意思是&#xf…

Redis实战--Redis的数据持久化与搭建Redis主从复制模式和搭建Redis的哨兵模式

Redis作为一个高性能的key-value数据库&#xff0c;广泛应用于缓存、消息队列、排行榜等场景。然而&#xff0c;Redis是基于内存的数据库&#xff0c;这意味着一旦服务器宕机&#xff0c;内存中的数据就会丢失。为了解决这个问题&#xff0c;Redis提供了数据持久化的机制&#…

C语言 | Leetcode C语言题解之第434题字符串中的单词数

题目&#xff1a; 题解&#xff1a; int countSegments(char * s){int count 0; //count用来记录单词个数for(int i0; i < strlen(s); i){ //遍历字符串 if((i 0 || s[i-1] ) && s[i] ! ) //一个…

Python | Leetcode Python题解之第434题字符串中的单词数

题目&#xff1a; 题解&#xff1a; class Solution:def countSegments(self, s):segment_count 0for i in range(len(s)):if (i 0 or s[i - 1] ) and s[i] ! :segment_count 1return segment_count