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

任务一：用多个饼状图展示设备每天各状态时间

编写Vue工程代码，根据接口，用多个饼状图展示OP170B该设备的每天各个状态的持续时长（秒）占比，同时将用于图表展示的数据结构在浏览器的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]})
     }
        // console.log(bl);
        if(i%2 == 0){
          a = '25%'
          b = '75%'
        }else{
          a = '75%'
          b = '25%'
        }
        if(i == 0){
          a = '25%'
          b = '25%'
        }
        if(i == dataAll.length - 1){
          a = '75%'
          b = '75%'
        }
        series.push(
          {
            data:bl,
            type:'pie',
            name:dataAll[i].name,
            radius:'35%',
            label:{
              formatter:dataAll[i].name + '日 {b}{d}%',
            },
            center:[a,b]
          }
        )
        bl = []
      }

      var options = {
        title:{
          text:'多个饼状图展示OP170B该设备的每天各个状态的持续时长（秒）占比'
        },
        series:series
      }

      myChart.setOption(options)

任务二：用柱状图展示每日各设备产量

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

var names = [];var number = []
      for(let i in dataAll){
        names.push(dataAll[i].name)
        number.push(dataAll[i].status)
      }

      var options = {
        title:{
          text:'柱状图展示每日各设备的产量'
        },
        xAxis:{
          name:'设备',
          data:names
        },
        yAxis:{
          name:'产量'
        },
        series:{
          data:number,
          type:'bar',
        }
      }

      myChart.setOption(options)

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

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

var options = {
        title:{
          text:'单轴散点图展示各设备加工每件产品所需时长（秒）'
        },
        singleAxis:{
          name:'所需时长',
          top:'20%',
          bottom:'90%'
        },
        series:{
          coordinateSystem:'singleAxis',
          data:number,
          type:'scatter',
          itemStyle:{
            normal:{
              label:{
                formatter:function(a){
                    return names[a.dataIndex]
                },
                show:true,
                position:'top'
              },
            }
          },
          symbolSize:function(i){
            return i * 3
          }
        }
      }

      myChart.setOption(options)

任务四：用折线图展示PM2.5浓度变化

编写Vue工程代码，根据接口，用折线图展示PM2.5浓度变化，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

 var options = {
        title:{
          text:'折线图展示PM2.5浓度变化'
        },
        xAxis:{
          data:dataAll[0].time,
          name:'时间/小时'
        },
        yAxis:{},
        series:[
          {
            data:dataAll[0].status,
            type:'line',
            name:dataAll[0].name
          },
          {
            data:t,
            type:'line',
            name:dataAll[1].name
          },
        ]
      }

      myChart.setOption(options)

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

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

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)

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