<template>
  <div class="app-container">
    <div class="exit" @click="exitFun"></div>

    <div class="chart1">
      <div class="title">订单执行分析</div>
      <div class="border"></div>
      <div class="chart11">
        <Chart ref="chart11"></Chart>
      </div>
      <div class="chart12">
        <Chart ref="chart12"></Chart>
      </div>
    </div>
    <div class="chart2">
      <div class="title">订单履约率</div>
      <div class="border"></div>
      <Chart ref="chart2"></Chart>
    </div>
    <div class="chart3">
      <div class="title">准时交付率</div>
      <div class="border"></div>
      <Chart ref="chart3"></Chart>
    </div>
    <div class="chart4">
      <div class="title"></div>
      <div class="border"></div>
      <div class="chart41">
        <Chart ref="chart41"></Chart>
      </div>
      <div class="chart42">
        <Chart ref="chart42"></Chart>
      </div>
      <div class="chart43">
        <Chart ref="chart43"></Chart>
      </div>
    </div>
    <div class="chart5">
      <div class="title">质量分析</div>
      <div class="border"></div>
      <Chart ref="chart5"></Chart>
    </div>
    <div class="chart6">
      <div class="title">当年市场不良率</div>
      <div class="border"></div>
      <Chart ref="chart6"></Chart>
    </div>
    <div class="chart7">
      <div class="title">重点工序监控</div>
      <div class="border"></div>
      <Chart ref="chart7"></Chart>
    </div>
    <div class="bottom">
      <div style="left: 20%">单台能耗</div>
      <div style="left: 50%">设备状态</div>
      <div style="left: 80%">产线OEE趋势</div>
    </div>
  </div>
</template>

<script>
import Chart from "@/components/board/Chart";

export default {
  name: "Liner",
  components: {
    Chart
  },
  props: {
    exit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {}
  },
  mounted() {
    const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
    this.$refs.chart11.setData({
      tooltip: {
        trigger: "item",
      },
      title: {
        text: "3日完成订单",
        left: "20%",
        top: "10%",
        textStyle: {
          color: "#fff",
          fontSize: 0.7 * vw,
          align: "center",
        },
      },
      series: [
        {
          name: "人员类型",
          type: "pie",
          center: ['42%', '60%'],
          radius: ["23%", "35%"],
          color: [
            "#16ff39",
            "#ffe716",
          ],
          labelLine: {
            normal: {
              show: true,
              length: 0.3 * vw,
              length2: 0.3 * vw,
              lineStyle: {
                width: 2,
              },
            },
          },
          labelLayout: {
            moveOverlap: 'shiftX'
          },
          label: {
            normal: {
              formatter: "{b}\n{c}",
              fontSize: 0.7 * vw,
              color: '#fff'
            },
          },
          data: [
            {
              value: 30,
              name: "已完成",
            },
            {
              value: 70,
              name: "未完成",
            },
          ],
        },
      ],
    })
    this.$refs.chart12.setData({
      tooltip: {
        trigger: "item",
      },
      title: {
        text: "本月完成订单",
        right: "20%",
        top: "10%",
        textStyle: {
          color: "#fff",
          fontSize: 0.7 * vw,
          align: "center",
        },
      },
      series: [
        {
          name: "人员类型",
          type: "pie",
          center: ['58%', '60%'],
          radius: ["23%", "35%"],
          color: [
            "#16ff39",
            "#ffe716",
          ],
          labelLine: {
            normal: {
              show: true,
              length: 0.3 * vw,
              length2: 0.3 * vw,
              lineStyle: {
                width: 2,
              },
            },
          },
          labelLayout: {
            moveOverlap: 'shiftX'
          },
          label: {
            normal: {
              formatter: "{b}\n{c}",
              fontSize: 0.7 * vw,
              color: '#fff'
            },
          },
          data: [
            {
              value: 30,
              name: "已完成",
            },
            {
              value: 70,
              name: "未完成",
            },
          ],
        },
      ],
    })
    this.$refs.chart2.setData({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff",
          },
        },
      },
      grid: {
        borderWidth: 0,
        top: 1.5 * vw,
        bottom: 1.5 * vw,
        left: 2.5 * vw,
        right: 2.5 * vw,
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        x: "center",
        top: "0",
        textStyle: {
          fontSize: 0.6 * vw,
          color: "#90979c",
        },
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
          },
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        },
      ],
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw
          },
          splitArea: {
            show: false,
          },
        },
        {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "日计划数",
          type: "bar",
          borderWidth: '15%',
          itemStyle: {
            normal: {
              color: "#5ecee0",
            },
          },
          data: [
            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
          ],
        },

        {
          name: "日产量",
          type: "bar",
          borderWidth: '15%',
          barGap: "-100%",
          itemStyle: {
            normal: {
              color: "#78b4fe",
              barBorderRadius: 0,
            },
          },
          data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001],
        },
        {
          name: "总数",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: "rgba(252,230,48,1)",
              barBorderRadius: 0,
              label: {
                show: true,
                position: "top",
                color: "#fff",
                fontSize: 0.6 * vw,
                formatter: function (p) {
                  return (p.value > 0 ? p.value : "") + '%';
                },
              },
            },
          },
          data: [
            106, 111, 96, 65, 86, 126, 101, 94, 100
          ],
        },
      ],
    })
    this.$refs.chart3.setData({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff",
          },
        },
      },
      grid: {
        borderWidth: 0,
        top: 1.5 * vw,
        bottom: 1.5 * vw,
        left: 2.5 * vw,
        right: 2.5 * vw,
        textStyle: {
          color: "#fff",
        },
      },
      legend: {
        x: "center",
        top: "0",
        textStyle: {
          fontSize: 0.6 * vw,
          color: "#90979c",
        },
      },
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitArea: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw,
          },
          data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
        },
      ],
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw
          },
          splitArea: {
            show: false,
          },
        },
        {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#90979c",
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            fontSize: 0.5 * vw
          },
          splitArea: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "应完成订单",
          type: "bar",
          barWidth: '30%',
          itemStyle: {
            normal: {
              color: "#5ecee0",
              barBorderRadius: '50%',
            },
          },
          data: [
            709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
          ],
        },

        {
          name: "实际完成订单",
          type: "bar",
          barWidth: '30%',
          barGap: "-100%",
          itemStyle: {
            normal: {
              color: "#78b4fe",
              barBorderRadius: '50%',
            },
          },
          data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001],
        },
        {
          name: "准时交付率",
          type: "line",
          symbolSize: 10,
          symbol: "circle",
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: "#ebf2ff",
              barBorderRadius: 0,
              label: {
                show: true,
                position: "top",
                color: "#fff",
                fontSize: 0.6 * vw,
                formatter: function (p) {
                  return (p.value > 0 ? p.value : "") + '%';
                },
              },
            },
          },
          data: [
            106, 111, 96, 65, 86, 126, 101, 94, 100
          ],
        },
      ],
    })
    this.$refs.chart41.setData({
      tooltip: {},
      grid: {
        top: "25%",
        left: "5%",
        right: "1%",
        bottom: "8%",
        containLabel: true,
      },
      legend: {
        itemGap: 50,
        top: "3%",
        textStyle: {
          fontSize: 0.6 * vw,
          color: "#f9f9f9",
          borderColor: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#f9f9f9",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#d1e6eb",
              margin: 15,
              fontSize: 0.4 * vw,
            },
          },
          axisTick: {
            show: false,
          },
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        },
      ],
      yAxis: [
        {
          name: '能耗/kw·h',
          type: "value",
          min: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              color: "#d1e6eb",
            },
            fontSize: 0.4 * vw,
            formatter: '{value}%'
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "能耗",
          type: "line",
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#4268aa", // 线条颜色
            },
            borderColor: "#ecf3ff",
          },
          label: {
            show: true,
            position: "top",
            fontSize: 0.4 * vw,
            textStyle: {
              color: "#fff",
            },
            formatter: '{c}kw·h'
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
        },
      ],
    })
    this.$refs.chart42.setData({
      series: [
        {
          name: "第一个圆环",
          type: "pie",
          clockWise: false,
          radius: ['35%', '40%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#203665",
            },
          },
          hoverAnimation: false,
          center: ["20%", "50%"],
          data: [
            {
              value: 25,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#3a7ad5",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.6 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "}" +
                      "\n{b|设备总数}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#2c6cc4",
                  shadowColor: "#2c6cc4",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 75,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#24375c",
                },
                emphasis: {
                  color: "#24375c",
                },
              },
            },
          ],
        },
        {
          name: "第二个圆环",
          type: "pie",
          clockWise: false,
          radius: ['35%', '40%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#203665",
            },
          },
          hoverAnimation: false,
          center: ["50%", "50%"],
          data: [
            {
              value: 50,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#d03e93",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.5 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "}" +
                      "\n{b|在网设备数}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#ef45ac",
                  shadowColor: "#ef45ac",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 50,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#412a4e",
                },
                emphasis: {
                  color: "#412a4e",
                },
              },
            },
          ],
        },
        {
          name: "第三个圆环",
          type: "pie",
          clockWise: false,
          radius: ['35%', '40%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#203665",
            },
          },
          hoverAnimation: false,
          center: ["80%", "50%"],
          data: [
            {
              value: 75,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#603dd0",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.5 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "}" +
                      "\n{b|离线设备数}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#613fd1",
                  shadowColor: "#613fd1",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 25,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#453284",
                },
                emphasis: {
                  color: "#453284",
                },
              },
            },
          ],
        },
      ],
    })
    this.$refs.chart43.setData({
      tooltip: {},
      grid: {
        top: "25%",
        left: "5%",
        right: "1%",
        bottom: "8%",
        containLabel: true,
      },
      legend: {
        itemGap: 0,
        top: "3%",
        textStyle: {
          fontSize: 0.6 * vw,
          color: "#f9f9f9",
          borderColor: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#f9f9f9",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#d1e6eb",
              margin: 15,
              fontSize: 0.4 * vw,
            },
          },
          axisTick: {
            show: false,
          },
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        },
      ],
      yAxis: [
        {
          name: 'OEE',
          type: "value",
          min: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              color: "#d1e6eb",
            },
            fontSize: 0.4 * vw,
            formatter: '{value}%'
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "一期",
          type: "line",
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#e8f1ff", // 线条颜色
            },
            borderColor: "#28ffb3",
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
        },
        {
          name: "二期",
          type: "line",
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#4268aa", // 线条颜色
            },
            borderColor: "#ecf3ff",
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
        },
      ],
    })
    this.$refs.chart5.setData({
      series: [
        {
          name: "第一个圆环",
          type: "pie",
          clockWise: false,
          radius: ['40%', '45%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#203665",
            },
          },
          hoverAnimation: false,
          center: ["20%", "50%"],
          data: [
            {
              value: 25,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#3a7ad5",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.6 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "}" +
                      "\n{b|合格率}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#2c6cc4",
                  shadowColor: "#2c6cc4",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 75,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#24375c",
                },
                emphasis: {
                  color: "#24375c",
                },
              },
            },
          ],
        },
        {
          name: "第二个圆环",
          type: "pie",
          clockWise: false,
          radius: ['40%', '45%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#203665",
            },
          },
          hoverAnimation: false,
          center: ["50%", "50%"],
          data: [
            {
              value: 50,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#d03e93",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.5 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "}" +
                      "\n{b|OQC抽检分数}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#ef45ac",
                  shadowColor: "#ef45ac",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 50,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#412a4e",
                },
                emphasis: {
                  color: "#412a4e",
                },
              },
            },
          ],
        },
        {
          name: "第三个圆环",
          type: "pie",
          clockWise: false,
          radius: ['40%', '45%'],
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              shadowBlur: 0,
              shadowColor: "#203665",
            },
          },
          hoverAnimation: false,
          center: ["80%", "50%"],
          data: [
            {
              value: 75,
              label: {
                normal: {
                  rich: {
                    a: {
                      color: "#603dd0",
                      align: "center",
                      fontSize: 1.1 * vw,
                      fontWeight: "bold",
                    },
                    b: {
                      color: "#fff",
                      align: "center",
                      fontSize: 0.5 * vw,
                    },
                  },
                  formatter: function (params) {
                    return (
                      "{a|" +
                      params.value +
                      "}" +
                      "\n{b|质量控制达标率}"
                    );
                  },
                  position: "center",
                  show: true,
                  textStyle: {
                    fontSize: "14",
                    fontWeight: "normal",
                    color: "#fff",
                  },
                },
              },
              itemStyle: {
                normal: {
                  color: "#613fd1",
                  shadowColor: "#613fd1",
                  shadowBlur: 0,
                },
              },
            },
            {
              value: 25,
              name: "invisible",
              itemStyle: {
                normal: {
                  color: "#453284",
                },
                emphasis: {
                  color: "#453284",
                },
              },
            },
          ],
        },
      ],
    })
    this.$refs.chart6.setData({
      tooltip: {},
      grid: {
        top: "25%",
        left: "5%",
        right: "1%",
        bottom: "8%",
        containLabel: true,
      },
      legend: {
        itemGap: 50,
        top: "3%",
        textStyle: {
          fontSize: 0.6 * vw,
          color: "#f9f9f9",
          borderColor: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#f9f9f9",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#d1e6eb",
              margin: 15,
              fontSize: 0.4 * vw,
            },
          },
          axisTick: {
            show: false,
          },
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        },
      ],
      yAxis: [
        {
          name: '不良率',
          type: "value",
          min: 0,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              color: "#d1e6eb",
            },
            fontSize: 0.4 * vw,
            formatter: '{value}%'
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "当年市场不良率",
          type: "line",
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#e8f1ff", // 线条颜色
            },
            borderColor: "#28ffb3",
          },
          label: {
            show: true,
            position: "bottom",
            fontSize: 0.4 * vw,
            textStyle: {
              color: "#fff",
            },
            formatter: '{c}%'
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [1.4, 2.5, 2.2, 2.2, 2.2, 1.5, 2.2],
        },
        {
          name: "目标市场不良率",
          type: "line",
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#4268aa", // 线条颜色
            },
            borderColor: "#ecf3ff",
          },
          label: {
            show: true,
            position: "top",
            fontSize: 0.4 * vw,
            textStyle: {
              color: "#fff",
            },
            formatter: '{c}%'
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [1.5, 2.7, 2.4, 2.3, 2.4, 1.6, 2.3],
        },
      ],
    })
    this.$refs.chart7.setData({
      tooltip: {},
      grid: {
        top: "25%",
        left: "5%",
        right: "5%",
        bottom: "8%",
        containLabel: true,
      },
      legend: {
        itemGap: 50,
        top: "2%",
        textStyle: {
          color: "#f9f9f9",
          borderColor: "#fff",
        },
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: true,
          axisLine: {
            //坐标轴轴线相关设置。数学上的x轴
            show: true,
            lineStyle: {
              color: "#f9f9f9",
            },
          },
          axisLabel: {
            //坐标轴刻度标签的相关设置
            textStyle: {
              color: "#d1e6eb",
              margin: 15,
            },
          },
          axisTick: {
            show: false,
          },
          data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        },
      ],
      yAxis: [
        {
          type: "value",
          min: 0,
          // max: 140,
          splitNumber: 7,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#d1e6eb",
            },
          },
          axisTick: {
            show: false,
          },
        },
        {
          type: "value",
          min: 0,
          // max: 140,
          splitNumber: 7,
          splitLine: {
            show: true,
            lineStyle: {
              color: "#0a3256",
            },
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            margin: 5,
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#d1e6eb",
            },
            formatter: '{value}%'
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: "质检次数",
          type: "bar",
          barWidth: 20,
          tooltip: {
            show: false,
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#fff",
            },
          },
          itemStyle: {
            normal: {
              color: '#72b3fe'
            },
          },
          data: [200, 382, 102, 267, 186, 315, 316],
        },
        {
          name: "合格率",
          type: "line",
          yAxisIndex: 1,
          // smooth: true, //是否平滑曲线显示
          // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
          showAllSymbol: true,
          symbol: "emptyCircle",
          symbolSize: 6,
          lineStyle: {
            normal: {
              color: "#ecf3ff", // 线条颜色
            },
            borderColor: "#6d88bf",
          },
          label: {
            show: true,
            position: "top",
            textStyle: {
              fontSize: 0.5 * vw,
              color: "#fff",
            },
            formatter: '{c}%'
          },
          itemStyle: {
            normal: {
              color: "#28ffb3",
            },
          },
          tooltip: {
            show: false,
          },
          data: [96.74, 96.68, 98.76, 99.75, 98.58, 98.57, 98.43],
        },
      ],
    })
  },
  methods: {
    exitFun() {
      this.exit()
    }
  }
}
</script>
<style lang="less" scoped>
.app-container {
  background-color: #021e31;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.exit {
  background-image: url("~@/assets/model/factoryIntroduction/exit.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 1%;
  right: 1%;
  font-weight: bold;
  width: 2vw;
  height: 2vw;
  color: #e7b219;
}

.chart1 {
  content: "";
  background-image: url("~@/assets/model/dataCentre/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 10%;
  left: 5%;
  width: 18%;
  height: 11.1vw;

  .border {
    content: "";
    background-image: url("~@/assets/model/dataCentre/border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .title {
    position: absolute;
    top: -2vw;
    color: #fff;
    font-size: 1vw;
    border-left: 3px solid #0251d1;
    padding-left: 12px;
  }

  .chart11 {
    position: absolute;
    top: 0;
    left: 0;
    width: 70%;
    height: 100%;
  }

  .chart12 {
    position: absolute;
    top: 0;
    left: 30%;
    width: 70%;
    height: 100%;
  }
}

.chart2 {
  background-image: url("~@/assets/model/dataCentre/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 40%;
  left: 5%;
  width: 18%;
  height: 11.1vw;

  .border {
    content: "";
    background-image: url("~@/assets/model/dataCentre/border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .title {
    position: absolute;
    top: -2vw;
    color: #fff;
    font-size: 1vw;
    border-left: 3px solid #0251d1;
    padding-left: 12px;
  }
}

.chart3 {
  background-image: url("~@/assets/model/dataCentre/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 70%;
  left: 5%;
  width: 18%;
  height: 11.1vw;

  .border {
    content: "";
    background-image: url("~@/assets/model/dataCentre/border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .title {
    position: absolute;
    top: -2vw;
    color: #fff;
    font-size: 1vw;
    border-left: 3px solid #0251d1;
    padding-left: 12px;
  }
}

.chart4 {
  background-image: url("~@/assets/model/dataCentre/bg2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  transform: translateX(-50%);
  top: 70%;
  left: 50%;
  width: 45%;
  height: 11.1vw;

  .border {
    content: "";
    background-image: url("~@/assets/model/dataCentre/border2.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .chart41 {
    position: absolute;
    top: 14%;
    left: 3%;
    width: 28%;
    height: 80%;
    border: 1px solid #fff9;
  }

  .chart42 {
    position: absolute;
    top: 14%;
    left: 50%;
    width: 28%;
    height: 80%;
    border: 1px solid #fff9;
    transform: translateX(-50%);
  }

  .chart43 {
    position: absolute;
    top: 14%;
    right: 3%;
    width: 28%;
    height: 80%;
    border: 1px solid #fff9;
  }
}

.chart5 {
  background-image: url("~@/assets/model/dataCentre/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 10%;
  right: 5%;
  width: 18%;
  height: 11.1vw;

  .border {
    content: "";
    background-image: url("~@/assets/model/dataCentre/border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .title {
    position: absolute;
    top: -2vw;
    color: #fff;
    font-size: 1vw;
    border-left: 3px solid #0251d1;
    padding-left: 12px;
  }
}

.chart6 {
  background-image: url("~@/assets/model/dataCentre/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 40%;
  right: 5%;
  width: 18%;
  height: 11.1vw;

  .border {
    content: "";
    background-image: url("~@/assets/model/dataCentre/border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .title {
    position: absolute;
    top: -2vw;
    color: #fff;
    font-size: 1vw;
    border-left: 3px solid #0251d1;
    padding-left: 12px;
  }
}

.chart7 {
  background-image: url("~@/assets/model/dataCentre/bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 70%;
  right: 5%;
  width: 18%;
  height: 11.1vw;

  .border {
    content: "";
    background-image: url("~@/assets/model/dataCentre/border.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .title {
    position: absolute;
    top: -2vw;
    color: #fff;
    font-size: 1vw;
    border-left: 3px solid #0251d1;
    padding-left: 12px;
  }
}

.bottom {
  background-image: url("~@/assets/model/dataCentre/bottom.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 67%;
  left: 50%;
  width: 27%;
  height: 1.4vw;
  transform: translateX(-50%);

  div {
    position: absolute;
    font-size: 0.6vw;
    line-height: 1.4vw;
    color: #fff;
    transform: translateX(-50%);
  }
}
</style>
