Flex 弹性布局组件 ​

<template>
  <h-flex-v2 :h_data="h_data"></h-flex-v2>
</template>

<script setup>
const h_data = {
  component: 'h-flex-v2',
  items: [
    {
      // 组件名称
      component: 'h-bar-v1',
      // 标题
      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]
        },
      ],
      // y轴为主轴
      yAxis: true,
      // 默认展示前多少条
      endValue: 7
    },
    {
      // 组件名称
      component: 'h-bar-v1',
      // 标题
      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]
        },
      ],
      // y轴为主轴
      yAxis: true,
      // 默认展示前多少条
      endValue: 7
    }
  ]
}
</script>

<template>
  <h-flex-v2 :h_data="h_data"></h-flex-v2>
</template>

<script setup>
const h_data = {
  component: 'h-flex-v2',
  items: [
    {
      // 组件名称
      component: 'h-bar-v1',
      // 标题
      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]
        },
      ],
      // y轴为主轴
      yAxis: true,
      // 默认展示前多少条
      endValue: 7
    },
    {
      // 组件名称
      component: 'h-bar-v1',
      // 标题
      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]
        },
      ],
      // y轴为主轴
      yAxis: true,
      // 默认展示前多少条
      endValue: 7
    }
  ]
}
</script>