From d53fe2390628caa2ac99424c6961dc6a92aa47ca Mon Sep 17 00:00:00 2001 From: fengxiang <110431245@qq.com> Date: Tue, 17 Jul 2018 13:19:05 +0800 Subject: [PATCH] Merge branch 'master' of http://blit.7drlb.com:8888/r/screen_demo2 --- src/app/routes/forecasting-warning/forecasting-warning.component.ts | 92 +++++++++++++++++++++++++++++----------------- 1 files changed, 58 insertions(+), 34 deletions(-) diff --git a/src/app/routes/forecasting-warning/forecasting-warning.component.ts b/src/app/routes/forecasting-warning/forecasting-warning.component.ts index 6f7f56d..d9cfe0c 100644 --- a/src/app/routes/forecasting-warning/forecasting-warning.component.ts +++ b/src/app/routes/forecasting-warning/forecasting-warning.component.ts @@ -21,7 +21,7 @@ [x: string]: any; public isShow = true; - + colors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3']; public option = { title: { text: '', @@ -46,7 +46,13 @@ data: [], type: 'line', smooth: true, - name: '' + name: '', + itemStyle: { + color: '' + }, + areaStyle: { + normal: {} + } } ] }; @@ -64,7 +70,8 @@ } initForecasting() { - this.option['legend'] = {}; + delete this.option.series[1]; + delete this.option['legend']; this.option.xAxis.data = []; const temp = []; const humidity = []; @@ -87,30 +94,33 @@ } }); const forecasting_tempChart = echarts.init(document.getElementById('forecasting_temp')); - this.option.series[0].data = temp; - this.option.yAxis.name = '������������'; this.option.title.text = title + '(������)'; - forecasting_tempChart.setOption(this.option, false); + this.option.yAxis.name = '������������'; + this.option.series[0].data = temp; + this.option.series[0].itemStyle.color = this.colors[0]; forecasting_tempChart.setOption(this.option, false); window.onresize = forecasting_tempChart.resize; const forecasting_humidityChart = echarts.init(document.getElementById('forecasting_humidity')); - this.option.series[0].data = humidity; - this.option.yAxis.name = '���������%'; this.option.title.text = title + '(������)'; + this.option.yAxis.name = '���������%'; + this.option.series[0].data = humidity; + this.option.series[0].itemStyle.color = this.colors[1]; forecasting_humidityChart.setOption(this.option, false); window.onresize = forecasting_humidityChart.resize; const forecasting_pressureChart = echarts.init(document.getElementById('forecasting_pressure')); - this.option.series[0].data = pressure; - this.option.yAxis.name = '���������hPa'; this.option.title.text = title + '(������)'; + this.option.yAxis.name = '���������hPa'; + this.option.series[0].data = pressure; + this.option.series[0].itemStyle.color = this.colors[2]; forecasting_pressureChart.setOption(this.option, false); window.onresize = forecasting_pressureChart.resize; const forecasting_uviChart = echarts.init(document.getElementById('forecasting_uvi')); - this.option.series[0].data = uvi; - this.option.yAxis.name = '���������'; this.option.title.text = title + '(���������)'; + this.option.yAxis.name = '���������'; + this.option.series[0].data = uvi; + this.option.series[0].itemStyle.color = this.colors[3]; forecasting_uviChart.setOption(this.option, false); window.onresize = forecasting_uviChart.resize; @@ -126,27 +136,35 @@ } }); const forecasting_temp_dayChart = echarts.init(document.getElementById('forecasting_temp_day')); + this.option.title.text = '���������������(������)'; + this.option.yAxis.name = '������������'; + this.option['legend'] = { + right: '10%', + data: ['������������', '������������'] + }; + this.option.series[0].data = temp_day; + this.option.series[0].name = '������������'; + this.option.series[0].itemStyle.color = this.colors[4]; this.option.series[1] = { data: temp_night, type: 'line', smooth: true, - name: '������������' + name: '������������', + areaStyle: { + normal: {} + }, + itemStyle: { + color: this.colors[6] + } }; - this.option.series[0].data = temp_day; - this.option.series[0].name = '������������'; - this.option.yAxis.name = '������������'; - this.option.title.text = '���������������(������)'; - this.option['legend'] = { - right: '10%', - data: ['������������', '������������'] - }, forecasting_temp_dayChart.setOption(this.option, false); window.onresize = forecasting_temp_dayChart.resize; }); } initWarning() { - this.option['legend'] = {}; + delete this.option.series[1]; + delete this.option['legend']; this.isShow = true; const PM2_5 = []; const PM10 = []; const CO = []; const NO2 = []; const O3 = []; const SO2 = []; const title = '������������������'; @@ -163,44 +181,50 @@ this.option.xAxis.data.push(moment(data.time).format('DD���HH���')); }); const warning_PM25Chart = echarts.init(document.getElementById('warning_PM25')); - this.option.series[0].data = PM2_5; - this.option.yAxis.name = '���������ug/m��'; this.option.title.text = title + '(PM2.5)'; + this.option.yAxis.name = '���������ug/m��'; + this.option.series[0].data = PM2_5; + this.option.series[0].itemStyle.color = this.colors[0]; warning_PM25Chart.setOption(this.option, false); window.onresize = warning_PM25Chart.resize; const warning_PM10Chart = echarts.init(document.getElementById('warning_PM10')); - this.option.series[0].data = PM10; - this.option.yAxis.name = '���������ug/m��'; this.option.title.text = title + '(PM10)'; + this.option.yAxis.name = '���������ug/m��'; + this.option.series[0].data = PM10; + this.option.series[0].itemStyle.color = this.colors[1]; warning_PM10Chart.setOption(this.option, false); window.onresize = warning_PM10Chart.resize; const warning_COChart = echarts.init(document.getElementById('warning_CO')); - this.option.series[0].data = CO; - this.option.yAxis.name = '���������mg/m��'; this.option.title.text = title + '(CO)'; + this.option.yAxis.name = '���������mg/m��'; + this.option.series[0].data = CO; + this.option.series[0].itemStyle.color = this.colors[2]; warning_COChart.setOption(this.option, false); window.onresize = warning_COChart.resize; const warning_NO2Chart = echarts.init(document.getElementById('warning_NO2')); - this.option.series[0].data = NO2; - this.option.yAxis.name = '���������ug/m��'; this.option.title.text = title + '(NO2)'; + this.option.yAxis.name = '���������ug/m��'; + this.option.series[0].data = NO2; + this.option.series[0].itemStyle.color = this.colors[3]; warning_NO2Chart.setOption(this.option, false); window.onresize = warning_NO2Chart.resize; const warning_O3Chart = echarts.init(document.getElementById('warning_O3')); - this.option.series[0].data = O3; - this.option.yAxis.name = '���������ug/m��'; this.option.title.text = title + '(O3)'; + this.option.yAxis.name = '���������ug/m��'; + this.option.series[0].data = O3; + this.option.series[0].itemStyle.color = this.colors[4]; warning_O3Chart.setOption(this.option, false); window.onresize = warning_O3Chart.resize; const warning_SO2Chart = echarts.init(document.getElementById('warning_SO2')); - this.option.series[0].data = SO2; - this.option.yAxis.name = '���������ug/m��'; this.option.title.text = title + '(SO2)'; + this.option.yAxis.name = '���������ug/m��'; + this.option.series[0].data = SO2; + this.option.series[0].itemStyle.color = this.colors[6]; warning_SO2Chart.setOption(this.option, false); window.onresize = warning_SO2Chart.resize; }); -- Gitblit v1.8.0