Skip to content
On this page

按照数据占百分比大小显示内容


这是第1个item:
这是第2个item:
这是第3个item:
这是第4个item:
这是第5个item:
这是第6个item:

WARNING

可以自行动态设置data的数量,【设置font-size的大小,内容文字百分比】

显示代码
html
<HuPercentageSize :data="sizeData" width="800px" height="150px" style="font-size: 30px"/>

<script setup>
 import { ref } from "vue"
const sizeData = ref([
  { label: "名称", value: 37 },
  { label: "名称1", value: 9 },
  { label: "名称2", value: 6 },
  { label: "名称3", value: 4 },
  { label: "名称4", value: 10 },
  { label: "名称5", value: 3 }
])
</script>

Attributes

参数说明类型默认值
data数据Column[]
width总的宽度String300px
height总的高度String180px
colors数据块的背景颜色[]
rows数据展示的行数Number3
style设置font-size的大小,内容文字百分比{}{}

Column Attributes

参数说明类型默认值
label名称string-
value数据值的大小Number-

Released under the MIT License.