123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183 |
- <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>
|