diff --git a/src/views/index_v1.vue b/src/views/index_v1.vue index 212ae303..2305cd72 100644 --- a/src/views/index_v1.vue +++ b/src/views/index_v1.vue @@ -42,28 +42,7 @@ - - - @@ -86,26 +65,7 @@ import { getDataScreeningModelApi, import LineChart from './dashboard/LineChart' import RaddarChart from './dashboard/RaddarChart' import PieChart from './dashboard/PieChart' -import BarChart from './dashboard/BarChart' - -const lineChartData = { - newVisitis: { - expectedData: [100, 120, 161, 134, 105, 160, 165], - actualData: [120, 82, 91, 154, 162, 140, 145] - }, - messages: { - expectedData: [200, 192, 120, 144, 160, 130, 140], - actualData: [180, 160, 151, 106, 145, 150, 130] - }, - purchases: { - expectedData: [80, 100, 121, 104, 105, 90, 100], - actualData: [120, 90, 100, 138, 142, 130, 130] - }, - shoppings: { - expectedData: [130, 140, 141, 142, 145, 150, 160], - actualData: [120, 82, 91, 154, 162, 140, 130] - } -} +import BarChart from './dashboard/BarChart' export default { mixins: [resize], @@ -158,7 +118,10 @@ export default { ], type1:1, type2:1, - lineChartData: lineChartData.newVisitis + myCharts1:null, + myCharts2:null, + myCharts3:null, + myCharts4:null, } }, mounted(){ @@ -167,8 +130,18 @@ export default { this.InitEChartsTwo() this.InitEChartsThree() this.InitEChartsFour() + window.addEventListener('transitionend', this.$_sidebarResizeHandler) }, methods: { + $_sidebarResizeHandler(e) { + if (e.propertyName === 'width') { + console.log(e) + this.myCharts1.resize(); + this.myCharts2.resize(); + this.myCharts3.resize(); + this.myCharts4.resize(); + } + }, getTopData(){ getDataScreeningModelApi({}).then((response) => { this.topAreaOptions = response.data.data; @@ -294,12 +267,12 @@ export default { }, ], }; - let myCharts = echarts.init(document.querySelector('#lineChartOne')); - myCharts.setOption(option) + this.myCharts1 = echarts.init(document.querySelector('#lineChartOne')); + this.myCharts1.setOption(option) // 根据页面大小自动响应图表大小 - window.addEventListener("resize", function () { - myCharts.resize(); - }); + // window.addEventListener("resize1", function () { + // this.myCharts1.resize(); + // }); }); }, changType2(e){ @@ -422,13 +395,13 @@ export default { }, ], }; - let myCharts = echarts.init(document.querySelector('#lineChartTwo')); - myCharts.setOption(option) + this.myCharts2 = echarts.init(document.querySelector('#lineChartTwo')); + this.myCharts2.setOption(option) - // 根据页面大小自动响应图表大小 - window.addEventListener("resize", function () { - myCharts.resize(); - }); + // // 根据页面大小自动响应图表大小 + // window.addEventListener("resize2", function () { + // myCharts2.resize(); + // }); }); }, InitEChartsThree() { @@ -633,12 +606,12 @@ export default { }, ], }; - let myCharts = echarts.init(document.querySelector('#lineChartThree')); - myCharts.setOption(option) - // 根据页面大小自动响应图表大小 - window.addEventListener("resize", function () { - myCharts.resize(); - }); + this.myCharts3 = echarts.init(document.querySelector('#lineChartThree')); + this.myCharts3.setOption(option) + // // 根据页面大小自动响应图表大小 + // window.addEventListener("resize3", function () { + // myCharts3.resize(); + // }); }); }, InitEChartsFour() { @@ -774,16 +747,13 @@ export default { }, ], }; - let myCharts = echarts.init(document.querySelector('#barChartFour')); - myCharts.setOption(option) + this.myCharts4 = echarts.init(document.querySelector('#barChartFour')); + this.myCharts4.setOption(option) // 根据页面大小自动响应图表大小 - window.addEventListener("resize", function () { - myCharts.resize(); - }); + // window.addEventListener("resize4", function () { + // myCharts4.resize(); + // }); }); - }, - handleSetLineChartData(type) { - this.lineChartData = lineChartData[type] } } }