uni-app绘制柱状图

淩亂°似流年 2023-03-06 05:13 104阅读 0赞

# uni-app使用eachrts组件绘制柱状图 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bWRyZWFtZXI_size_16_color_FFFFFF_t_70][]  
**html**

<view class="qiun-charts" v-show="!show && typeID == 1">
    		
    		<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
    	</view>

import uCharts from '../../js_sdk/u-charts/u-charts/u-charts.js';//这里是你的u-charts组件路径
    var _self;
    var canvaColumn = null;
    export default { 
    	data() { 
    		return { 
    			cWidth: '',
    			cHeight: '',
    			pixelRatio: 1,
    			serverData: ''
    		}
    	},
    	methods:{ 
    		// 柱状图数据
    		getServerData() { 
    			let Column = { 
    				categories: [],
    				series: [{ 
    					name: "评分",
    					data: []
    				}]
    			};
    			request.get('/api/rate/listScore', {  //这里是我自己的数据接口
    				lessonId: this.id
    			}).then(res => { 
    				res.data.forEach(function(item) { 
    					Column.categories.push(item.name);
    					Column.series[0].data.push(item.score);
    				});
    				_self.showColumn("canvasColumn", Column);
    			})
    		},
    		// 绘制柱状图
    		showColumn(canvasId, chartData) { 
    			canvaColumn = new uCharts({ 
    				$this: _self,
    				canvasId: canvasId,
    				type: 'column',
    				legend: false,
    				fontSize: 11,
    				background: '#FFFFFF',
    				pixelRatio: _self.pixelRatio,
    				animation: true,
    				categories: chartData.categories,
    				series: chartData.series,
    				xAxis: { 
    					disableGrid: true,
    					itemCount: 5, //x轴单屏显示数据的数量，默认为5个
    					scrollShow: true, //新增是否显示滚动条，默认false
    					scrollAlign: 'left',
    				},
    				yAxis: { 
    					// disabled:true
    					dashLength: 8,
    					splitNumber: 10,
    					min: 0,
    					max: 100,
    				},
    				dataLabel: true,
    				width: _self.cWidth * _self.pixelRatio * 0.8,
    				height: _self.cHeight * _self.pixelRatio * 0.65,
    				extra: { 
    					column: { 
    						type: 'group',
    						width: _self.cWidth * _self.pixelRatio * 0.28 / chartData.categories.length
    					}
    				}
    			});
    		},
    		// 柱状图点击事件
    		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;
    					};
    				};
    			});
    		},
    	
    	},
    	onLoad(options) { 
    		_self = this;
    		this.cWidth = uni.upx2px(750);
    		this.cHeight = uni.upx2px(500);
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bWRyZWFtZXI_size_16_color_FFFFFF_t_70]: /images/20230208/e33240ef4ced44f8abb2687da038f9a0.png