前端.map的使用

子组件传值的使用，直接附源码吧，有.map示例

<template>
  <a-card :body-style="{ padding: '10px' }" :head-style="{ padding: '0 10px' }" title="收入分析图" :bordered="false"
    class="card-border-radius">
    <!-- {{dayValue}} -->
    <div class="chart-item-container">
      <a-skeleton animation v-if="loading">
        <a-skeleton-line :rows="4" />
      </a-skeleton>
      <template v-else>
        <div ref="payOrderCountChart" class="chart-item"></div>
      </template>
    </div>
  </a-card>
</template>
<script lang="ts">
import useEcharts from '@/hooks/useEcharts'
import { defineComponent, nextTick, onBeforeUnmount, onMounted, ref, toRefs, reactive } from 'vue'
import { dispose, graphic } from 'echarts/core'
//日期数组
var months = ref([])
// var months = [202201, 202202]


export default defineComponent({
  name: 'PayOrderCountChart',
  props: {
    dayValue: Array
  },

  setup(props) {
    const loading = ref(false)
    const payOrderCountChart = ref<HTMLDivElement | null>(null)
    let interval: any = null
    const data = toRefs(props)
    var organAcqId = data.dayValue.value
    // console.log(organAcqId?.map(o => { return [o.crtDay].toString() }), '-------------------')
    // console.log(organAcqId?.map(o => { return [o.daySuccCount].toString() }), '-------------------')
    // console.log(organAcqId?.map(o => { return [o.dayFailAcct].toString() }), '-------------------')
    // console.log(organAcqId?.map(o => { return [o.dayRefundAcct].toString() }), '-------------------')
    // console.log(organAcqId?.map(o => { return [o.dayRecepitAcct].toString() }), '-------------------')

    // console.log(organAcqId?.map(o => { return [o.dayTotalCount].toString() }), '-------------------')
    // console.log(organAcqId?.map(o => { return [o.daySuccCount].toString() }), '-------------------')
    // console.log(organAcqId?.map(o => { return [o.dayFailCount].toString() }), '-------------------')
    // console.log(organAcqId?.map(o => { return [o.dayRecepitAcct].toString() }), '-------------------')

    months = organAcqId?.map(o => { return [o.crtDay].toString() })



    const init = () => {
      const option = {
        color: ['rgba(64, 58, 255)'],
        legend: {
          icon: 'rect',
          itemWidth: 30,  // 设置宽度
          itemHeight: 4, // 设置高度
          itemGap: 24, // 设置间距
          data: ['实际收入金额', '支付失败金额', '退款金额'],
          textStyle: {
            //文字样式
            color: '#00000',
            fontSize: '12'
          },
          right: '30%'
        },
        dataZoom: {
        show: true, // 为true 滚动条出现
        realtime: true,  
        type:'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
        height: 20, // 表示滚动条的高度，也就是粗细
        start: 20, // 表示默认展示20%～80%这一段。
        end: 80
        },
        grid: {
          top: '10%',
          left: '2%',
          right: '2%',
          bottom: '5%',
          containLabel: true,
        },

        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          type: 'category',
          data: months,
        },
        yAxis: {
          type: 'value',
          max: 5000,
        },
        series: [
          {
            name: '实际收入金额',
            type: 'bar',
            barWidth: '5%',
            data: organAcqId?.map(o => { return [o.daySuccCount].toString()}).map(Number).map(o=>o/100)
          },
          {
            name: '支付失败金额',
            type: 'bar',
            barWidth: '20%',
            data: organAcqId?.map(o => { return [o.dayFailAcct].toString() }).map(Number).map(o=>o/100)
          },
          {
            name: '退款金额',
            type: 'bar',
            barWidth: '5%',
            data: organAcqId?.map(o => { return [o.dayRefundAcct].toString() }).map(Number).map(o=>o/100)
          }

        ],
        color: ['#3c5fff', '#e53e3b', '#d1dca9'],

        // dataZoom: {
        //   xAxisIndex: [0],
        // show: true, // 为true 滚动条出现
        // realtime: true,  
        // type:'slider', // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
        // height: 20, // 表示滚动条的高度，也就是粗细
        // start: 1, // 表示默认展示20%～80%这一段。
        // end: 80
        // }



      }


      setTimeout(() => {
        loading.value = false
        setTimeout(() => {
          nextTick(() => useEcharts(payOrderCountChart.value as HTMLDivElement).setOption(option))
        }, 100)
      }, 100)
    }
    const updateChart = () => {
      useEcharts(payOrderCountChart.value as HTMLDivElement).resize()
    }
    onMounted(init)
    onBeforeUnmount(() => {
      dispose(payOrderCountChart.value as HTMLDivElement)
      // clearInterval(interval)
    })
    return {
      loading,
      payOrderCountChart,
      updateChart,
    }
  },
})
</script>

<style lang="less" scoped>
.chart-item-container {
  width: 100%;

  .chart-item {
    height: 30vh;
  }
}
</style>