vue echarts tooltip使用动态模板

devtools/2024/9/25 18:13:27/

先上代码

					  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.ppmy.cn/devtools/117102.html

相关文章

使用php生成图片

可以用这方法生成图片 水印 字体可以在资源绑定下载&#xff0c;如果字体路径不对&#xff0c;则不会输出文字图片 public function generateImage($text,$id) { header("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 26 Jul 1997 05:0…

【apt-file命令详解:Linux下的包管理利器】

文章目录 前言一、apt-file命令简介二、安装apt-file三、apt-file命令的基本用法四、高级技巧五、总结 &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f388;欢迎踏入我的博客世界&#xff0c;能与您在此邂逅&#xff0c;真是缘分使然&#xff01;&#x1f60a; &a…

Java项目中异常处理的最佳实践

1. 异常分类 首先&#xff0c;理解异常的不同类型是合理处理异常的基础。Java中的异常大致可以分为两大类&#xff1a; 受检异常&#xff08;Checked Exceptions&#xff09;&#xff1a;这些异常必须被捕获或声明抛出&#xff0c;例如IOException。非受检异常&#xff08;Un…

Java(基本数据类型)( ̄︶ ̄)↗

Java 基本数据类型是Java编程语言中用于存储数据值的基本单位。它们直接映射到硬件的处理器上&#xff0c;因此访问速度非常快。Java中的基本数据类型分为四大类&#xff1a;整型、浮点型、字符型、布尔型。每种类型都有其固定的范围和存储大小。 一、整型 1&#xff09;byte…

【笔记】KaiOS 系统框架和应用结构(APP界面逻辑)

KaiOS系统框架 最早自下而上分成Gonk-Gecko-Gaia层,代码有同名的目录,现在已经不用这种称呼。 按照官网3.0的版本迭代介绍,2.5->3.0已经将系统更新成如下部分: 仅分为上层web应用和底层平台核心,通过WebAPIs连接上下层,这也是kaios系统升级变更较大的部分。 KaiOS P…

基于微信小程序的竞赛答题小程序开发笔记(一)

开发背景调研 中小学学科答题小程序&#xff0c;适合各中小学校方&#xff0c;老师或者家长。通过互动和参与式学习&#xff0c;小程序能够通过游戏化元素提升学习的积极性和参与度&#xff0c;从而提升学习效率&#xff0c;促进学生自主学习 功能规划 分类题库&#xff1a;…

java日志框架之JUL(Logging)

文章目录 一、JUL简介1、JUL组件介绍 二、Logger快速入门三、Logger日志级别1、日志级别2、默认级别info3、原理分析4、自定义日志级别5、日志持久化&#xff08;保存到磁盘&#xff09; 三、Logger父子关系四、Logger配置文件 一、JUL简介 JUL全程Java Util Logging&#xff…

Qt 每日面试题 -3

21、static和const的使用 static : 静态变量声明&#xff0c;分为局部静态变量&#xff0c;全局静态变量&#xff0c;类静态成员变量。也可修饰类成员函数。 有以下几类∶ 局部静态变量 : 存储在静态存储区&#xff0c;程序运行期间只被初始化一次&#xff0c;作用域仍然为局部…