zhgdyun/src/views/projectAdmin/zjsj/quality/leftBottom.vue

<template>
  <Card title="大面积混凝土展示">
    <div class="checkChart" ref="checkChart"></div>
    <div class="btn">远程验收</div>
  </Card>
</template>

<script>
import Card from "../components/Card.vue";
import echarts from "echarts4";
export default {
  components: { Card },
  data() {
    return {};
  },
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      const checkChart = echarts.init(this.$refs.checkChart);
      const option = {
        legend: {
          data: ["A区", "B区", "C区"],
          right: "5%",
          top: "5%",
          textStyle: {
            color: "#9ea3ab"
          }
        },
        grid: {
          left: "1%",
          right: "3%",
          bottom: "2%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          data: ["8-1", "8-2", "8-3", "8-4", "8-5", "8-6", "8-7", "8-8", "8-9"],
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#3a4354"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#9ea3ab"
            }
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "solid",
              color: "#3a4354"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#9ea3ab"
            }
          }
        },
        series: [
          {
            name: "A区",
            type: "line",
            smooth: true,
            color: "#bf552b",
            data: [7, 10, 17, 9, 6, 13, 18, 10, 7]
          },
          {
            name: "B区",
            type: "line",
            smooth: true,
            color: "#66d4e0",
            data: [15, 4, 7, 13, 15, 8, 5, 8, 13]
          },
          {
            name: "C区",
            type: "line",
            smooth: true,
            color: "#d5a70a",
            data: [13, 10, 5, 11, 13, 9, 13, 5, 14]
          }
        ]
      };
      checkChart.setOption(option);
    }
  }
};
</script>

<style lang="less" scoped>
.checkChart {
  width: 100%;
  height: calc(100% - 71px);
}
.btn {
  margin: 8px auto;
  width: calc(100% - 40px);
  height: 55px;
  line-height: 55px;
  text-align: center;
  font-size: 28px;
  font-weight: bold;
  color: #02d5d2;
  background: url(../assets/images/sourse/bg-car-count.png) no-repeat;
  background-size: 100% 100%;
}
</style>