uniapp 使用canvas制作柱状图

菜鸟驿站2020

已于 2024-01-17 14:28:36 修改

阅读量1.5k

点赞数 11

分类专栏： uni-app 文章标签： uni-app javascript 前端

于 2024-01-16 16:37:56 首次发布

本文链接：https://blog.csdn.net/weixin_38946164/article/details/135628015

版权

效果图：

在这里插入图片描述

实现思路：
1、通过展示数据计算需要画几根柱子；
2、通过组件宽度、高度计算出每根柱子的宽度及高度；
3、for循环依次绘制每根柱子；
4、绘制柱子时，先绘制顶部百分比、value值，再绘制柱子，再绘制底部标题；
5、文字需要居中，可绘制前丈量文字宽度再确定起始坐标。

<template>
	<view class="container">
		<canvas canvas-id="columnarCanvas" id="columnarCanvas" style="width:750rpx; height:500rpx; margin-top:20px;" ></canvas>
		<canvas canvas-id="testCanvas" style="width:750rpx; height:400rpx; background-color: #f8f8f8;"></canvas>
	</view>
</template>

<script>
	export default {
   
		data() {
   
			return {
   
				canvasInfo: {
    },
				dataList: [{
   
					title: "玛莎拉蒂",
					value: 2
				}, {
   
					title: "奥迪",
					value: 8
				}, {
   
					title: "奔驰",
					value: 9
				}, {
   					
					title: "奔奔",
					value: 6
				}, {
   
					title: "保时捷",
					value: 4
				}, {
   
					title: "宝马",
					value: 7
				}, {
   
					title: