|
@@ -1,121 +1,127 @@
|
|
|
<template>
|
|
|
- <div id="lineCharts"></div>
|
|
|
+ <div id='lineCharts'></div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-var echarts = require("echarts");
|
|
|
+var echarts = require('echarts')
|
|
|
import bus from '@/utils/bus.js'
|
|
|
export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- series:[],
|
|
|
- ids:[],
|
|
|
- };
|
|
|
- },
|
|
|
- created() {
|
|
|
- bus.$on('drawLine', list => {
|
|
|
- this.ids = list
|
|
|
- this.formatStackArr()
|
|
|
- console.log('on,list---->', list)
|
|
|
- })
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- },
|
|
|
- props: ["stackArr"],
|
|
|
- methods: {
|
|
|
- formatStackArr(){
|
|
|
- this.series = []
|
|
|
- this.stackArr.forEach(el=>{
|
|
|
- this.ids.forEach(ele=>{
|
|
|
- if(ele.id==el.spaceDayRpt.id){
|
|
|
- let obj = {
|
|
|
- name: el.spaceDayRpt.spaceLocalName,
|
|
|
- type: "line",
|
|
|
- data: el.tdbList.data.slice(1).map(i=>i[1])
|
|
|
- }
|
|
|
- this.series.push(obj)
|
|
|
- }
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ series: [],
|
|
|
+ ids: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ bus.$on('drawLine', list => {
|
|
|
+ this.ids = list
|
|
|
+ this.formatStackArr()
|
|
|
+ // console.log('on,list---->', list)
|
|
|
})
|
|
|
- })
|
|
|
- this.drawItLine();
|
|
|
},
|
|
|
- drawItLine() {
|
|
|
-
|
|
|
- let myCharts = echarts.init(document.getElementById("lineCharts"));
|
|
|
- myCharts.clear()
|
|
|
- var option = {
|
|
|
- title: {
|
|
|
- // text: "折线图堆叠"
|
|
|
- },
|
|
|
- tooltip: {
|
|
|
- trigger: "axis"
|
|
|
- },
|
|
|
- legend: {
|
|
|
-
|
|
|
- icon: "stack",
|
|
|
- right: 28
|
|
|
+ mounted() {},
|
|
|
+ props: ['stackArr'],
|
|
|
+ methods: {
|
|
|
+ formatStackArr() {
|
|
|
+ this.series = []
|
|
|
+ this.stackArr.forEach(el => {
|
|
|
+ let num = el.tdbList.data.slice(1).map(i => i[1]),
|
|
|
+ arr = []
|
|
|
+ num.forEach(i => {
|
|
|
+ if (i == '-9999' || i == '-9998') {
|
|
|
+ i = undefined
|
|
|
+ }
|
|
|
+ arr.push(i)
|
|
|
+ })
|
|
|
+ this.ids.forEach(ele => {
|
|
|
+ if (ele.id == el.spaceDayRpt.id) {
|
|
|
+ let obj = {
|
|
|
+ name: el.spaceDayRpt.spaceLocalName,
|
|
|
+ type: 'line',
|
|
|
+ data: arr
|
|
|
+ // data: el.tdbList.data.slice(1).map(i => i[1])
|
|
|
+ }
|
|
|
+ this.series.push(obj)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ this.drawItLine()
|
|
|
},
|
|
|
- // color: ["#0091FF", "#00D6B9", "#FFBA6B"],
|
|
|
- grid: {
|
|
|
- left: "3%",
|
|
|
- right: "4%",
|
|
|
- bottom: "3%",
|
|
|
- containLabel: true
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- boundaryGap: false,
|
|
|
- data: [
|
|
|
- "00:00",
|
|
|
- "01:00",
|
|
|
- "02:00",
|
|
|
- "03:00",
|
|
|
- "04:00",
|
|
|
- "05:00",
|
|
|
- "06:00",
|
|
|
- "07:00",
|
|
|
- "08:00",
|
|
|
- "09:00",
|
|
|
- "10:00",
|
|
|
- "11:00",
|
|
|
- "12:00",
|
|
|
- "13:00",
|
|
|
- "14:00",
|
|
|
- "15:00",
|
|
|
- "16:00",
|
|
|
- "17:00",
|
|
|
- "18:00",
|
|
|
- "19:00",
|
|
|
- "20:00",
|
|
|
- "21:00",
|
|
|
- "22:00",
|
|
|
- "23:00"
|
|
|
- ]
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
- axisLabel: {
|
|
|
- formatter: "{value}℃",
|
|
|
- },
|
|
|
- min: 15,
|
|
|
- max: 30,
|
|
|
- interval: 1,
|
|
|
- splitLine: {
|
|
|
- lineStyle: {
|
|
|
- type: "dotted"
|
|
|
+ drawItLine() {
|
|
|
+ let myCharts = echarts.init(document.getElementById('lineCharts'))
|
|
|
+ myCharts.clear()
|
|
|
+ var option = {
|
|
|
+ title: {
|
|
|
+ // text: "折线图堆叠"
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ icon: 'stack',
|
|
|
+ right: 28
|
|
|
+ },
|
|
|
+ // color: ["#0091FF", "#00D6B9", "#FFBA6B"],
|
|
|
+ grid: {
|
|
|
+ left: '3%',
|
|
|
+ right: '4%',
|
|
|
+ bottom: '3%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: [
|
|
|
+ '00:00',
|
|
|
+ '01:00',
|
|
|
+ '02:00',
|
|
|
+ '03:00',
|
|
|
+ '04:00',
|
|
|
+ '05:00',
|
|
|
+ '06:00',
|
|
|
+ '07:00',
|
|
|
+ '08:00',
|
|
|
+ '09:00',
|
|
|
+ '10:00',
|
|
|
+ '11:00',
|
|
|
+ '12:00',
|
|
|
+ '13:00',
|
|
|
+ '14:00',
|
|
|
+ '15:00',
|
|
|
+ '16:00',
|
|
|
+ '17:00',
|
|
|
+ '18:00',
|
|
|
+ '19:00',
|
|
|
+ '20:00',
|
|
|
+ '21:00',
|
|
|
+ '22:00',
|
|
|
+ '23:00'
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value',
|
|
|
+ axisLabel: {
|
|
|
+ formatter: '{value}℃'
|
|
|
+ },
|
|
|
+ min: 20,
|
|
|
+ max: 30,
|
|
|
+ interval: 1,
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ type: 'dotted'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ series: this.series
|
|
|
}
|
|
|
- }
|
|
|
- },
|
|
|
- series: this.series
|
|
|
- };
|
|
|
- myCharts.setOption(option);
|
|
|
+ myCharts.setOption(option)
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
-};
|
|
|
+}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
#lineCharts {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
</style>
|