vue echarts tooltip使用动态模板

news/2024/9/27 19:56:52 标签: vue.js, echarts, 前端

先上代码

					  tooltip: {
						  // 这里是车辆icon
						  show: 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.niftyadmin.cn/n/5679424.html

相关文章

三十二、领域驱动设计DDD(战术设计)

DDD 战术设计详解与实例 DDD 的战术设计关注如何在具体实现中应用领域模型的原则&#xff0c;包括聚合、服务、工厂等设计模式。以下是每个核心概念的详细介绍和实例。 1 聚合 (Aggregate) 定义&#xff1a;聚合是一组相关联的对象&#xff0c;它们共同表现一个一致的业务规…

使用rust实现rtsp码流截图

中文互联网上的rust示例程序源码还是太稀少&#xff0c;找资料很是麻烦&#xff0c;下面是自己用业余时间开发实现的一个对批量rtsp码流源进行关键帧截图并存盘的rust demo源码记录。 要编译这个源码需要先安装vcpkg&#xff0c;然后用vcpkg install ffmpeg安装最新版本的ffmpe…

网络编程(11)——另一种简便的粘包处理方式

十一、day11 下午学习如何使用asio库用另一种比较简便的方式处理粘包问题&#xff0c;之前有提过一种粘包处理方式&#xff1a;通过async_read_some函数监听读事件&#xff0c;并在读事件的回调函数HandleRead中对数据进行处理 _socket.async_read_some(boost::asio::buffer(…

python 图像绘制问题: 使用turtle库绘制蟒蛇

turtle &#xff08;海龟)库是turtle绘图体系的python实现。 1969年诞生&#xff0c;主要用于程序设计入门。 import turtle turtle.setup(650, 350, 200, 200) # 设置窗体&#xff08;宽&#xff0c;高&#xff0c;窗体左上角x坐标&#xff0c;y坐标&#xff09; turtl…

py-mmcif 包entity_poly 对象介绍

在 py-mmcif 包中,entity_poly 对象和 pdbx_poly_seq_scheme 对象都与生物大分子(如蛋白质和核酸)的序列和结构信息相关,但它们的目的和包含的信息有所不同。以下是它们之间的区别和联系: 1. 对象定义与结构 entity_poly 对象: 用于描述生物大分子的聚合体(如多肽或核酸…

为什么越来越多的开发者选择了EasyPlayer播放器?

在当今快速发展的多媒体和数字化时代&#xff0c;视频和音频的播放与处理已成为众多应用的核心功能之一。随着物联网&#xff08;IoT&#xff09;、嵌入式系统、智能硬件以及移动应用的普及&#xff0c;寻找一个高效、灵活且易于集成的多媒体播放解决方案成为了开发者们的重要需…

【Ubuntu】Ubuntu安装编译C/C++环境简易版教程

环境 操作系统&#xff1a;ubuntu-22.04.4-desktop-amd64.iso 安装 第一步:更新软件包列表&#xff0c;检查可用的软件包更新 sudo apt update在这一步&#xff0c;我们可以确保系统中的软件包列表是最新的&#xff0c;以便后续的软件包管理操作。 第二步&#xff1a;安装…

CentOs-Stream-9 设置静态IP外网访问

CentOs-Stream-9 设置静态IP&#xff0c;实现外网访问。这里面有些需要注意的地方&#xff0c;比如IP网段跟我们的宿主机不一样&#xff0c;需要查看具体的网络适配器网段&#xff0c;这样可以快速实现网络互通&#xff1b;另外它的网络配置文件也是不一样的。网络适配器对应的…