uniapp使用echarts,App端formatter无法显示问题

文章讲述了在uniapp应用中,由于app端无法解析formatter返回的函数,提出使用自定义字符串属性替代,并通过eval()函数将字符串转换为函数的解决方案。示例代码展示了如何在Echarts图表组件中应用这个方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原因

uniapp运行在app端的时候,formatter返回的函数uniapp无法解析

解决方案

自定义一个属性替代formatter,但属性值必须是字符串,以便uniapp可以正常取到值,然后我们将字符串使用 eval() 转换为函数

代码部分

以下代码可以直接使用,但注意所需依赖的引入

<template>
	<view class="chart-area">
		<!-- #ifdef APP-PLUS || H5 -->
		<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" class="echarts" id="echarts">
		</view>
		<!-- <button @click="changeOption">更新数据</button> -->
		<!-- #endif -->
		<!-- #ifndef APP-PLUS || H5 -->
		<view>APPH5 环境不支持</view>
		<!-- #endif -->
	</view>
</template>
<script>
	export default {
		props: {
			option: {
				type: Object,
				default: () => {
					return {}
				},
				required: true
			}
		},
		methods: {
			onViewClick(options) {
				console.log(options)
			}
		}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart = {
		setOption: () => {}
	}
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				const script = document.createElement('script')
				script.src = 'static/echarts.min.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				myChart = echarts.init(this.$el)
				myChart.setOption(this.option)
			},
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				// 关键代码
				if (newValue) {
					// 如果有多个不同属性使用到了formatter,可以根据需求添加条件判断
					// 个人水平有限,没有想到一个可以完全匹配到formatter属性的方法,只好一个个条件的判断
					if (newValue.tooltip && newValue.tooltip.formatterFunction) {
						newValue.tooltip.formatter = this.toFunction(newValue.tooltip.formatterFunction)
					}
				}
				myChart.setOption(newValue)
			},
			// 转换为函数的方法
			toFunction(e) {
				return eval('(' + e + ')')
			},
			onClick(event, ownerInstance) {
				// 调用 service 层的方法
				ownerInstance.callMethod('onViewClick', {
					test: 'test'
				})
			}
		}
	}
</script>

<style scoped>
	.chart-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.echarts {
		width: 100%;
		height: 100%;
	}
</style>
// 配置demo
lineOption: {
	color: ['#44c685'],
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: 'cross',
		},
		formatterFunction: `(params) => {
			let str = '<span style="color: #44c685;font-size: 18px;">' + params[0].data + '</span> <span style="color: #fff;font-size: 12px;">xxx</span>'
			return str;
		}`,
		backgroundColor: '#333'
	}
}
### 如何在 UniApp使用 ECharts 创建饼图 #### 准备工作 为了能够在 UniApp 项目中集成并使用 ECharts 实现饼图,需先完成如下准备工作: - 访问[ECharts 官网](https://echarts.apache.org/)在线构建所需图表功能模块,并下载压缩包。对于大多数场景而言,默认配置下的柱状图、折线图以及饼图已经可以满足需求[^1]。 - 下载后的文件应放置于项目的 `static` 文件夹内以便后续引用。 #### 注册全局组件 编辑 `main.js` 文件,在其中引入已准备好的 ECharts 组件,并将其注册为全局可用的组件: ```javascript import Vue from 'vue'; // 假设 echarts.vue 是之前创建的一个封装了 e-charts 的 vue 组件 import echartsComponent from './components/echarts/echarts.vue'; Vue.component('v-echart', echartsComponent); new Vue({ render: h => h(App), }).$mount('#app'); ``` 注意这里假设的是名为 `echarts.vue` 的自定义组件被存放在指定路径下;实际操作时应当依据实际情况调整导入语句中的相对路径。 #### 页面开发实例 下面给出一段简单的 HTML 和 JavaScript 代码片段来展示如何在一个具体的页面里利用上述设置绘制一个基础版本的饼图: ```html <template> <view class="container"> <!-- 使用前面注册过的 v-echart 自定义标签 --> <v-echart ref="pieChart" :options="chartOptions"></v-echart> </view> </template> <script> export default { data() { return { chartOptions: { title: { text: "某站点用户访问来源", subtext: "", x: "center" }, tooltip: { trigger: "item", formatter: "{a} <br/>{b}: {c} ({d}%)" }, legend: { orient: "vertical", left: "left", data: ["直接访问", "邮件营销", "联盟广告"] }, series: [ { name: "访问来源", type: "pie", radius: "55%", center: ["50%", "60%"], data: [ { value: 335, name: "直接访问" }, { value: 310, name: "邮件营销" }, { value: 234, name: "联盟广告" } ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: "rgba(0, 0, 0, 0.5)" } } } ] } }; } }; </script> ``` 这段代码展示了怎样通过给定的数据集渲染出一张描述不同类别占比情况的饼形统计图形。同时设置了标题、提示框样式以及其他视觉效果选项以增强可读性和美观度。 #### 饼图显示项排列方式优化 如果希望进一步美化或改变默认布局,则可以通过修改 `series` 节点内的 `labelFormatter` 属性来进行个性化定制。此属性允许传入一个函数形式的参数,从而灵活控制每个扇区上所呈现的文字信息及其格式[^2]。 例如,想要让百分比数值保留两位小数位的话,可以在对应位置加入这样的处理逻辑: ```json { ... labelLine: true, label: { show: true, position: 'outside', formatter: function (params) { return `${params.name}\n${parseFloat(params.percent).toFixed(2)}%`; } } } ``` 这样就可以确保最终生成的图表不仅直观易懂而且更加贴近业务需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值