uniapp APP和H5正确使用echarts总结和填坑说明

本文介绍了如何在uniapp项目中使用renderjs与echarts进行数据交互,包括renderjs的引入、逻辑层与视图层通信,以及在app端和H5端遇到的问题,如tooltip显示、axisLabel.formatter无效和dataZoom设置问题,并提供了相应的解决方案。

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


前言

对于一些频繁的dom操作,uniapp提供了一个renderjs方案,是一个运行在视图层的js,大幅降低逻辑层和视图层的通讯损耗,提供高性能视图交互能力,只支持h5和app端。app端使用echarts自然采用renderjs方案。h5端使用区别不大,因为h5逻辑层和视图层实际运行在同一个环境中,相当于使用 mixin 方式。小程序依然采用wxs方案,可以使用u-chart等第三方插件。


一、renderjs语法简单回顾

1.引入

script标签添加lang="renderjs", module=“随意命名”

<script module="echarts" lang="renderjs">
</script>

2.逻辑层向renderjs传值

在元素标签上添加 :change:name="renderScript.方法名" ,其中name为元素属性,renderScript为module定义名称,.方法用于监听传入值

<view :name="realName" :change:name="echarts.updateName"></view>
<script>
export default{
   data(){
   return {
      realName:'小李'
     }
   }
}
</script>
<script module="echarts" lang="renderjs">
export default{
   methods:{
      //逻辑层realName值变化将触发该方法
      updateName(newValue, oldValue, ownerInstance, instance){
         console.log(newValue)//小李
      }
   }
}
</script>

3. renderjs向逻辑层传值

ownerInstance.callMethod(逻辑层方法名,值)

<view   @click="echarts.send"></view>
<script>
export default{
   methods:{
   //接收值
      receive(data){
        console.log(data.name)//小李
      }
   }
}
</script>
<script module="echarts" lang="renderjs">
export default{
   methods:{
   //传值
      send(event,ownerInstance){
         ownerInstance.callMethod('receive',{
            name:'小李'
         })
         
      }
   }
}
</script>

二、项目中使用echarts

在这里插入图片描述

其中echarts.js放置static目录下,需手动下载放入
在这里插入图片描述

代码示例

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

<script>
	export default {

		data() {
			return {
				//配置
				optionData: {
					title: {
						text: '温度'
					},
					tooltip: {
					 trigger: 'axis',
					},
					legend: {
						data: ['温度']
					},
					// dataZoom: [{
					// 	type: "inside", // 支持双指缩放
					// 	start: 0,
					// 	end: 100,
					// 	zoomOnMouseWheel: true, // 开启滚轮缩放
					// }, ],
					xAxis: {
						
						data: ["北京", "天津", "武汉", "上海", "成都", "南京"]
					},
					yAxis: {
						// axisLabel: {
						// 	formatter: value => {
						// 		return  `${value}°C`
						// 	},
						// }
					},
					series: [
					{
						name: '温度',
						type: 'line',
						data: [6, 8, 11, 18, 20, 17]
					}]
				}
			}
		},
		onLoad() {

		},
		methods: {}
	}
</script>

<script module="echarts" lang="renderjs">
	let myChart;
	export default {
		mounted() {
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				// #ifdef APP-PLUS
				//APP 端视图层的页面引用资源的路径相对于根目录计算
				script.src = './static/echarts.js'
				// #endif
				// #ifdef H5
				script.src = '/static/echarts.js'
				// #endif
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			//初始化
			initEcharts() {
				myChart = echarts.init(document.getElementById('echarts'))
				myChart && myChart.setOption && myChart.setOption(this.optionData)
			},
			// 监听逻辑层配置变化
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				//修复app端yAxis或者xAxis ,axisLabel.formatter无效问题
				// if ( newValue?.yAxis?.axisLabel) {
				// 	newValue.yAxis.axisLabel.formatter = function formatter(value) {
				// 		return `${value}°C`
				// 	}
				// }
				myChart && myChart.setOption && myChart.setOption(newValue)

			},
			onClick(event, ownerInstance) {
				//修复H5端tooltip不显示,app端tooltip不好点击显示问题
				const touche = event.changedTouches[0];
				const x = touche.pageX;
				const y = touche.pageY - event.target.offsetTop;
				var xIndex = myChart.convertFromPixel({
					seriesIndex: 0
				}, [x, y])[0];
				myChart.dispatchAction({
					type: 'showTip',
					seriesIndex: 0,
					dataIndex: xIndex
				});
			}
		}
	}
</script>

<style>
	.echarts {
		width: 100%;
		height: 600rpx;
	}
</style>

三、填坑说明

提示:经过上面的引入方式,就能像在pc端一样方式使用配置echarts,但还是有一些兼容性bug,下面记录下遇到几个坑和解决方式

1.tooltip不显示问题

增加点击事件计算点击位置算出点击点对应图表内容值,使用dispatchAction手动触发显示tooltip,详见上面示例onClick方法

2.yAxis或者xAxis ,axisLabel.formatter无效问题

此问题H5端正常,只会出现在App端,解决方法在配置改变监听函数内在重新赋值formatter函数,详见上面示例updateEcharts方法内注释内容

3.dataZoom,type: "inside"无效

出现在APP端,此问题跟引入echarts.js版本有关系,不同版本兼容性不一样,推荐:https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js

4.echarts.js导入路径问题

app端视图层的页面引用资源的路径相对于根目录计算引入’./static/echarts.js,h5可以相对路径或者绝对路径引入‘/static/echarts.js’

四、charts.js文件地址

echarts.js

<think>好的,我现在需要帮助用户解决在UniApp使用ECharts的问题。首先,我需要了解用户的需求是什么。用户可能已经知道ECharts是一个图表库,但不确定如何在UniApp中集成使用UniApp是一个跨平台框架,支持多个小程序移动端,但不同平台可能有不同的限制,特别是小程序H5的区别。 接下来,我需要回忆一下UniApp使用ECharts的常见方法。通常有两种主要方式:一种是使用原生ECharts,另一种是使用封装好的组件,比如ucharts或者uni-ec-canvas。原生ECharts可能需要较多的适配工作,特别是在小程序中,因为小程序的canvas实现H5有所不同。而封装好的组件可能已经处理了这些兼容性问题,使用起来更方便。 然后,我需要考虑用户的技术水平。如果用户是新手,可能更倾向于推荐使用封装好的组件,比如ucharts,因为步骤更简单,文档更友好。而对于有一定经验的开发者,可能需要更灵活的原生集成方法。 接下来,我需要验证这些方法的可行性。比如,使用ucharts的话,是否需要安装特定的npm包,或者通过uni_modules导入。同时,需要注意UniApp项目的配置,比如是否需要配置easycom,或者修改manifest.json文件。 另外,渲染性能也是一个重要的考虑因素,特别是在移动端。ECharts本身比较庞大,可能影响加载速度,而ucharts可能针对移动端做了优化,体积更小,性能更好。需要提醒用户根据项目需求选择合适的库。 还需要考虑不同平台的兼容性问题。例如,在微信小程序中使用ECharts可能需要使用echarts-for-weixin项目,而H5可以直接使用web版本的ECharts。如果用户需要跨平台支持,可能需要分别处理不同平台的实现,或者寻找跨平台的解决方案。 然后,我需要整理具体的步骤,比如安装依赖、引入组件、配置图表选项、处理数据更新等。同时,给出一个简单的示例代码,帮助用户快速上手。示例代码需要包括模板部分、脚本部分样式部分,确保用户能够复制粘贴并运行。 可能遇到的问题包括canvas的层级问题,特别是在小程序中,z-index可能无效,需要调整组件的顺序。另外,数据更新时可能需要调用组件的setOption方法,或者使用组件自带的数据更新机制。 最后,需要提醒用户参考官方文档,以及提供一些常见问题的解决方法,比如图表不显示、事件绑定等。同时,建议用户根据实际需求调整图表的配置项,以达到最佳的视觉效果性能。</think>在 UniApp使用 ECharts 实现数据可视化,可通过以下两种主流方案实现: ▌方案一:使用封装组件(推荐新手) 采用 `ucharts` 或 `uni-ec-canvas` 等优化方案,已解决多端兼容问题: 1. 安装组件(以 uCharts 为例) ```bash # 通过 uni_modules 安装 uni_modules 市场搜索 "uCharts" → 导入项目 ``` 2. 基础使用模板 ```html <template> <view class="chart-container"> <qiun-data-charts type="column" :chartData="chartData" :opts="opts" /> </view> </template> <script> export default { data() { return { chartData: { categories: ["Mon", "Tue", "Wed", "Thu", "Fri"], series: [{ name: "销量", data: [35, 48, 27, 19, 56] }] }, opts: { fontSize: 12, legend: { show: true }, yAxis: { gridType: "dash" } } } } } </script> <style> .chart-container { width: 100%; height: 400rpx; } </style> ``` ▌方案二:原生 ECharts 集成(需区分平台) 更适合定制化需求,但需处理平台差异: ```html <!-- H5使用 --> <template v-if="isH5"> <div ref="chartDom" style="width:100%;height:300px"></div> </template> <!-- 小程序端使用 --> <template v-else> <ec-canvas id="mychart" canvas-id="chart" ref="canvas"></ec-canvas> </template> <script> // 平台检测 const isH5 = process.env.VUE_APP_PLATFORM === 'h5' export default { data() { return { isH5, chartInstance: null } }, mounted() { this.initChart() }, methods: { async initChart() { if (this.isH5) { const echarts = await import('echarts') this.chartInstance = echarts.init(this.$refs.chartDom) this.setChartOptions() } else { // 小程序需使用 echarts-for-weixin 组件 const { init } = await requirePlugin('echarts-for-weixin') const canvas = this.$refs.canvas this.chartInstance = init(canvas, null, { devicePixelRatio: 3 }) this.setChartOptions() } }, setChartOptions() { const option = { xAxis: { type: 'category', data: ['A', 'B', 'C'] }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: [10, 20, 30] }] } this.chartInstance.setOption(option) } } } </script> ``` ⚠️ 重要注意事项: 1. **性能优化**:移动端建议开启 `dataset` 大数据模式,避免频繁全量渲染 2. **跨端差异**: - 小程序需在 `pages.json` 声明 `usingComponents` - H5 需通过 `npm install echarts` 安装依赖 3. **事件交互**:通过 `chart.on('click', params => {})` 绑定事件 4. **按需加载**:使用 `echarts/core` + 按需引入组件减少包体积 ```js import { use, init } from 'echarts/core' import { BarChart, LineChart } from 'echarts/charts' import { GridComponent } from 'echarts/components' use([BarChart, LineChart, GridComponent]) ``` 📈 推荐实践: - 动态更新数据时使用 `setOption` 的 `notMerge: true` 参数 - 复杂图表启用 `animation: false` 提升渲染性能 - 使用 `resize()` 方法适配屏幕旋转场景 建议访问以下资源获取最新配置: - uCharts 官方文档:https://demo.ucharts.cn - ECharts 配置手册:https://echarts.apache.org/zh/option.html
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

pixle0

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值