hogwarts-ui 官方网站

Appearance

Echarts 饼图 ​

基础用法 ​

点击查看示例代码
vue
<template>
  <h-pie-v1 :h_data="h_data"></h-pie-v1>
</template>

<script setup>
const h_data = {
  component: 'h-pie-v1',
  // 标题
  header: '我是基础用法',
  // 数据
  content: [
    {
      name: '钙',
      value: 20,
    },
    {
      name: '铁',
      value: 30,
    },
    {
      name: '锌',
      value: 50,
    },
    {
      name: '锡',
      value: 10,
    },
    {
      name: '维生素',
      value: 5,
    },
  ]
}
</script>
<template>
  <h-pie-v1 :h_data="h_data"></h-pie-v1>
</template>

<script setup>
const h_data = {
  component: 'h-pie-v1',
  // 标题
  header: '我是基础用法',
  // 数据
  content: [
    {
      name: '钙',
      value: 20,
    },
    {
      name: '铁',
      value: 30,
    },
    {
      name: '锌',
      value: 50,
    },
    {
      name: '锡',
      value: 10,
    },
    {
      name: '维生素',
      value: 5,
    },
  ]
}
</script>