解决uCharts相关问题

目录

1.uniapp u-charts 图表自适应外框的宽高100%百分之百

2.解决 u-charts 图表位置错位不兼容

3.如何修改u-charts图例的图标样式

---

1.uniapp u-charts 图表自适应外框的宽高100%百分之百

在uniapp开发中，用到了 u-charts，但是发现边框发现高度用了flex:1的布局，而宽度用了100%的布局。但是在设置里面的宽高时有需要一个具体的值

实现办法:

<view class="ucharts_box_cont">
	<canvas canvas-id="canvasArea" id="canvasArea" class="ucharts"></canvas>
</view>

.ucharts_box_cont{
	width: 100%;
	flex:1;
}
.ucharts {
	height: 100%;
	width: 100%;
}

onShow() {
			// _self = this;
			//实现自动获取宽高并赋值
			_self.$nextTick(() => {
				let info = uni.createSelectorQuery().in(_self).select('.ucharts_box_cont');
				info.boundingClientRect(function(data) {
					console.log(data) // 获取元素的各种参数
					_self.cWidth5 = data.width;
					_self.cHeight5 = data.height;
					_self.fillData(_self.categoriesData, _self.areaData);
				}).exec();
			})
		},

2.解决 u-charts 图表位置错位不兼容

在使用uniapp u-charts环形图打包成微信小程序后，可能遇到不同手机统计位置不同，导致图形显示不全问题

解决方法：在统计图标签上加上canvas2d canvasId="test"属性

<view class="charts-box mt10">
			<qiun-data-charts type="ring" canvas2d canvasId="test" :opts="opts" :chartData="chartData" />
		</view>

3.如何修改u-charts图例的图标样式

解决方法：

1.找到uni_modules --> qiun-data-charts --> js_sdk --> u-charts.js 文件

2.修改如下：