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

叁歲伎倆 2022-12-23 11:16 1349阅读 0赞

--------------------

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

### 1.导入uCharts插件： ###

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

![2020112517262326.png][]

### 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.结果：  ###

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

![20201125173023816.png][]

## ##

--------------------

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

[2020112517262326.png]: /images/20221120/8d939a6c72d5400d9a18c87228d1fd27.png
[20201125173023816.png]: /images/20221120/9c2ea4e2eccd469389b0f1549380c193.png