Uniapp App端Echart不显示的问题 Vue3

遇到问题

在uni-app开发中，遇到某些需求需要使用到echart图表，在H5调试过程中发现页面运行正常，运行到模拟器和真机出现不限示的问题，查找原因发现是v8引擎并没有window这些操作，导致dom获取失败导致，可以使用renderJS解决次问题。

解决方案（亲测有效） 

直接上组件

<style lang="scss" scoped>
	@import '/style/index.scss';

	.MonthExpendType {
		padding: 20rpx 30rpx;
		background: #fff;
		border-radius: 30rpx;
		margin: 30rpx 20rpx 20rpx;
		box-shadow: 0 1rpx 5rpx #7e7e7e;
	}

	.chartDom {
		width: 100%;
		height: 400rpx;
	}

	.title {
		padding: 0rpx 0rpx 26rpx;
	}
</style>
<template>
	<view class="MonthExpendType">
		<view class="title">
			{{title}}
		</view>
		<!-- #ifdef APP-PLUS || H5 -->
		<view :prop="optionRef" :className="chartDomClassName" :change:className="echarts.getClassName"
			:change:prop="echarts.updateEcharts" :class="['chartDom',chartDomClassName]">
		</view>
		<!-- #endif -->
	</view>
</template>

<script setup>
	import {
		onMounted,
		computed,
		watch,
		ref,
	} from 'vue';
	import {
		getChertsData
	} from '/api/userInfo.js';

	const prop = defineProps({
		type: String,
		currentMonth: String,
		title: String,
		chartDomClassName: String,
	})
	const chartDomRef = ref();
	const myChartRef = ref();
	const chartData = ref([]); //数据
	const monthDay = ref([]); //X日期
	const optionRef = computed(() => ({
		grid: {
			left: 1,
			right: 1,
			bottom: 1,
			top: 10,
			containLabel: true
		},
		xAxis: {
			type: 'category',

			axisLabel: {
				interval: 5 //设置y轴刻度间隔
			},
			axisTick: {
				show: false // 不显示坐标轴刻度线
			},
			axisLine: {
				show: false // 不显示坐标轴线
			},
			splitLine: {
				interval: 7, //设置y轴刻度间隔
				show: true,
				lineStyle: {
					type: 'dashed'
				}
			},

			data: monthDay.value, //日期天数
		},
		yAxis: {
			splitLine: {
				lineStyle: {
					type: 'dashed'
				}
			},
			axisLabel: {
				// show: false // 不显示坐标轴上的文字
			},
			type: 'value'
		},
		series: [{
			lineStyle: {
				color: '#fab91f'
			},
			symbolSize: 5, //设定实心点的大小
			color: '#fab91f', //改变折线点的颜色
			name: 'Email',
			type: 'line',
			stack: 'Total',
			data: chartData.value, //数据对应天数
		}]
	}));

	const getData = async () => {
		const result = await getChertsData(prop.currentMonth, prop.type);
		monthDay.value = result.body.X;
		chartData.value = result.body.Y;
	};
	onMounted(() => {
		getData();
	})
</script>
<script module="echarts" lang="renderjs">
	import * as echarts from 'echarts/core';
	import {
		ToolboxComponent,
		TooltipComponent,
		GridComponent
	} from 'echarts/components';
	import {
		LineChart
	} from 'echarts/charts';
	import {
		UniversalTransition
	} from 'echarts/features';
	import {
		CanvasRenderer
	} from 'echarts/renderers';
	echarts.use([
		ToolboxComponent,
		TooltipComponent,
		GridComponent,
		LineChart,
		CanvasRenderer,
		UniversalTransition
	]);
	export default {
		mounted() {
			// 通过nextTick异步画图
			this.$nextTick(() => {
				this.initEcharts()
			});
		},
		methods: {
			// 初始化
			initEcharts() {
				this.myChart = echarts.init(document.getElementsByClassName(this.chartDomClassName)[0])
			},
			//得到传递的类名
			getClassName(newValue, oldValue, ownerInstance, instance) {
				this.chartDomClassName = newValue;
			},
			// 监听配置数据变化，并重新渲染
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				this.myChart && this.myChart.setOption(newValue);
			},
		}
	}
</script>