hogwarts-ui 官方网站

Appearance

Echarts 柱状图 ​

基础用法 ​

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

<script setup>
const h_data = {
  component: 'h-bar-v1',
  // 标题
  header: '我是基础用法',
  // 纵坐标
  meta: ['语文'],
  // 数据
  content: [
    {
      name: '周一',
      value: [110],
    },
    {
      name: '周二',
      value: [120]
    },
    {
      name: '周三',
      value: [130]
    },
    {
      name: '周四',
      value: [140]
    },
    {
      name: '周五',
      value: [130]
    },
    {
      name: '周六',
      value: [180]
    },
    {
      name: '周日',
      value: [120]
    },
  ]
}
</script>
<template>
  <h-bar-v1 :h_data="h_data"></h-bar-v1>
</template>

<script setup>
const h_data = {
  component: 'h-bar-v1',
  // 标题
  header: '我是基础用法',
  // 纵坐标
  meta: ['语文'],
  // 数据
  content: [
    {
      name: '周一',
      value: [110],
    },
    {
      name: '周二',
      value: [120]
    },
    {
      name: '周三',
      value: [130]
    },
    {
      name: '周四',
      value: [140]
    },
    {
      name: '周五',
      value: [130]
    },
    {
      name: '周六',
      value: [180]
    },
    {
      name: '周日',
      value: [120]
    },
  ]
}
</script>

柱状图堆叠 ​

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

<script setup>
const h_data1 = {
  component: 'h-bar-v1',
  // 标题
  header: '我是柱状图堆叠',
  // 纵坐标
  meta: ['语文', '数学', '英语', '理综', '文综' ],
  // 数据
  content:  [
    {
      name: '周一',
      value: [110, 150, 130, 120, 115],
    },
    {
      name: '周二',
      value: [120, 110, 150, 130, 120]
    },
    {
      name: '周三',
      value: [130, 120, 110, 150, 130]
    },
    {
      name: '周四',
      value: [140, 130, 120, 110, 150]
    },
    {
      name: '周五',
      value: [130, 140, 130, 120, 110]
    },
    {
      name: '周六',
      value: [180, 130, 140, 130, 120]
    },
    {
      name: '周日',
      value: [120, 180, 130, 140, 130]
    },
  ]
}
</script>
<template>
  <h-bar-v1 :h_data="h_data1"></h-bar-v1>
</template>

<script setup>
const h_data1 = {
  component: 'h-bar-v1',
  // 标题
  header: '我是柱状图堆叠',
  // 纵坐标
  meta: ['语文', '数学', '英语', '理综', '文综' ],
  // 数据
  content:  [
    {
      name: '周一',
      value: [110, 150, 130, 120, 115],
    },
    {
      name: '周二',
      value: [120, 110, 150, 130, 120]
    },
    {
      name: '周三',
      value: [130, 120, 110, 150, 130]
    },
    {
      name: '周四',
      value: [140, 130, 120, 110, 150]
    },
    {
      name: '周五',
      value: [130, 140, 130, 120, 110]
    },
    {
      name: '周六',
      value: [180, 130, 140, 130, 120]
    },
    {
      name: '周日',
      value: [120, 180, 130, 140, 130]
    },
  ]
}
</script>

条形图 ​

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

<script setup>
const h_data2 = {
  component: 'h-bar-v1',
  class: 'yAxis details',
  // 标题
  header: '我是条形图',
  // 纵坐标
  meta: ['数学'],
  // 数据
  content: [
    {
      name: '周一',
      value: [110],
    },
    {
      name: '周二',
      value: [120]
    },
    {
      name: '周三',
      value: [130]
    },
    {
      name: '周四',
      value: [140]
    },
    {
      name: '周五',
      value: [140]
    },
  ],
}
</script>
<template>
  <h-bar-v1 :h_data="h_data2"></h-bar-v1>
</template>

<script setup>
const h_data2 = {
  component: 'h-bar-v1',
  class: 'yAxis details',
  // 标题
  header: '我是条形图',
  // 纵坐标
  meta: ['数学'],
  // 数据
  content: [
    {
      name: '周一',
      value: [110],
    },
    {
      name: '周二',
      value: [120]
    },
    {
      name: '周三',
      value: [130]
    },
    {
      name: '周四',
      value: [140]
    },
    {
      name: '周五',
      value: [140]
    },
  ],
}
</script>

默认展示前多少条 ​

  • 纵向数据过多时，可以使用默认展示前多少条
点击查看示例代码
vue
<template>
  <h-bar-v1 :h_data="h_data3"></h-bar-v1>
</template>

<script setup>
const h_data3 = {
  // 组件名称
  component: 'h-bar-v1',
  class: 'yAxis endValue-7',
  // 标题
  header: '我是条形图',
  // 纵坐标
  meta: ['数学'],
  // 数据
  content:[
    {
      name: '周一',
      value: [110],
    },
    {
      name: '周二',
      value: [120]
    },
    {
      name: '周三',
      value: [130]
    },
    {
      name: '周四',
      value: [140]
    },
    {
      name: '周五',
      value: [140]
    },
      {
      name: '周一',
      value: [110],
    },
    {
      name: '周二',
      value: [120]
    },
    {
      name: '周三',
      value: [130]
    },
    {
      name: '周四',
      value: [140]
    },
    {
      name: '周五',
      value: [140]
    },
      {
      name: '周一',
      value: [110],
    },
    {
      name: '周二',
      value: [120]
    },
    {
      name: '周三',
      value: [130]
    },
    {
      name: '周四',
      value: [140]
    },
    {
      name: '周五',
      value: [140]
    },
  ],
}
</script>
<template>
  <h-bar-v1 :h_data="h_data3"></h-bar-v1>
</template>

<script setup>
const h_data3 = {
  // 组件名称
  component: 'h-bar-v1',
  class: 'yAxis endValue-7',
  // 标题
  header: '我是条形图',
  // 纵坐标
  meta: ['数学'],
  // 数据
  content:[
    {
      name: '周一',
      value: [110],
    },
    {
      name: '周二',
      value: [120]
    },
    {
      name: '周三',
      value: [130]
    },
    {
      name: '周四',
      value: [140]
    },
    {
      name: '周五',
      value: [140]
    },
      {
      name: '周一',
      value: [110],
    },
    {
      name: '周二',
      value: [120]
    },
    {
      name: '周三',
      value: [130]
    },
    {
      name: '周四',
      value: [140]
    },
    {
      name: '周五',
      value: [140]
    },
      {
      name: '周一',
      value: [110],
    },
    {
      name: '周二',
      value: [120]
    },
    {
      name: '周三',
      value: [130]
    },
    {
      name: '周四',
      value: [140]
    },
    {
      name: '周五',
      value: [140]
    },
  ],
}
</script>