| | |
| | | <template> |
| | | <div class="leftMnu"> |
| | | <div class="menuBox"> |
| | | <chart-vue :childData="childData"></chart-vue> |
| | | <chart-vue></chart-vue> |
| | | </div> |
| | | <div class="menuBox"> |
| | | <chart-vue :childData="childData1"></chart-vue> |
| | | <chart-vue1></chart-vue1> |
| | | </div> |
| | | <div class="menuBox"> |
| | | <chart-vue :childData="childData2"></chart-vue> |
| | | <chart-vue2></chart-vue2> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | <script> |
| | | import * as echarts from 'echarts'; |
| | | import chartVue from './list/chart.vue'; |
| | | import chartVue1 from './list/chart1.vue'; |
| | | import chartVue2 from './list/chart2.vue'; |
| | | import data from './data.js'; |
| | | export default { |
| | | components: { |
| | | chartVue |
| | | chartVue, chartVue1, chartVue2 |
| | | }, |
| | | props: { |
| | | leftChartData: { |
| | | type: Object, |
| | | required: true |
| | | }, |
| | | }, |
| | | computed: { |
| | | |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | watch: { |
| | | |
| | | }, |
| | | |
| | | mounted() { |
| | | this.initEchart(); |
| | | window.regionWeather = null; |
| | | |
| | | }, |
| | | methods: { |
| | | initEchart() { |
| | | this.initEchart1(); |
| | | this.initEchart2(); |
| | | this.initEchart3(); |
| | | }, |
| | | initEchart1() { |
| | | var chart1= data[3]; |
| | | chart1.id = "myChart01"; |
| | | this.childData =chart1 |
| | | }, |
| | | initEchart2() { |
| | | var chart2= data[4]; |
| | | chart2.id = "myChart02"; |
| | | this.childData1 = chart2 |
| | | }, initEchart3() { |
| | | var chart3= data[5]; |
| | | chart3.id = "myChart03"; |
| | | this.childData2 = chart3 |
| | | } |
| | | |
| | | } |
| | | } |
| | | </script> |
| | |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | |
| | | .menuBox { |
| | | width: 100%; |
| | | height: 33%; |
| | |
| | | .aside-title { |
| | | box-sizing: border-box; |
| | | padding-left: 30px; |
| | | |
| | | font-size: 15px; |
| | | font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular; |
| | | color: #fff; |
| | |
| | | .chartBox { |
| | | width: calc(100% - 10px); |
| | | height: calc(100% - 10px); |
| | | |
| | | position: absolute; |
| | | } |
| | | } |