uniapp 如何使用echarts 以及解决tooltip自定义不生效问题

使用的是echarts-for-wx插件;
正常写法案例:给tooltip数值加个%

<template><view><uni-ec-canvas class="uni-ec-canvas"id="uni-ec-canvas"ref="canvas"canvas-id="uni-ec-canvas":ec="ec"></uni-ec-canvas></view>
</template>
<script>
// 此处将路径替换为你放置该组件的路径  
import uniEcCanvas from './uni-ec-canvas/ec-canvas.vue'  export default{data(){return {ec:{options:{} //echart 配置项}}},components:{uniEcCanvas},mounted(){this.initChart()},methods:{initChart(){this.ec.option={//其他配置项我就不写了,只展示tooltiptooltip: {trigger: 'axis',confine: true, //提示框限制在图形内axisPointer: {type: 'line',axis: 'auto', // 指示器的坐标轴。 snap: true, // 坐标轴指示器是否自动吸附到点上},textStyle: {// color: "#fff" //设置文字颜色},padding: 5, // 提示框浮层内边距,formatter: (params)=> {var html = params[0].name + '\n';//资金使用率添加%html +=params[0].marker +params[0].seriesName +':' +params[0].value +'%'return html;}// backgroundColor: '#ee6461',},}this.$refs.canvas.init();}}
}
</script>
// 这里一定要注意 设置该组件宽高 以及display:block来确保canvas初始化的时候是有宽高的
<style>
.uni-ec-canvas{width:100%;height:100%;display:block;
}
</style>

这样的写法formatter自定义是不会生效的;
想要自定义生效的正确写法

this.$refs['canvas'].ec.option={tooltip: {trigger: 'axis',confine: true, //提示框限制在图形内axisPointer: {type: 'line',axis: 'auto', // 指示器的坐标轴。 snap: true, // 坐标轴指示器是否自动吸附到点上},padding: 5, // 提示框浮层内边距,formatter: (params)=> {var html = params[0].name + '\n';//资金使用率添加%html +=params[0].marker +params[0].seriesName +':' +params[0].value +'%'return html;}},
}

在这里插入图片描述
顺带提一嘴在开发工具上看会有echarts层级太高遮挡显示层问题;这个问题不必理会,真机上显示是正常的
在这里插入图片描述

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

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

相关文章

【数据库】sql优化有哪些?从query层面和数据库层面分析

目录 归纳sql本身的优化数据库层面的优化 归纳 这类型问题可以称为&#xff1a;Query Optimization&#xff0c;从清华AI4DB的paper list中&#xff0c;该类问题大致可以分为&#xff1a; Query RewriterCardinality EstimationCost EstimationPlan Optimization 从中文的角…

SkipList 的索引过程,能否越两级搜索

“SkipList 的索引过程&#xff0c;能否越两级搜索&#xff1f;” 昨天&#xff0c;一个工作 7 年的粉丝&#xff0c;去某外包公司面试&#xff0c;被问到这个问题不知道该怎么回答。 今天正好有空&#xff0c;给大家分享一下这个问题的回答思路。 对了&#xff0c;这个问题…

ZooKeeper 实战(四) Curator Watch事件监听

文章目录 ZooKeeper 实战(四) Curator Watch事件监听0.前言1.Watch 事件监听概念2.NodeCache2.1.全参构造器参数2.2.代码DEMO2.3.日志输出 3.PathChildrenCache3.1.全参构造器参数3.2.子节点监听时间类型3.2.代码DEMO 4.TreeCache4.1.构造器参数4.2.代码DEMO4.3.日志输出 ZooKe…

Flink(十二)【容错机制】

前言 最近已经放假了&#xff0c;但是一直在忙一个很重要的自己的一个项目&#xff0c;用 JavaFX 和一个大数据组件联合开发一个功能&#xff0c;也算不枉我学了一次 JavaFX&#xff0c;收获很大&#xff0c;JavaFX 它作为一个 GUI 开发语言&#xff0c;本质还是 Java&#xff…

MSF流量加密

1、背景介绍 在MSF中生成shell&#xff0c;并上线运行时。都是通过http https tcp等协议传输。虽然MSF本身会对流量进行加密&#xff0c;但MSF太出名以致于其加密特征容易被IPS&#xff0c;WAF等可以检测带有攻击的特征的设备拦截或记录。 2、生成 SSL 证书 openssl req -x50…

关于运维·关于数据库面试题

目录 一、数据库类型 二、数据库引擎 三、mysql数据库类型 四、mysql的约束添加 五、主从复制原理 六、主从方式有几种 七、mysql主从数据不一致的原因 八、mysql的优化 九、什么是事务的特征 十、数据库读写分离的好处 十一、怎样优化sql语句 十二、mysql的同步方…

谷粒商城-商品服务-品牌管理-阿里云云存储+JSR303数字校验+统一异常处理

阿里云云存储OSS 分布式系统上传文件 分布式系统上传文件 单体应用上传&#xff1a;上传文件到服务器&#xff0c;想获取文件时再向服务器发请求获取文件。 分布式系统上传&#xff1a; 因为有多台服务器&#xff0c;为防止负载均衡导致获取文件时没找到对应的服务器&#xf…

实用编程调试技巧

目录 一、调试的基本步骤 二、Debug和Release的介绍 三、Windows环境调试介绍 1.调试环境的准备 2.学会快捷键 最常用的几个快捷键&#xff1a; 断点应用举例&#xff1a; 3.调试的时候查看程序当前信息 &#xff08;1&#xff09…

GitHub注册新账号的操作流程(详细)

目录 第一步 进入官网&#xff0c;点击右上角的"Sign up" 第二步 输入email地址 第三步 设置密码 第四步 输入昵称 第五步 根据个人喜好决定要不要接收GitHub的邮件推送。然后回答他们的验证问题 第六步 输入验证码 我在注册github账号时遇到过一些阻碍&#x…

软件测试|教你使用Python绘制正多边形

简介 绘制正多边形是Python图形编程的基本任务之一。在本文中&#xff0c;我将为你提供一个使用Python绘制正多边形的详细教程&#xff0c;并提供一个示例代码。我们将使用Python的Turtle库来进行绘制。 步骤1&#xff1a;导入Turtle库 我们需要先安装好Python环境&#xff…

Shiro框架:Shiro内置过滤器源码解析

目录 1. 常见项目中过滤器配置 2.Url访问控制配置解析为内置过滤器 2.1 DefaultFilterChainManager构造并注册内置过滤器 2.2 构造过滤器链 3. Shiro内置过滤器解析 3.1 内置过滤器概览 3.2 公共继承类解析 3.2.1 顶层Filter接口 3.2.2 AbstractFilter 3.2.3 Nameab…

二十几种未授权访问漏洞合集

未授权访问漏洞是一个在企业内部非常常见的问题&#xff0c;这种问题通常都是由于安全配置不当、认证页面存在缺陷&#xff0c;或者压根就没有认证导致的。当某企业对外的服务端口、功能无限制开放&#xff0c;并且对用户的访问没有做任何限制的时候&#xff0c;可能会泄露出某…

PLC数组队列搜索FC(SCL代码+梯形图程序)

根据输入数据搜索输入数据队列中和输入数据相同的数,函数返回其所在队列的位置。这里我们需要用到博途PLC的数组指针功能,有关数组指针的详细使用方法,可以参考下面文章: 博途PLC数组指针: https://rxxw-control.blog.csdn.net/article/details/134761364 区间搜索FC …

常用计算电磁学算法特性与电磁软件分析

常用计算电磁学算法特性与电磁软件分析 参考网站&#xff1a; 计算电磁学三大数值算法FDTD、FEM、MOM ADS、HFSS、CST 优缺点和应用范围详细教程 ## 基于时域有限差分法的FDTD的计算电磁学算法&#xff08;含Matlab代码&#xff09;-框架介绍 参考书籍&#xff1a;The finite…

【python】06.函数和模块的使用

函数和模块的使用 在讲解本章节的内容之前&#xff0c;我们先来研究一道数学题&#xff0c;请说出下面的方程有多少组正整数解。 事实上&#xff0c;上面的问题等同于将8个苹果分成四组每组至少一个苹果有多少种方案。想到这一点问题的答案就呼之欲出了。 可以用Python的程序来…

Spring Boot 整合支付宝实现在线支付方案(沙箱环境)

文章目录 1.理解沙箱环境2.沙箱环境接入准备2.1 访问开发者控制台2.2 获取重要信息2.3 处理秘钥 3.接入支付宝支付的流程4.实现支付4.1 添加 SDK 依赖4.2 创建配置类4.3 支付宝订单管理接口实现流程4.4 支付宝支付接口实现流程 5.支付宝支付功能演示7.总结 TIP&#xff1a;对于…

【UEFI基础】EDK网络框架(VLAN)

VLAN VLAN代码综述 在MNP中有很多的VLAN介绍&#xff0c;MNP存在的一个重要原因也是为了处理VLAN&#xff0c;而本文介绍的NetworkPkg\VlanConfigDxe\VlanConfigDxe.inf其实只是一个帮助模块&#xff0c;真正的VLAN配置还是在MNP中。 VLAN同样是一个UEFI Driver Model&#…

Redis实现分布式会话

Redis实现分布式会话 1 什么是分布式会话 1 这是我么之前学过的注册登录模式 2 如果非常多的人访问&#xff0c;因为单台服务器的访问承受能力是有限的&#xff0c;那么我们就想用多态服务器来承担压力 3 一般通过负载均衡的方式来实现&#xff0c;来分担服务器的压力。 4 负…

【PlantUML】- 时序图

写在前面 本篇文章&#xff0c;我们来介绍一下PlantUML的时序图。这个相对类图来讲&#xff0c;比较简单&#xff0c;也不需要布局。读完文章&#xff0c;相信你就能实际操作了。 目录 写在前面一、基本概念二、具体步骤1.环境说明2.元素3.语法4.示例 三、参考资料写在后面系列…

软件测试|Python数据可视化神器——pyecharts教程(十)

使用pyecharts绘制漏斗图 简介 漏斗图&#xff08;Funnel Chart&#xff09;是一种用于可视化数据流程或转化率的图表类型。它通常由一系列阶段组成&#xff0c;每个阶段都有一个名称和一个值&#xff0c;表示在该阶段的转化量或数据流程的进展情况。漏斗图的名称来源于其外观…