vis389/src/views/bigScreen/drivingCabin/right2.vue

<template>
  <div>
    <container3 title="装药量概况">
      <el-date-picker
        slot="datePicker"
        v-model="dateRange"
        size="small"
        style="width: 240px"
        value-format="yyyy-MM-dd"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>
      <div style="height: 100%; width: 100%" ref="chart"></div>
    </container3>
  </div>
</template>

<script>
import scalseBox from "../components/scaleBox.vue";
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container3 from "./components/container3/index.vue";

import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
export default {
  mixins: [resize],
  name: "right2",
  components: {
    scalseBox,
    bigScreenHead,
    rocketTit,
    container3,
  },
  data() {
    return {
      dateRange: [],
      chart: null,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart);

      this.request({
        url: "/hx/cockpitOverview/chargeQuantityList",
        method: "get",
      }).then((res) => {
        console.log(res);

        let titData = [];
        let actualQuantity = [];
        let forecastQuantity = [];
        let targetCompletionRate = [];
        for (let i = 0; i < res.data.length; i++) {
          const item = res.data[i];
          titData.push(item.month);
          actualQuantity.push(item.actualQuantity);
          forecastQuantity.push(item.forecastQuantity);
          targetCompletionRate.push(item.targetCompletionRate);
        }
        this.chart.setOption({
          legend: {
            data: ["实际", "预测", "目标完成率"],
            textStyle: {
              color: "#fff",
            },
          },
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "3%",
            right: "6%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              type: "category",
              data: titData,
              // data: [
              //   '2021-01',
              //   '2021-02',
              //   '2021-03',
              //   '2021-04',
              //   '2021-05',
              //   '2021-06',
              //   '2021-07',
              //   '2021-08',
              //   '2021-09',
              //   '2021-10',
              //   '2021-11',
              //   '2021-12',
              // ],
              axisPointer: {
                type: "shadow",
              },
              axisLine: {
                lineStyle: {
                  color: "rgb(255, 255, 255)",
                },
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "万元",
              min: 0,
              axisLabel: {
                formatter: "{value}",
              },
              splitLine: {
                show: false, //不显示网格线
              },
              splitArea: {
                show: false, //不显示网格区域
              },
              axisLine: {
                lineStyle: {
                  color: "rgb(255, 255, 255)",
                },
              },
            },
            {
              type: "value",

              interval: 20,
              axisLabel: {
                formatter: "{value} %",
              },
              splitLine: {
                show: false, //不显示网格线
              },
              splitArea: {
                show: false, //不显示网格区域
              },
              axisLine: {
                lineStyle: {
                  color: "rgb(255, 255, 255)",
                },
              },
            },
          ],
          grid: {
            containLabel: true,
            width: "99%",
            left: 0,
            top: 50,
            bottom: 50,
          },
          // dataZoom: {
          //   type: 'slider',
          //   start: 0,
          //   end: this.dataZoomEnd(titData.length, 7),
          // },
          dataZoom: [
            {
              type: "slider",
              textStyle: {
                color: "#fff",
              },
              startValue: this.dataZoomStart(titData.length, 4, "start"),
              endValue: this.dataZoomStart(titData.length, 4, "end"),
            },
            {
              type: "inside",
            },
          ],
          series: [
            {
              name: "预测",
              type: "bar",
              z: "-1",
              barGap: "-75%",
              barWidth: 30,
              itemStyle: {
                color: "rgba(145, 213, 254, .3)",
              },
              data: forecastQuantity,
            },
            {
              name: "实际",
              type: "bar",
              barWidth: 15,
              position: [0, 0],
              itemStyle: {
                color: {
                  type: "linear", // 线性渐变
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#B5D3FE", // 0%处的颜色为红色
                    },
                    {
                      offset: 1,
                      color: "#7EA7FC", // 100%处的颜色为蓝
                    },
                  ],
                },
              },
              data: actualQuantity,
            },
            {
              name: "目标完成率",
              type: "line",
              yAxisIndex: 1,
              smooth: false,
              data: targetCompletionRate,
              // data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
              itemStyle: {
                normal: {
                  color: "rgba(246, 217, 126, 1)",
                },
              },
              symbol: "none",
            },
          ],
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.num {
  font-size: 30px;
  font-family: Roboto-Black, Roboto;
  font-weight: 900;
  color: #f6d97e;
  line-height: 35px;
  //   margin-right: 3px;
}
.num2 {
  font-size: 30px;
  font-family: Roboto-Black, Roboto;
  font-weight: 900;
  color: rgba(16, 152, 255, 1);
  line-height: 35px;
}
</style>