hogwarts-ui 官方网站

Appearance

Echarts 折线图 ​

基础用法 ​

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

<script setup>
const h_data = {
  component: 'h-line-v1',
  // 纵坐标
  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-line-v1 :h_data="h_data"></h-line-v1>
</template>

<script setup>
const h_data = {
  component: 'h-line-v1',
  // 纵坐标
  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-line-v1 :h_data="h_data1"></h-line-v1>
</template>

<script setup>
const h_data1 = {
  component: 'h-line-v1',
  class: 'smooth details',
  // 标题
  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-line-v1 :h_data="h_data1"></h-line-v1>
</template>

<script setup>
const h_data1 = {
  component: 'h-line-v1',
  class: 'smooth details',
  // 标题
  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-line-v1 :h_data="h_data2"></h-line-v1>
</template>

<script setup>
const h_data2 = {
  component: 'h-line-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-line-v1 :h_data="h_data2"></h-line-v1>
</template>

<script setup>
const h_data2 = {
  component: 'h-line-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>