uniapp中使用echarts formatter真机下失效

最新推荐文章于 2025-09-17 15:28:35 发布

原创

最新推荐文章于 2025-09-17 15:28:35 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #echarts #uni-app

本文详细讲述了在使用Echarts过程中遇到的formatter函数缺失问题，通过添加自定义formatter解决图表数据格式化，并给出了完整的Vue组件和renderjs代码示例。

原因：在update方法得到的option中的formatter函数不存在

手动添加之前：

手动添加之后：

解决：需要手动在setOption之前添加需要自定义的formatter，以下是完整代码

<template>
	<view>
		<view class="echarts" :id="option.id" :prop="option" :change:prop="echarts.update" @click="echarts.onClick">
		</view>
	</view>
</template>



<script>
	export default {
		name: 'Echarts',
		props: {
			option: {
				type: Object,
				required: true
			}
		},
		created() {
			// 设置随机数id
			let t = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
			let len = t.length
			let id = ''
			for (let i = 0; i < 32; i++) {
				id += t.charAt(Math.floor(Math.random() * len))
			}
			this.option.id = id
		},
		methods: {
			/**
			 * renderjs内的点击事件，回调到父组件
			 * @param {Object} params
			 */
			onViewClick(params) {
				this.$emit('click', par