uniapp开发h5,pc端适配uchars

uniapp开发h5,pc端适配uchars

ucharts引入和注册就不废话了，进入正题。
首先，根据需要设置宽高

	getSysInfo(){
				uni.getSystemInfo({
				    success: (res)=> {
				    //_self即this,具体用的时候自己设定
				    //利用uni.upx2px将宽高转换为px,uni中一般用rpx或upx做单位，在此保留其特性，注意：宽为750时默认为100%
						_self.cWidth = uni.upx2px(res.windowWidth*1.7);
						_self.cHeight = uni.upx2px(res.windowHeight*1.7);
				       
				    }
				});
			},

对应的图表的宽高也要设置为相同值，避免出现变形

<view class="center" v-else-if="status=='end2'">
			<view class="qiun-charts" :style="{height:cHeight+'px',width:cWidth+'px'}">
				<canvas canvas-id="canvasColumn" id="canvasColumn" :style="{height:cHeight+'px',width:cWidth+'px'}" class="charts" @touchstart="touchColumn"></canvas>
			</view>
</view>
<style>

	.qiun-charts {
		padding-bottom: 20px;
	}
	
	.charts {
		padding-bottom: 20px;
		background-color: transparent;
	}
</style>

pc端用px即可，用rpx再乘以2效果一样
然后添加数据即可
附完整代码

<template>
	<view>
		<view class="center">
			<view class="qiun-charts" :style="{height:cHeight+'px',width:cWidth+'px'}">
				<canvas canvas-id="canvasColumn" id="canvasColumn" :style="{height:cHeight+'px',width:cWidth+'px'}" class="charts"
				 @touchstart="touchColumn"></canvas>
			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/component/u-charts/u-charts.js';
	var _self;
	var canvaColumn = null;
	var canvaLineA = null;

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				chartData: {
					"categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
					"series": [{
						"name": "成交量1",
						"data": [15, {
							"value": 20,
							"color": "#f04864"
						}, 45, 37, 43, 34]
					}, {
						"name": "成交量2",
						"data": [30, {
							"value": 40,
							"color": "#facc14"
						}, 25, 14, 34, 18]
					}]
				}
			}
		},
		onLoad() {
			_self = this;
			this.getSysInfo()
			this.getServerData();
		},
		methods: {
			getSysInfo() {
				uni.getSystemInfo({
					success: (res) => {
						//_self即this,具体用的时候自己设定
						//利用uni.upx2px将宽高转换为px,uni中一般用rpx或upx做单位，在此保留其特性
						_self.cWidth = uni.upx2px(res.windowWidth * 1.7);
						_self.cHeight = uni.upx2px(res.windowHeight * 1.7);

					}
				});
			},
			getServerData() {
				console.log(_self === this)
				// _self.serverData=this.chartData;
				let Column = {
					categories: [],
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				Column.categories = this.chartData.categories;
				Column.series = this.chartData.series;
				this.showColumn("canvasColumn", Column);
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: true,
						position: 'top',
						float: 'right',
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						// gridType:'dash',
						// gridColor:'#CCCCCC',
						dashLength: 10,
						splitNumber: 5,
						min: 0,
						max: 50,
						format: (val) => {
							return val.toFixed(0) + '万元'
						}
						// disabled:true
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
						}
					}
				});

			},
			//pc端无效果
			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					},

				});
			},

		},
	}
</script>

<style>
	.center {
		width: 100%;
		height: 100vh;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

	.qiun-charts {
		padding-bottom: 20px;
	}

	.charts {
		padding-bottom: 20px;
		background-color: transparent;
	}
</style>