大数据应用开发-可视化-第四套

题目一

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

      var machineName =objdata.map(item=>item.name)
      var startTime =objdata.map((item)=>item.start)
      var stopTime =objdata.map((item)=>item.stop)
      var downTime =objdata.map((item)=>item.down)

      var option = {
        tooltip: {
          trigger: "axis",
           // axisPointer: {
           //   type: "shadow",
           //  },
        },
        title: {
          text: "柱状图展示设备历史各个状态持续时长",
        },
        legend: {
          // data: ["运行时长", "停止时长", "离线时长"],
        },
        xAxis: {
          type: "category",
          data: machineName,
        },
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "运行时长",
            type: "bar",
            data: startTime,
          },
          {
            name: "停止时长",
            type: "bar",
            data: stopTime,
          },
          {
            name: "离线时长",
            type: "bar",
            data: downTime,
          },
        ],
      };

      myChart.setOption(option);

题目二

编写Vue工程代码，根据接口，用柱状图展示每日所有车间各设备平均运行时长（秒，四舍五入保留两位小数），每日里的所有设备按照接口返回的数据顺序展示即可，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。

      let xdata = dataFC01.map((i) => i.date);
      let yFc01 = dataFC01.map((i) => i.avgTotal);
      let yFc02 = dataFC02.map((i) => i.avgTotal);
      let yFc03 = dataFC03.map((i) => i.avgTotal);

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        title: {
          text: "柱状图展示每日所有车间各设备平均运行时长",
        },
        xAxis: {
          data: xdata,
          type: "category",
        },
        yAxis: {
          type: "value",
        },
        series: [
          { data: yFc01, type: "bar" },
          { data: yFc02, type: "bar" },
          { data: yFc03, type: "bar" },
        ],
      };
      mychart.setOption(option);

题目三

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

      let date=arr1.map((item)=>item.date)
      let time=arr1.map((item)=>item.time)

      var option = {
        title: {
          text: "折线图展示某设备每日运行时长",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: date,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            data: time,
          },
        ],
      };
      mychart.setOption(option);

题目四

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

      var option = {
        title: {
          text: "用条形图展示每日各设备产量",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: Object.keys(seriesData),
        },
        yAxis: {
          type: "value",
        },
        xAxis: {
          type: "category",
          data: xAxisData,
        },
        series: Object.keys(seriesData).map((name) => ({
          name: name,
          type: "bar",
          data: seriesData[name],
        })),
      };
      myChart.setOption(option);

题目五

编写Vue工程代码，根据接口，用折柱混合图展示设备日均产量（四舍五入保留两位小数）和所在车间日均产量（四舍五入保留两位小数），其中柱状图展示各设备的日均产量，折线图展示该设备所在车间的日均产量，同时将用于图表展示的数据结构在浏览器的console中进行打印输出，将图表可视化结果和浏览器console打印结果分别截图并粘贴至客户端桌面【Release\任务E提交结果.docx】中对应的任务序号下。

      let machineNames = Avg.map((item) => item.machineName);
      let machineAvgs = Avg.map((item) => item.machineAvg);
      let factorys = Avg.map((item) => item.factoryName);
      let factoryAvgs = Avg.map((item) => item.factoryAvg);

      var option = {
        title: {
          text: "折柱混合图展示设备日均产量和所在车间日均产量",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: [
          {
            type: "category",
            data: machineNames,
          },
          {
            type: "category",
            data: factorys,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
          {
            type: "value",
          },
        ],
        series: [
          {
            type: "bar",
            data: machineAvgs,
          },
          {
            type: "line",
            data: factoryAvgs,
          },
        ],
      };
      mychart.setOption(option);