Study notes-uni-app uses uCharts plug-in to draw graphics

---

When writing code with uni-app, some charts such as bar charts and pie charts are often needed. And uCharts is a high-performance cross-terminal charting plug-in.

1. Import uCharts plugin:

First, you need to find the uCharts plug-in in the plug-in market of uni-app official website, and use HBuilder to directly import it into the project.

2. Use uCharts plug-in:

Configure according to the official requirements of the uCharts plugin.

<template>
  <view class="page-container">
	<view>
		<canvas canvas-id="arcbar" id="arcbar" class="charts" :style="{'width':cWidth2*pixelRatio+'px','height':cHeight2*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth2*(pixelRatio-1)/2+'px','margin-top':-cHeight2*(pixelRatio-1)/2+'px'}"></canvas>
	</view>
  </view>
</template>

<script>
	import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
	
	var arcbar = null;
	export default {
		data () {
			return {
				pixelRatio: 1,
				cWidth2:'',//圆弧进度图
				cHeight2:'',//圆弧进度图
				arcbarWidth: ''
			}
		},
		methods: {
			showArcbar(canvasId,chartData){
				let _self = this;
				console.log(_self.arcbarWidth);
				arcbar=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'arcbar',
					fontSize:11,
					legend:false,
					background:'#ffffff',
					pixelRatio:_self.pixelRatio,
					series: chartData.series,
					animation: true,
					width: _self.cWidth2*_self.pixelRatio,
					height: _self.cHeight2*_self.pixelRatio,
					dataLabel: true,
					title: {
						name: chartData.series[0].name,
						color: '#333333',
						fontSize: 12*_self.pixelRatio
					},
					subtitle: {
						name:chartData.series[0].data * 100,
						color: chartData.series[0].color,
						fontSize: 18*_self.pixelRatio
					},
					extra: {
						arcbar:{
							type:'default',
							width: _self.arcbarWidth*0.4,//圆弧的宽度
							
						}
					}
				});
			},
		},
		onLoad() {
			this.cWidth2 = uni.upx2px(200);
			this.cHeight2 = uni.upx2px(300);
			this.arcbarWidth = uni.upx2px(24);
			var Arcbar2 = {series:[{name: "相对湿度(%)", data: 0.3, color: "#D42244"}]};
			this.showArcbar("arcbar",Arcbar2);
		}
	}

</script>

<style>
	.page-container {
		position: relative;
	}
	.charts {
		position: absolute;
		width: 200upx;
		height: 800upx;
	}
	.normal {
		width: 200upx;
		height: 200upx;
		background-color: #00ff00;
	}
	.active {
		background-color: #2C405A;
	}
</style>

Note: Use decimals as much as possible for the data in the series in onLoad().

3. Results: 

Run the project to get the chart. 

 

 

---

The above is the simple use of uCharts plug-in. If you need other charts, you can go to the official website to see how to configure it.