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

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);
	}
}