uni-app 使用u-echarts图表插件步骤（圆环）

曾经终败给现在 2022-11-10 14:15 1138阅读 0赞

一、去插件市场下载插件：[https://ext.dcloud.net.cn/plugin?id=271][https_ext.dcloud.net.cn_plugin_id_271]

二、把components和static里面的文件复制到自己的项目中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70][]

三、使用：

<template>
    	<view class="qiun-columns">
    		<view class="qiun-charts" >
    			
    			<canvas canvas-id="canvasRing" id="canvasRing" class="charts" :style="{'width':cWidth*pixelRatio+'px','height':cHeight*pixelRatio+'px', 'transform': 'scale('+(1/pixelRatio)+')','margin-left':-cWidth*(pixelRatio-1)/2+'px','margin-top':-cHeight*(pixelRatio-1)/2+'px'}" @touchstart="touchRing"></canvas>
    			
    			
    			<canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas>
    			 
    		</view>
    	</view>
    </template>
    
    <script>
    	import uCharts from '@/components/u-charts/u-charts.js';
    	import  { isJSON } from '@/common/checker.js';
    	var _self;
    	var canvaRing=null;
       
    	export default {
    		data() {
    			return {
    				cWidth:'',
    				cHeight:'',
    				pixelRatio:1,
    				textarea:''
    			}
    		},
    		onLoad() {
    			_self = this;
    			//#ifdef MP-ALIPAY
    			uni.getSystemInfo({
    				success: function (res) {
    					if(res.pixelRatio>1){
    						//正常这里给2就行，如果pixelRatio=3性能会降低一点
    						//_self.pixelRatio =res.pixelRatio;
    						_self.pixelRatio =2;
    					}
    				}
    			});
    			//#endif
    			this.cWidth=uni.upx2px(750);
    			this.cHeight=uni.upx2px(500);
    			this.getServerData();
    		},
    		methods: {
    			getServerData(){
    				uni.request({
    					url: 'https://www.ucharts.cn/data.json',
    					data:{
    					},
    					success: function(res) {
    						console.log(res.data.data)
    						let Ring={series:[]};
    						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
    						Ring.series=res.data.data.Ring.series;
    						//自定义文案示例，需设置format字段
    						for(let i = 0 ;i < Ring.series.length;i++){
    							Ring.series[i].format=()=>{return Ring.series[i].name+Ring.series[i].data};
    						}
    						_self.textarea = JSON.stringify(res.data.data.Ring);
    						_self.showRing("canvasRing",Ring);
    					},
    					fail: () => {
    						_self.tips="网络错误，小程序端请检查合法域名";
    					},
    				});
    			},
    			showRing(canvasId,chartData){
    				canvaRing=new uCharts({
    					$this:_self,
    					canvasId: canvasId,
    					type: 'ring',
    					fontSize:11,
    					padding:[5,5,5,5],
    					legend:{
    						show:true,
    						position:'bottom',//解释小点在下方
    						float:'center',
    						itemGap:10,
    						padding:5,
    						lineHeight:26,
    						margin:5,
    						//backgroundColor:'rgba(41,198,90,0.2)',
    						//borderColor :'rgba(41,198,90,0.5)',
    						borderWidth :1
    					},
    					background:'#FFFFFF',
    					pixelRatio:_self.pixelRatio,
    					series: chartData.series,
    					animation: false,
    					width: _self.cWidth*_self.pixelRatio,
    					height: _self.cHeight*_self.pixelRatio,
    					disablePieStroke: true,
    					dataLabel: true,
    					subtitle: {
    						name: '70%',
    						color: '#7cb5ec',
    						fontSize: 25*_self.pixelRatio,
    					},
    					title: {
    						name: '收益率',
    						color: '#666666',
    						fontSize: 15*_self.pixelRatio,
    					},
    					extra: {
    						pie: {
    						  offsetAngle: 0,
    						  ringWidth: 40*_self.pixelRatio,
    						  labelWidth:15
    						}
    					},
    				});
    			},
    			// touchRing(e){
    			// 	canvaRing.touchLegend(e, {
    			// 		animation : false
    			// 	});
    			// 	canvaRing.showToolTip(e, {
    			// 		format: function (item) {
    			// 			return item.name + ':' + item.data 
    			// 		}
    			// 	});
    			// },
    			// changeData(){
    			// 	if(isJSON(_self.textarea)){
    			// 		let newdata=JSON.parse(_self.textarea);
    			// 		canvaRing.updateData({
    			// 			series: newdata.series,
    			// 			categories: newdata.categories
    			// 		});
    			// 	}else{
    			// 		uni.showToast({
    			// 			title:'数据格式错误'
    			// 			// image:'../../../static/images/alert-warning.png'
    			// 		})
    			// 	}
    			// }
    		}
    	}
    </script>
    
    <style>
    	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
    	.qiun-charts {
    		width: 750upx;
    		height: 500upx;
    		background-color: #FFFFFF;
    	}
    	
    	.charts {
    		width: 750upx;
    		height: 500upx;
    		background-color: #FFFFFF;
    	}
    </style>

效果图：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 1][]

[https_ext.dcloud.net.cn_plugin_id_271]: https://ext.dcloud.net.cn/plugin?id=271
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70]: /images/20221022/aa57bc223f0b43ee8a2bb94a93f961b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210318173217389.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI4NTI1MA==,size_16,color_FFFFFF,t_70