uniapp中APP端使用echarts用formatter设置y轴保留2位小数点不生效

这篇具有很好参考价值的文章主要介绍了uniapp中APP端使用echarts用formatter设置y轴保留2位小数点不生效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

uniapp中APP端使用echarts用formatter设置y轴保留2位小数点不生效,uni-app,echarts,前端
uniapp使用echarts,在内置浏览器中,设置保留2位小数能正常显示(代码如下),但是在APP端这个设置不起作用。

yAxis: {
    type: 'value',
    axisLabel: {
      formatter: function (val) {
        return val.toFixed(2); //y轴始终保留小数点一位
      }
    }
  },

app端不生效是因为:
在app端,回调函数无法从renderjs外传递,上面的设置使用了回调函数formatter,所以app端不生效。

解决方法

在引用echarts中,有一个初始化的文件,找到里面update方法,加入一段代码(代码如下)。

未加入前的代码
update(option) {
				if (this.chart) {
					// 因App端,回调函数无法从renderjs外传递,故在此自定义设置相关回调函数
					if (option) {
						// tooltip
						if (option.tooltip) {
							// 判断是否设置tooltip的位置
							if (option.tooltip.positionStatus) {
								option.tooltip.position = this.tooltipPosition()
							}
							// 判断是否格式化tooltip
							if (option.tooltip.formatterStatus) {
								option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option
									.tooltip.formatFloat2, option.tooltip.formatThousands)
							}
						}
						// 设置新的option
						this.chart.setOption(option, option.notMerge)
					}
				}
			},
加入后的代码
update(option) {
				if (this.chart) {
					// 因App端,回调函数无法从renderjs外传递,故在此自定义设置相关回调函数
					if (option) {
						// tooltip
						if (option.tooltip) {
							// 判断是否设置tooltip的位置
							if (option.tooltip.positionStatus) {
								option.tooltip.position = this.tooltipPosition()
							}
							// 判断是否格式化tooltip
							if (option.tooltip.formatterStatus) {
								option.tooltip.formatter = this.tooltipFormatter(option.tooltip.formatterUnit, option
									.tooltip.formatFloat2, option.tooltip.formatThousands)
							}
						}
						if (option.yAxis !== undefined) {
							// #ifdef APP-PLUS
							if (option.yAxis.length > 0) {
								option.yAxis.forEach(el => {
									if(el.axisLabel) {
										el.axisLabel.formatter = function(val) {
											return val.toFixed(2) //y轴始终保留小数点一位
										}
									}
								})
							}
							// #endif
						}
						// 设置新的option
						this.chart.setOption(option, option.notMerge)
					}
				}
			},

如有其他formatter方法不生效,可在这个里面进行设置。文章来源地址https://www.toymoban.com/news/detail-714714.html

到了这里,关于uniapp中APP端使用echarts用formatter设置y轴保留2位小数点不生效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • python保留小数点后几位的方法

    方法一:使用字符串格式化 注意:使用字符串格式化后的是字符串格式 输出 方法二:使用round内置函数 注意:使用round后的是浮点数格式 输出 输出

    2024年02月05日
    浏览(43)
  • 在 JavaScript 中,保留小数点后两位的方法

    在 JavaScript 中,有多种方法可以保留小数点后两位。以下是其中的一些方法: 1. toFixed() 方法:该方法将数字转换为字符串,并保留指定的小数位数。 2. Math.round() 方法:该方法将数字四舍五入到指定的小数位数。  3. parseFloat() 和正则表达式:该方法将字符串转换为数字,并

    2024年02月12日
    浏览(37)
  • uniapp手机APP webview使用echarts显示问题(腾讯X5内核)

    一、问题描述 webview页面中引用了一些基于echarts封装的js文件,用于在手机上展示仪表盘 在iQOO8 pro上显示并无问题,而在vivo x21A上显示有问题,如下图所示 vivo x21A iQOO8 pro 二、解决过程 先说结论,出现这个问题是因为echarts和手机浏览器内核不兼容,webview组件默认使用的是手

    2024年02月09日
    浏览(53)
  • Echarts图表,利用formatter自定义tooltip的内容和样式

    在展示多数据图表的时候 有的时候需要图例也展示出一些内容来,例如官方这样子:鼠标悬停的时候展示该点数据 但是,官方提供的样式有时不适用所有的开发场景 我的项目需要实现鼠标悬停在某一点的时候,只展示该条线的数据,以及一些图表中未表现的数据。参照原型

    2024年02月11日
    浏览(67)
  • Echarts图表如何利用formatter自定义tooltip的内容和样式

    在展示多数据图表的时候 有的时候需要图例也展示出一些内容来,例如官方这样子:鼠标悬停的时候展示该点数据 但是,官方提供的样式有时不适用所有的开发场景 我的项目需要实现鼠标悬停在某一点的时候,只展示该条线的数据,以及一些图表中未表现的数据。参照原型

    2024年02月01日
    浏览(38)
  • 关于uniapp打包成app echart数据不显示的 renderjs问题

    renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。 renderjs的主要作用有2个: 1、大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力 2、在视图层操作dom,运行for web的js库 就是vue本身不支持直接通过原生JS操作DOM,于是在uniapp里,可以通过ren

    2024年02月15日
    浏览(31)
  • ECharts中: legend图例中的格式化属性(formatter)以及嵌套图表

    Documentation - Apache ECharts 字符串模板的相识变量使用(不同的图表对应都有对应的变量): Documentation - Apache ECharts 具体详细使用可以点^^^链接查看: 你只需要创建一个 div id =\\\"xjzbChart\\\"/div 然后 获取 xjzbChart = echarts.init(document.getElementById(\\\'xjzbChart\\\')); 在 series数组里面创建两个图表对象

    2024年02月13日
    浏览(43)
  • QString设置小数点精度位数

    QString 转double,double转QString 中的小数点问题 原文链接:https://blog.csdn.net/xxzhaoming/article/details/130364751 在Qt中,我们可以使用QString::number()函数将float类型转换为QString类型以便在界面上显示。该函数默认显示6位小数,但我们也可以通过设置第二个参数来控制小数点位数。 以下是

    2024年02月04日
    浏览(42)
  • Vue Element-UI 使用v-for设置动态表头,formatter进行数据展示格式化

    element-ui 官网的 table 比较繁琐需要写很多 el-table-column 标签 我们巧用vue的 v-for 循环进行简化代码 话不多说直接开演!!! 我在 src/components/dict 下面建立一个 Dic.js 文件写上一个方法 在组件里面引用 在我们需要格式化的 columns 添加 formatter

    2024年02月16日
    浏览(48)
  • uniapp 微信小程序 input详解 带小数点的input、可查看密码的输入框input

    官网文档地址 1、template 2、script 3、温馨提示 当比较输入框内的数值大小时,由于输入的类型为string,所以比较的时候需要转换为数值类型 Number() if(Number(this.num1) Number(this.num2)){ … }

    2024年02月16日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包