hogwarts-ui 官方网站

Appearance

Echarts 象形柱图 ​

基础用法 ​

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

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

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

象形柱图堆叠 ​

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

<script setup>
const data2 =  {
  // 组件名称
  component: 'h-pictorial-v1',
  // 标题
  header: '我是基础用法',
  // 纵坐标
  meta: ['语文', '数学', '英语'],
  content: [
    {
      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 :h_data="data2"></h-pictorial-v1>
</template>

<script setup>
const data2 =  {
  // 组件名称
  component: 'h-pictorial-v1',
  // 标题
  header: '我是基础用法',
  // 纵坐标
  meta: ['语文', '数学', '英语'],
  content: [
    {
      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>