JT-CIM/src/views/Map3d/components/RightHeading.vue

<template>
  <div class="container">
    <div class="echartsLine">
      <div class="mt-4">

      </div>
      <div class="mt-5">

      </div>
      <div class="mt-6">

      </div>

    </div>


  </div>
</template>

<script>
import EchartsLine from "./EchartsLine.vue";

export default {
  name: "RightHeading",
  components: {EchartsLine},
  data() {
    return {
      data1: [
        {
          "lineColor": "#2f63db",
          "areaStyle": true,
          "smooth": true,
          "areaColor": "rgba(0,253,203,0.5)",
          "xData": [
            "03-10 18:00",
            "03-10 19:00",
            "03-10 20:00",
            "03-10 21:00",
            "03-10 22:00",
            "03-10 23:00",
            "03-11 00:00",
            "03-11 01:00",
            "03-11 02:00",
            "03-11 03:00",
            "03-11 04:00",
            "03-11 05:00",
            "03-11 06:00",
            "03-11 07:00",
            "03-11 08:00",
            "03-11 09:00",
            "03-11 10:00",
            "03-11 11:00",
            "03-11 12:00",
            "03-11 13:00",
            "03-11 14:00",
            "03-11 15:00",
            "03-11 16:00",
            "03-11 17:00"
          ],
          "yData": [
            "2925.51",
            "2925.51",
            "2925.50",
            "2925.49",
            "2925.48",
            "2925.47",
            "2925.46",
            "2925.45",
            "2925.47",
            "2925.49",
            "2925.53",
            "2925.58",
            "2925.62",
            "2925.65",
            "2925.67",
            "2925.67",
            "2925.66",
            "2925.65",
            "2925.63",
            "2925.61",
            "2925.58",
            "2925.57",
            "2925.55",
            "2925.55"
          ],
          "name": "水位",
          "unit": "m"
        },
        {
          "lineColor": "#cf954b",
          "areaStyle": true,
          "smooth": true,
          "areaColor": "rgba(0,229,255,0.5)",
          "xData": [
            "03-10 18:00",
            "03-10 19:00",
            "03-10 20:00",
            "03-10 21:00",
            "03-10 22:00",
            "03-10 23:00",
            "03-11 00:00",
            "03-11 01:00",
            "03-11 02:00",
            "03-11 03:00",
            "03-11 04:00",
            "03-11 05:00",
            "03-11 06:00",
            "03-11 07:00",
            "03-11 08:00",
            "03-11 09:00",
            "03-11 10:00",
            "03-11 11:00",
            "03-11 12:00",
            "03-11 13:00",
            "03-11 14:00",
            "03-11 15:00",
            "03-11 16:00",
            "03-11 17:00"
          ],
          "yData": [
            345,
            345,
            341,
            337,
            333,
            329,
            325,
            321,
            329,
            337,
            353,
            374,
            392,
            406,
            415,
            415,
            410,
            406,
            396,
            387,
            374,
            370,
            362,
            362
          ],
          "name": "流量",
          "unit": "m³/s"
        }
      ]
    }
  }
}
</script>

<style scoped>

.mt-4 {
  height: 250rem;
  background-color: blue;
  width: 100%;
  position: relative;
  top: 10%;

}
.mt-5 {
  height: 250rem;
  background-color:yellow;
  width: 100%;
  position: relative;

}

.container {
  right: 0%;
  height: 85%;
  width: 20%;
  background-color: red;
  position: absolute;
  top: 10%;
  transition: opacity .5s;

}
</style>