当前位置: 首页 > article >正文

vue echarts tooltip使用动态模板

先上代码

					  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.kler.cn/news/318469.html

相关文章:

  • Web3技术在元宇宙中的应用:从区块链到智能合约
  • 搜维尔科技:手指舞测试Manus VR数据手套手指追踪功能
  • HtmlCss 基础总结(基础好了才是最能打的)五
  • 代码随想录算法训练营第二十八天| 122.买卖股票的最佳时机 II、55. 跳跃游戏、45.跳跃游戏 II、1005.K次取反后最大化的数组和
  • 线程知识点补充
  • uniapp map设置高度为100%后,会拉伸父容器的高度
  • 练习题 - Django 4.x Models Meta 元数据选项
  • C++类和对象(中)【下篇】
  • 考研数据结构——C语言实现插入排序
  • 2024百度的组织架构和产品分布
  • Java Collectors工具类
  • js进阶——词法作用域
  • 无人机蜂群作战会成为未来战争的主要形式吗,该如何反制呢?
  • 前端——阿里图标的使用
  • Qt窗口——对话框
  • EventSource 和 WebSocket的区别
  • istio 网关开启https访问链接重置
  • 腾讯云点播及声音上传
  • 安全常用的kali linux是怎样的,如何安装?
  • 【高级编程】XML DOM4J解析XML文件(含案例)
  • 组合模式
  • qt--压缩图片的大小
  • 【编程基础知识】什么是DNS域名解析,有啥作用,什么地方会用到
  • 【Diffusion分割】FDiff-Fusion:基于模糊学习的去噪扩散融合网络
  • 深度学习——线性回归
  • PHP探索校园新生态校园帮小程序系统小程序源码
  • 数据采集使用动态代理被拦截的原因是什么?
  • Qt日志输出及QsLog日志库
  • Linux 进程2
  • React UI组件库推荐