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

本文主要是介绍uniapp 如何使用echarts 以及解决tooltip自定义不生效;dataZoom报错问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

使用的是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层级太高遮挡显示层问题;这个问题不必理会,真机上显示是正常的
在这里插入图片描述
再使用dataZoom组件的时候会报错e.preventDefault is not a function
解决方法
找到echarts组件的vue文件,我的是 uni-ec-canvas.vue

//在触摸事件加上preventDefault: () => {},
stopImmediatePropagation: () => {},
stopPropagation: () => {}

touchStart(e) {if (this.ec.stopTouchEvent) {e.preventDefault();e.stopPropagation();return;}this.$emit("touchstart", e);if (this.$curChart && e.touches.length > 0) {var touch = e.touches[0];var handler = this.$curChart.getZr().handler;if (handler) {handler.dispatch("mousedown", {zrX: touch.x,zrY: touch.y,//需要添加的方法即可解决dataZoom报错preventDefault: () => {},stopImmediatePropagation: () => {},stopPropagation: () => {}});handler.dispatch("mousemove", {zrX: touch.x,zrY: touch.y,//需要添加的方法即可解决dataZoom报错preventDefault: () => {},stopImmediatePropagation: () => {},stopPropagation: () => {}});handler.processGesture(wrapTouch(e), "start");}}
},touchMove(e) {if (this.ec.stopTouchEvent) {e.preventDefault();e.stopPropagation();return;}this.$emit("touchmove", e);if (this.$curChart && e.touches.length > 0) {var touch = e.touches[0];var handler = this.$curChart.getZr().handler;if (handler) {handler.dispatch("mousemove", {zrX: touch.x,zrY: touch.y,//需要添加的方法即可解决dataZoom报错preventDefault: () => {},stopImmediatePropagation: () => {},stopPropagation: () => {}});handler.processGesture(wrapTouch(e), "change");}}
},touchEnd(e) {if (this.ec.stopTouchEvent) {e.preventDefault();e.stopPropagation();return;}this.$emit("touchend", e);if (this.$curChart) {const touch = e.changedTouches ? e.changedTouches[0] : {};var handler = this.$curChart.getZr().handler;if (handler) {handler.dispatch("mouseup", {zrX: touch.x,zrY: touch.y,//需要添加的方法即可解决dataZoom报错preventDefault: () => {},stopImmediatePropagation: () => {},stopPropagation: () => {}});handler.dispatch("click", {zrX: touch.x,zrY: touch.y,//需要添加的方法即可解决dataZoom报错preventDefault: () => {},stopImmediatePropagation: () => {},stopPropagation: () => {}});handler.processGesture(wrapTouch(e), "end");}}
},

这篇关于uniapp 如何使用echarts 以及解决tooltip自定义不生效;dataZoom报错问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/616458

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

Spring的RedisTemplate的json反序列泛型丢失问题解决

《Spring的RedisTemplate的json反序列泛型丢失问题解决》本文主要介绍了SpringRedisTemplate中使用JSON序列化时泛型信息丢失的问题及其提出三种解决方案,可以根据性... 目录背景解决方案方案一方案二方案三总结背景在使用RedisTemplate操作redis时我们针对

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

SpringBoot整合Dubbo+ZK注册失败的坑及解决

《SpringBoot整合Dubbo+ZK注册失败的坑及解决》使用Dubbo框架时,需在公共pom添加依赖,启动类加@EnableDubbo,实现类用@DubboService替代@Service,配... 目录1.先看下公共的pom(maven创建的pom工程)2.启动类上加@EnableDubbo3.实

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处

Kotlin Map映射转换问题小结

《KotlinMap映射转换问题小结》文章介绍了Kotlin集合转换的多种方法,包括map(一对一转换)、mapIndexed(带索引)、mapNotNull(过滤null)、mapKeys/map... 目录Kotlin 集合转换:map、mapIndexed、mapNotNull、mapKeys、map

nginx中端口无权限的问题解决

《nginx中端口无权限的问题解决》当Nginx日志报错bind()to80failed(13:Permissiondenied)时,这通常是由于权限不足导致Nginx无法绑定到80端口,下面就来... 目录一、问题原因分析二、解决方案1. 以 root 权限运行 Nginx(不推荐)2. 为 Nginx