uniapp微信小程序使用ucharts2.0解决穿透（遮挡|层级问题）

如果出现模糊问题，修改pixelRatio为2或者3即可，模拟器还是会有穿透问题，但是真机可以，就不折腾了。基本都是复制粘贴，只是梳理一下流程，最大的问题解决了，细节性的问题慢慢调呗。

第一步：引入u-charts-v2.0.0.js（https://gitee.com/uCharts/uCharts/blob/master/qiun-data-charts/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts-v2.0.0.js）和测试数据demodata.json（https://gitee.com/uCharts/uCharts/blob/master/qiun-data-charts/mockdata/demodata.json）

第二步，新建一个vue文件存放以下代码，以便于其他地方调用

<template>
	<view class="content">
		<!-- 只有微信小程序有canvas2d模式 -->
		<qiun-title-bar title="启用type='2d'用法示例" />
		<!-- 开启canvas2d模式后@tap的获取的点击坐标会不准确，开发者需按组件源码自行处理event的坐标为正确的坐标，并传入uCharts的实例中方可正确调用showTooltip方法 -->
		<canvas canvasId="canvasColumn" id="canvasColumn" type="2d" class="charts" @tap="tap($event,'canvasColumn')" />
	</view>
</template>

<script>
	import uCharts from '../../utils/u-charts-v2.0.0.js';
	var uChartsInstance = {};

	//下面是演示数据，您的项目不需要引用，数据需要您从服务器自行获取
	import demodata from '../../test/demodata.json';


	export default {
		data() {
			return {
				cWidth: 350,
				cHeight: 300,
				pixelRatio: 2,
			};
		},
		onLoad() {
			//#ifdef MP-ALIPAY || MP-WEIXIN
			this.pixelRatio = uni.getSystemInfoSync().pixelRatio;
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.getServerData();
		},
		onReady() {
			this.getServerData()
		},
		methods: {
			//模拟从服务器获取数据
			getServerData() {
				setTimeout(() => {
					// 需要自行拼接chartsData
					let chartsData = JSON.parse(JSON.stringify(demodata.Line))
					let type2dData = JSON.parse(JSON.stringify(demodata.Column))
					// #ifdef MP-WEIXIN
					this.draw2dCharts("canvasColumn", type2dData);
					// #endif
				}, 500);
			},
			draw2dCharts(id, data) {
				const query = uni.createSelectorQuery().in(this);
				query.select('#' + id).fields({
					node: true,
					size: true
				}).exec(res => {
					if (res[0]) {
						const canvas = res[0].node
						//v2.0版本必须要获取context并传入opts(option)中
						const ctx = canvas.getContext('2d')
						canvas.width = res[0].width * this.pixelRatio
						canvas.height = res[0].height * this.pixelRatio
						uChartsInstance[id] = new uCharts({
							//canvasId: canvasId, v2.0版本不需要再传canvasId和$this了，v1.0因为传$this会导致实例混乱
							type: 'column',
							padding: [15, 5, 0, 15],
							dataLabel: true,
							width: this.cWidth * this.pixelRatio,
							height: this.cHeight * this.pixelRatio,
							pixelRatio: this.pixelRatio,
							canvas2d: true, //开启canvas2d
							context: ctx, //v2.0版本必须要传context
							fontSize: 11,
							animation: true,
							categories: data.categories,
							series: data.series,
							xAxis: {
								disableGrid: true,
							},
							yAxis: {
								data: [{
									position: 'right',
									axisLine: false,
									//注意，v2.0版本的format变成了formatter
									formatter: (val) => {
										return val.toFixed(0) + '元'
									},
								}]
							},
							extra: {
								column: {
									type: 'group',
									width: 20
								}
							}
						});
					} else {
						console.error("[uCharts]:未获取到context")
					}
				})
			},
			tap(e, id) {
				uChartsInstance[id].showToolTip(e)
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding-bottom: 40px;
	}

	.charts {
		width: 750rpx;
		height: 500rpx;
	}
</style>

第三步：任意一个vue文件使用，跟vue完全一样

模拟器效果

真机效果