vue svg画出堆叠条形图(页面/组件)

效果图

这里展示了四个效果图,应用时只需要自己调数据即可

代码

<template>
	<div>
		<g>
			<svg width="48" height="100">
				<rect v-for="(it, i) in listsvg" :key="i" width="48" :height="`${it.value}`" :fill="`${col[i]}`" :transform="it.label"></rect>
			</svg>
		</g>
	</div>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, toRefs } from 'vue';
let listsvg = [
	{
		label: 'translate(0,0)',
		value: 10,
	},
	{
		label: 'translate(0,10)',
		value: 20,
	},
	{
		label: 'translate(0,30)',
		value: 41,
	},
	{
		label: 'translate(0,71)',
		value: 20,
	},
	{
		label: 'translate(0,91)',
		value: 9,
	},
];
let col = ['rgba(42, 162, 248, 1)', 'rgba(255, 198, 25, 1)', 'rgba(29, 205, 121, 1)', 'rgba(245, 94, 108, 1)', 'rgba(154, 89, 158, 1)'];
onMounted(() => {
	
});
</script>
<style lang="scss" scoped></style>