<template>
  <view class="w-full box-border h-[1120rpx] px-4 pt-32 pb-4">
    <view id="chart" style="width: 100%; height: 100%"></view>
  </view>
</template>
<script setup>
  import * as echarts from 'echarts'
  import { ref } from 'vue'
  import { onLoad, onReady } from '@dcloudio/uni-app'

  defineOptions({
    name: 'REcharts',
  })

  defineProps({
    item: {
      type: Object,
      default: {},
    },
  })

  // const chart = ref(null)
  const option = ref({
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
      },
    ],
  })
  function initChart() {
    // 获取 DOM 元素
    const chartDom = document.getElementById('chart')
    // 初始化 Echarts 实例
    const myChart = echarts.init(chartDom)
    // 指定图表的配置项和数据

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option.value)
  }

  onLoad(() => {
    nextTick(() => {
      initChart()
    })
  })
</script>

<style lang="scss" scoped>
  .wd-divider {
    margin: 0;
  }
</style>
