| | |
|---|
| | | <template> |
|---|
| | | |
|---|
| | | <div id="mychart" class="echart-foot"></div> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import * as echarts from "echarts"; |
|---|
| | | import statisticsApi from "@/api/smoke/statistics"; |
|---|
| | | export default { |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | echarts: null, |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | |
|---|
| | | created() { |
|---|
| | | this.getData(); |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | getData() { |
|---|
| | | let param = { |
|---|
| | | field: "tenMinData", |
|---|
| | | localeId: this.inTimeData.Lid |
|---|
| | | } |
|---|
| | | statisticsApi.getDocument(param).then(jsonStr => { |
|---|
| | | const res = JSON.parse(jsonStr) |
|---|
| | | let list = res.Data |
|---|
| | | |
|---|
| | | let myecharts = echarts.init(document.getElementById("mychart")); |
|---|
| | | |
|---|
| | | let times = this.getTimer('2020-01-01 00:00:00', 10, 144); |
|---|
| | | let data1 = [] // 油烟浓度 |
|---|
| | | let data2 = [] // 颗粒物浓度 |
|---|
| | | let data3 = [] // 非甲烷总烃浓度 |
|---|
| | | times.forEach((o, index) => { |
|---|
| | | if (list[index]) { |
|---|
| | | data1.push(list[index].emissions_conc); |
|---|
| | | data2.push(list[index].granule_conc); |
|---|
| | | data3.push(list[index].hydrocarbon_conc); |
|---|
| | | } |
|---|
| | | else { |
|---|
| | | data1.push(0); |
|---|
| | | data2.push(0); |
|---|
| | | data3.push(0); |
|---|
| | | |
|---|
| | | } |
|---|
| | | }); |
|---|
| | | // 绘制图表 |
|---|
| | | myecharts.setOption({ |
|---|
| | | title: { |
|---|
| | | text: '平均浓度mg/m³' |
|---|
| | | }, |
|---|
| | | tooltip: { |
|---|
| | | trigger: 'axis' |
|---|
| | | }, |
|---|
| | | legend: { |
|---|
| | | data: ['油烟浓度', '颗粒物浓度', '非甲烷总烃浓度'] |
|---|
| | | }, |
|---|
| | | xAxis: { |
|---|
| | | type: 'category', |
|---|
| | | boundaryGap: false, |
|---|
| | | data: times |
|---|
| | | }, |
|---|
| | | yAxis: { |
|---|
| | | type: 'value' |
|---|
| | | }, |
|---|
| | | series: [ |
|---|
| | | { |
|---|
| | | name: '油烟浓度', |
|---|
| | | data: data1, |
|---|
| | | stack: 'Total', |
|---|
| | | type: "line", |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '颗粒物浓度', |
|---|
| | | data: data2, stack: 'Total', |
|---|
| | | type: "line" |
|---|
| | | }, |
|---|
| | | { |
|---|
| | | name: '非甲烷总烃浓度', stack: 'Total', |
|---|
| | | data: data3, |
|---|
| | | type: "line" |
|---|
| | | }, |
|---|
| | | ], |
|---|
| | | }); |
|---|
| | | |
|---|
| | | }) |
|---|
| | | |
|---|
| | | }, |
|---|
| | | |
|---|
| | | getTimer(start, Timer, length) { |
|---|
| | | var lists = []; |
|---|
| | | var count = 0; //初始值为0 |
|---|
| | | for (let j = 0; j < length; j++) { |
|---|
| | | count += 1; |
|---|
| | | var seconds = Date.parse(start); //标准时间转毫秒数 |
|---|
| | | var totals = j * Timer * 60 * 1000 + seconds; //固定时间间隔+开始时间的总毫秒数 |
|---|
| | | var res = new Date(totals).toString().split(' ')[4];//毫秒数转字符串，截取，取值 |
|---|
| | | |
|---|
| | | lists.push(res) |
|---|
| | | } |
|---|
| | | return lists; |
|---|
| | | } |
|---|
| | | |
|---|
| | | }, |
|---|
| | | props: ['inTimeData'] |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style> |
|---|
| | | |
|---|
| | | .echart-foot { |
|---|
| | | height: 400px; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | </style> |
|---|
