学习笔记——uni-app使用uCharts插件来绘制图形

---

在用uni-app写代码时，时常会需要一些柱状图，饼图等图表。而uCharts是一款高性能的跨端图表插件。

1.导入uCharts插件：

首先，需要在uni-app官网的插件市场找到uCharts插件，并使用HBuilder直接导入到项目中。

2.使用uCharts插件：

根据uCharts插件官方的要求去配置。

<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>

注意：在onLoad()中series中的data尽量使用小数。

3.结果： 

运行项目，就可以得到图表。 

 

---

以上，就是uCharts插件的简单使用，如果需要其他图表，可以去官网看看如何配置。