2022高职国家技能大赛（大数据竞赛）-模块E：数据可视化-任务书8（工业）

任务一：用饼状图展示每日各状态总时长

编写Vue工程代码，根据接口，用饼状图展示每日各状态总时长（秒），同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

 var series =[]
      var bl = [];var a = '';var b = ''
      for(let i in dataAll){
        for(let j in dataAll[i].status){
          bl.push({name:dataAll[i].status[j],value:dataAll[i].time[j]})
        }
        if(i%2 == 0){
          a = '25%'
          b = '75%'
        }else{
          b = '25%'
          a = '75%'
        }
        if(i == 0){
          a = '25%',
          b = '25%'
        }
        if(i == dataAll.length - 1){
          a = '75%',
          b = '75%'
        }
        series.push({
          data:bl,
          type:'pie',
          radius:'25%',
          label:{
            formatter: dataAll[i].name + '日 {b}{d}%'
          },
          center:[a,b]
        })
        bl = []
      }
      console.log(dataAll);

      var options = {
        title:{
          text:'饼状图展示每日各状态总时长（秒）'
        },
        series:series
      }

      myChart.setOption(options)

任务二：用柱状图展示设备历史各个状态持续时长

编写Vue工程代码，根据接口，用柱状图展示接口所有数据中各设备各个状态持续时长（秒），同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

var names = [];var start = [];var stop = [];var down = [];var status = ['运行','待机','离线']
      for(let i in dataAll){
        names.push(dataAll[i].name)
        if(dataAll[i].status.indexOf('运行') != -1){
          start.push(dataAll[i].time[dataAll[i].status.indexOf('运行')])
        }else{
          start.push(0)
        }
        if(dataAll[i].status.indexOf('待机') != -1){
          stop.push(dataAll[i].time[dataAll[i].status.indexOf('待机')])
        }else{
          stop.push(0)
        }
        if(dataAll[i].status.indexOf('离线') != -1){
          down.push(dataAll[i].time[dataAll[i].status.indexOf('离线')])
        }else{
          down.push(0)
        }
      }
      console.log(names,start,stop,down);

      var options = {
        tooltip:{},
        title:{
          text:'柱状图展示接口所有数据中各设备各个状态持续时长（秒）'
        },
        xAxis:{
          data:names,
          name:'设备'
        },
        yAxis:{
          name:'持续时长（秒）'
        },
        series:[
          {
            data:start,
            name:'运行',
            type:'bar'
          },
          {
            data:stop,
            name:'待机',
            type:'bar'
          },
          {
            data:down,
            name:'离线',
            type:'bar'
          },
        ]
      }


      myChart.setOption(options)

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

编写Vue工程代码，根据接口，用单轴散点图展示各设备加工每件产品所需时长(秒)，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

var names = [];var dl = []

      for(let i in dataAll){
        names.push(dataAll[i].name)
        dl.push(dataAll[i].time / dataAll[i].status)
      }
      console.log(names,dl);
      
      var options = {
        title:{
          text:'单轴散点图展示各设备加工每件产品所需时长(秒)'
        },
        singleAxis:{
          name:'所需时长',
          top:'60%',
          bottom:'50%'
        },
        series:{
          coordinateSystem:'singleAxis',
          type:'scatter',
          data:dl,
          itemStyle:{
            normal:{
              label:{
                formatter:function(a){
                    return names[a.dataIndex]
                  }
                },
                show:true,
                position:'top'
              }
            }
          },
          symbolSize:function(dataItem){
            return dataItem * 4
          }
        }
      }

      myChart.setOption(options)

任务四：用散点图展示环境湿度变化

编写Vue工程代码，根据接口，用基础散点图展示设备所处环境的湿度（Humidity）的变化，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

var dl = []
      for(let i = 0;i < dataAll[0].time.indexOf(dataAll[1].time[0]);i ++){
        if(i == dataAll[0].time.indexOf(dataAll[1].time[0]) -1){
          dl.push(dataAll[1].status[0])
        }else{
          dl.push(0)
        }
      }
      for(let i = dl.length;i < dataAll[0].status.length;i++){
        dl.push(0)
      }

      dataAll[1].status = dl

      var series = [];var xAxis = []

      for(let i in dataAll){
        series.push(
          {
            data:dataAll[i].status,
            type:'scatter',
            name:dataAll[i].name,
            symbolSize:function(item){
              if(item == 0){
                return item * 0
              }else{
                return item * 0.15
              }
            }
          }
        )
      }

      var options = {
        tooltip:{},
        legend:{},
        title:{
          text:'基础散点图展示设备所处环境的湿度（Humidity）的变化'
        },
        xAxis:{
          data:dataAll[0].time,
          name:'时间'
        },
        yAxis:{
          name:'湿度变化'
        },
        series:series
      }

      myChart.setOption(options)

任务五：用折柱混合图展示设备日均产量和所在车间日均产量

编写Vue工程代码，根据接口，用折柱混合图展示设备日均产量和所在车间日均产量，其中柱状图展示各设备的日均产量，折线图展示该设备所在车间的日均产量，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

console.log(diqu,diquz,names,cl);

      var options = {
        title:{
          text:'折柱混合图展示设备日均产量和所在车间日均产量'
        },
        xAxis:[
          {
            data:names,
            name:'设备'
          },
          {
            data:diqu,
            name:'车间'
          },
        ],
        yAxis:{
          name:'产量'
        },
        series:[
          {
            data:cl,
            type:'bar',
            name:'产量'
          },
          {
            data:diquz,
            type:'line',
            name:'地区'
          }
        ]
      }

      myChart.setOption(options)

本人学习不深，如有错误请指正