hogwarts-ui 官方网站

Appearance

mkdocs文档中使用 ​

  • 在mkdocs中使用需要先定义好数据，然后使用组件并传递数据
  • 注意：mkdocs中组件使用时不要有空行，空行会导致解析异常
  • 象形柱图为例:

Echarts 象形柱图 ​

基础用法 ​

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

<script setup>
const ui1 = {
  // 组件名称
  component: 'h-pictorial-v1',
  // 标题
  title: '我是基础用法',
  // 纵坐标
  value: ['语文', '数学', '英语'],
}
const data1 = [
  {
    name: '张三',
    value: [110, 120, 30],
  },
  {
    name: '李四',
    value: [120, 130, 35]
  },
  {
    name: '王五',
    value: [130, 140, 32]
  },
  {
    name: '赵六',
    value: [140, 130, 40]
  },
  {
    name: '马七',
    value: [130, 110, 38]
  },
]
</script>
<template>
  <h-pictorial-v1 :ui="ui1" :h_data="data1"></h-pictorial-v1>
</template>

<script setup>
const ui1 = {
  // 组件名称
  component: 'h-pictorial-v1',
  // 标题
  title: '我是基础用法',
  // 纵坐标
  value: ['语文', '数学', '英语'],
}
const data1 = [
  {
    name: '张三',
    value: [110, 120, 30],
  },
  {
    name: '李四',
    value: [120, 130, 35]
  },
  {
    name: '王五',
    value: [130, 140, 32]
  },
  {
    name: '赵六',
    value: [140, 130, 40]
  },
  {
    name: '马七',
    value: [130, 110, 38]
  },
]
</script>

象形柱图堆叠 ​

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

<script setup>
const ui2 = {
  // 组件名称
  component: 'h-pictorial-v1',
  // 标题
  title: '我是基础用法',
  // 纵坐标
  value: ['语文', '数学', '英语'],
}
const data2 = [
  {
    name: '张三',
    value: [110, 120, 30],
  },
  {
    name: '李四',
    value: [120, 130, 35]
  },
  {
    name: '王五',
    value: [130, 140, 32]
  },
  {
    name: '赵六',
    value: [140, 130, 40]
  },
  {
    name: '马七',
    value: [130, 110, 38]
  },
]
</script>
<template>
  <h-pictorial-v1 :ui="ui2" :h_data="data2"></h-pictorial-v1>
</template>

<script setup>
const ui2 = {
  // 组件名称
  component: 'h-pictorial-v1',
  // 标题
  title: '我是基础用法',
  // 纵坐标
  value: ['语文', '数学', '英语'],
}
const data2 = [
  {
    name: '张三',
    value: [110, 120, 30],
  },
  {
    name: '李四',
    value: [120, 130, 35]
  },
  {
    name: '王五',
    value: [130, 140, 32]
  },
  {
    name: '赵六',
    value: [140, 130, 40]
  },
  {
    name: '马七',
    value: [130, 110, 38]
  },
]
</script>

API ​

属性名说明类型预设值
row一行展示几张图表String-