用单轴散点图展示各设备加工每件产品所需时长

编写Vue工程代码，根据接口，用单轴散点图展示各设备加工每件产品所需时长（秒），同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。

<template>
  <div class="m102" id="d102"></div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
import {onMounted,reactive} from 'vue'
export default {
       setup(){
        let data =reactive({})
        let title = []
        let singleAxis = []
        let series = []
        let Ti = []
        for(let i = 0;i<1201;i++){
            Ti [i] = i
        }
        async function getddd(){
            const res =await axios.get("/machine/getIndustrial")
            data =res.data.data
        }
        onMounted(async ()=>{
            await getddd()
            
            console.log("data",data)


           

            function time(a,b){
                let t1 = new Date(a)
                let t2 = new Date(b)
                let dev = t2 -t1
                return dev /1000
            }

            let newdata = data.map(item=>item.showFactProduceRecords.map(it=>{
                return [item.machineName,time(it.produceCodeStartTime,it.produceCodeEndTime)]
            })).flat()
            console.log(newdata)
             let de = newdata.map(item=>item[0])
             let device = Array.from(new Set(de.map(JSON.stringify))).map(JSON.parse)
            console.log(device)


            let newdata2 = Array.from(new Set(newdata.map(JSON.stringify))).map(JSON.parse)
            console.log(newdata2)


            let Data = newdata2.map(it=>{
                return [device.indexOf(it[0]),it[1]]
            })
            console.log("12",Data)


            device.forEach((name,idx)=>{
                title.push({
                    top:(idx+0.5)*100/4+"%",
                    text:name
                })

                singleAxis.push({
                    type:"category",
                    top:(idx*100)/4+"%",
                    height:(100/4)-10+"%",
                    data:Ti,
                    axisLabel:{
                        interval:199
                    }
                })
                series.push({
                    type:"scatter",
                    singleAxisIndex:idx,
                    coordinateSystem:"singleAxis",
                    data:[],
                    symbolSize:"30"
                })
            })


            Data.forEach(item=>{
                series[item[0]].data.push([item[1],item[0]])
            })

          
            let char =echarts.init(document.getElementById("d102"))
                char.setOption({
                    title:title,
                    singleAxis:singleAxis,
                    series:series
                })
        })
       }
}
</script>

<style>
.m102{
    height: 500px;
}
</style>