<!-- eslint-disable no-new -->
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Chart } from '@ldesign/chart'

const bar1 = ref(null)
const bar2 = ref(null)
const bar3 = ref(null)
const bar4 = ref(null)
const line1 = ref(null)
const line2 = ref(null)
const line3 = ref(null)
const line4 = ref(null)
const line5 = ref(null)
const pie1 = ref(null)
const pie2 = ref(null)
const pie3 = ref(null)
const pie4 = ref(null)

onMounted(() => {
  new Chart({
    el: bar1.value,
    type: 'bar',
    data: [{
      name: '分类1',
      type: 'bar',
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 342,
      }, {
        label: '3月',
        value: 443,
      }],
    }],
  })
  new Chart({
    el: bar2.value,
    type: 'bar',
    data: [{
      name: '分类1',
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 342,
      }, {
        label: '3月',
        value: 443,
      }],
    }, {
      name: '分类2',
      children: [{
        label: '1月',
        value: 123,
      }, {
        label: '2月',
        value: 332,
      }, {
        label: '3月',
        value: 143,
      }],
    }],
  })
  new Chart({
    el: bar3.value,
    type: 'bar',
    x: [{ type: 'value' }],
    y: [{ type: 'category' }],
    data: [{
      name: '分类1',
      type: 'bar',
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 342,
      }, {
        label: '3月',
        value: 443,
      }],
    }],
  })
  new Chart({
    el: bar4.value,
    type: 'bar',
    y: [{ type: 'value', name: '0', splitLine: false }, { type: 'value', name: '1', splitLine: false }],
    data: [{
      name: '分类1',
      yIndex: 0,
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 342,
      }, {
        label: '3月',
        value: 443,
      }],
    }, {
      name: '分类2',
      yIndex: 1,
      children: [{
        label: '1月',
        value: 123,
      }, {
        label: '2月',
        value: 332,
      }, {
        label: '3月',
        value: 143,
      }],
    }],
  })
  new Chart({
    el: line1.value,
    type: 'line',
    data: [{
      name: '分类1',
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 342,
      }, {
        label: '3月',
        value: 443,
      }],
    }],
  })
  new Chart({
    el: line2.value,
    type: 'line',
    data: [{
      name: '分类1',
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 342,
      }, {
        label: '3月',
        value: 443,
      }],
    }, {
      name: '分类2',
      children: [{
        label: '1月',
        value: 123,
      }, {
        label: '2月',
        value: 332,
      }, {
        label: '3月',
        value: 143,
      }],
    }],
  })
  new Chart({
    el: line3.value,
    type: 'line',
    x: [{ type: 'value' }],
    y: [{ type: 'category' }],
    data: [{
      name: '分类1',
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 342,
      }, {
        label: '3月',
        value: 443,
      }],
    }],
  })
  new Chart({
    el: line4.value,
    type: 'line',
    y: [{ type: 'value', name: '0', splitLine: false }, { type: 'value', name: '1', splitLine: false }],
    data: [{
      name: '分类1',
      yIndex: 0,
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 342,
      }, {
        label: '3月',
        value: 443,
      }],
    }, {
      name: '分类2',
      yIndex: 1,
      children: [{
        label: '1月',
        value: 123,
      }, {
        label: '2月',
        value: 332,
      }, {
        label: '3月',
        value: 143,
      }],
    }],
  })
  new Chart({
    el: line5.value,
    type: 'line',
    data: [{
      name: '分类1',
      type: 'bar',
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 342,
      }, {
        label: '3月',
        value: 443,
      }],
    }, {
      name: '分类2',
      children: [{
        label: '1月',
        value: 123,
      }, {
        label: '2月',
        value: 332,
      }, {
        label: '3月',
        value: 143,
      }],
    }],
  })
  new Chart({
    el: pie1.value,
    type: 'pie',
    data: [{
      name: '分类1',
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 214,
      }, {
        label: '3月',
        value: 123,
      }],
    }],
  })
  new Chart({
    el: pie2.value,
    type: 'pie',
    data: [{
      name: '分类1',
      radius: ['35%', '50%'],
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 214,
      }, {
        label: '3月',
        value: 123,
      }],
    }],
  })
  new Chart({
    el: pie3.value,
    type: 'pie',
    data: [{
      name: '分类1',
      label: false,
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 214,
      }, {
        label: '3月',
        value: 123,
      }],
    }],
  })
  new Chart({
    el: pie4.value,
    type: 'pie',
    data: [{
      name: '分类1',
      radius: '30%',
      children: [{
        label: '1月',
        value: 321,
      }, {
        label: '2月',
        value: 214,
      }, {
        label: '3月',
        value: 123,
      }],
    }, {
      name: '分类2',
      radius: ['40%', '55%'],
      children: [{
        label: '1月',
        value: 342,
      }, {
        label: '2月',
        value: 234,
      }, {
        label: '3月',
        value: 356,
      }],
    }],
  })
})
</script>

<template>
  <ld-page
    theme="light"
  >
    <l-row :gutter="[16, 16]" style="padding: 16px;">
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="bar1" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="bar2" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="bar3" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="bar4" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="line1" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="line2" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="line3" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="line4" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="line5" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="pie1" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="pie2" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="pie3" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
      <l-col :span="4">
        <ld-tabpanel
          :more="false"
          height="auto"
        >
          <div ref="pie4" style="height:300px;" />
        </ld-tabpanel>
      </l-col>
    </l-row>
  </ld-page>
</template>
