uniapp使用Echarts，解决renderjs无法使用formatter问题

<!--
 * @Author: Coder_Yang
 * @description: 
 * @LastEditTime: 2024-03-13 10:33:57
-->
<template>
  <view>
	<CaseEchart
		:option="option" 
		style="height: 500px;width: 95vw;"
	>
	</CaseEchart>
  </view>
</template>

<script>
	import CaseEchart from'../CaseEchart.vue'
  export default{
    components:{
		CaseEchart
    },
    props:{
		data:{
			default:()=>[],
			typeof:Array
		}
    },
	watch:{
		'data'(oval,nlva){
			this.getEcharts()
		}
	},
    onLoad(query) {

    },
    created(){
		this.getEcharts()
    },
    computed:{

    },
    data(){
      return{
		option:{},
		CaseData:null
      }
    },
    methods:{
		getEcharts(){
			this.CaseData = this.data.area2
			var data = this.CaseData.chart2.datas.map(item =>{
				return {
					name : item.name,
					value : item.value
				}
			})		
			var names = []
			var values = [];
			data.forEach((item, index) => {
			   names.push(item.name);
			   values.push(item.value);
			})
			this.option = {
			   id:'PaymentEcharts',
			   tooltip: {
			      trigger: 'axis',
			      axisPointer: {
			         type: 'shadow'
			      }
			   },
			   grid: {
			      left: 0,
			      right: 40,
			      top: 20,
			      bottom: 20,
			      containLabel: true
			   },
			   xAxis: {
			      type: 'value',
			      splitNumber: 3,
			      axisTick: {
			         show: false
			      },
			      axisLine: {
			         show: false
			      },
			      axisLabel: {
			         textStyle: {
			            color: "#000",
			            fontSize: 14
			         }
			      },
			      splitLine: {
			         show: false
			      }
			   },
			   yAxis: {
			      type: 'category',
			      data: names,
			      axisTick: {
			         show: false,
			         alignWithLabel: true
					 
			      },
			      axisLine: {
			         show: false
			      },
			      axisLabel: {
			         interval: 0,
			         // rotate: 30,
					 formatter:function(value) {
						if (value.length > 5) {
						  return value.slice(0, 5) + '...';
						} else {
						  return value;
						}
					  },
			         textStyle: {
			            color: "#000",
			            fontSize: 12
			         }
			      },
			      splitLine: {
			         show: false
			      }
			   },
			   series: [{
			      type: 'bar',
			      showBackground: true,
			      backgroundStyle: {
			         color: 'rgba(180, 180, 180, 0.2)'
			      },
			      itemStyle: {
			         borderRadius: 10,
			         color: {
			            type: 'linear',
			            x: 0,
			            y: 0,
			            x2: 1,
			            y2: 0,
			            colorStops: [
			               { offset: 0, color: '#347CDD' }, // 0% 处的颜色
			               { offset: 1, color: '#56fb93' } // 100% 处的颜色
			            ],
			            global: false // 缺省为 false
			         }
			      },
			      label: {
			         show: true,
			         position: 'right',
			         color: '#000',
			         fontSize: 12
			      },
			      data: values
			   }]
			}

			

		}
    }
  }
</script>

<style lang="scss" scoped>

</style>

再option里面直接写上formatter，是无法执行方法的，

需要在调用Echarts中再次调用

<template>
	<view>
		<view class="echarts" :prop="option" :change:prop="echarts.update" :id='option.id'></view>
	</view>
</template>
 
<script>
	export default {
		name: 'Echarts',
		props: {
			option: {
				type: Object,
				required: true
			},
			axisLabelFormatter:{
				type: Function,
			},
			detailFormatter:{
				type: Function,
			},
		}
	}
</script>
 
<script module="echarts" lang="renderjs">
	import * as echarts from 'echarts'
	import mpvueEcharts from 'mpvue-echarts'
	export default {
		data() {
			return {
				chart: null
			}
		},
		mounted() {
			if (typeof window.echarts === 'object') {
				this.init()
			} else {
				// 动态引入类库
				const script = document.createElement('script')
				script.src = './static/Echarts/echarts.min.js'
				script.onload = this.init.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			/**
			 * 初始化echarts
			 */
			init() {
				this.chart = echarts.init(this.$el)
				this.update(this.option)
			},
			/**
			 * 监测数据更新
			 * @param {Object} option
			 */
			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)
							}					
						}
						 // 添加自定义的formatter
						// #ifdef APP
							if (option.series && option.series.length > 0) {
							  for (let series of option.series) {
								  // series.axisLabel.formatter = eval("(false || "+series.axisLabel.formatterFunction+")");
								  // series.detail.formatter = eval("(false || "+series.detail.detailFormatterFunction+")")
							  }
							}						
							if(option.id == 'CaseTypeData'){
								console.log(option.series);
							}
							if(option.id == 'PaymentEcharts'){
								this.option.yAxis.axisLabel.formatter = function(value) {
									console.log(value);
								    if (value.length > 5) {
								      return value.slice(0, 5) + '...';
								    } else {
								      return value;
								    }
								}	
							}
						// #endif
					  
                    // 设置新的option
					this.chart.setOption(option, option.notMerge)
					}
					
				}
			},

	if(option.id == 'PaymentEcharts'){
								this.option.yAxis.axisLabel.formatter = function(value) {
									console.log(value);
								    if (value.length > 5) {
								      return value.slice(0, 5) + '...';
								    } else {
								      return value;
								    }
								}	
							}

重点看着一段，进行调用选用