颗粒折线图
This commit is contained in:
		@@ -64,18 +64,20 @@ export default {
 | 
			
		||||
    }
 | 
			
		||||
  },
 | 
			
		||||
  methods: {
 | 
			
		||||
    init() {
 | 
			
		||||
      console.log('init')
 | 
			
		||||
    },
 | 
			
		||||
    selectLine(val) {
 | 
			
		||||
      this.form.proLineId = val
 | 
			
		||||
      setAlarmValueGet({ id: val }).then((res) => {
 | 
			
		||||
        this.form.adsorptionPadCeiling = res.data.adsorptionPadCeiling
 | 
			
		||||
          ? res.data.adsorptionPadCeiling
 | 
			
		||||
          : null
 | 
			
		||||
        this.form.auxiliaryFrameCeiling = res.data.auxiliaryFrameCeiling
 | 
			
		||||
          ? res.data.auxiliaryFrameCeiling
 | 
			
		||||
          : null
 | 
			
		||||
        if (res.code === 0 && res.data) {
 | 
			
		||||
          this.form.adsorptionPadCeiling = res.data.adsorptionPadCeiling
 | 
			
		||||
            ? res.data.adsorptionPadCeiling
 | 
			
		||||
            : 0
 | 
			
		||||
          this.form.auxiliaryFrameCeiling = res.data.auxiliaryFrameCeiling
 | 
			
		||||
            ? res.data.auxiliaryFrameCeiling
 | 
			
		||||
            : 0
 | 
			
		||||
        } else {
 | 
			
		||||
          this.form.adsorptionPadCeiling = 0
 | 
			
		||||
          this.form.auxiliaryFrameCeiling = 0
 | 
			
		||||
        }
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    submitForm() {
 | 
			
		||||
 
 | 
			
		||||
@@ -141,9 +141,6 @@ export default {
 | 
			
		||||
        this.getList()
 | 
			
		||||
      } else {
 | 
			
		||||
        this.centervisible = true
 | 
			
		||||
        this.$nextTick(() => {
 | 
			
		||||
          this.$refs.alarmAdd.init()
 | 
			
		||||
        })
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    tableRowClassName({ row }) {
 | 
			
		||||
 
 | 
			
		||||
@@ -79,12 +79,12 @@ export default {
 | 
			
		||||
      let xlList = []
 | 
			
		||||
      let sumList = []
 | 
			
		||||
      let msg = {}
 | 
			
		||||
      for (let i = 0; i < 100; i++) {
 | 
			
		||||
        time.push(moment().add(1, 'days').format('YYYY-MM-DD HH:mm:ss'))
 | 
			
		||||
      for (let i = 0; i < 1000; i++) {
 | 
			
		||||
        time.push(moment().add(i, 'days').format('YYYY-MM-DD HH:mm:ss'))
 | 
			
		||||
        sList.push(Math.floor(Math.random() * 80 + 10))
 | 
			
		||||
        mList.push(Math.floor(Math.random() * 80 + 20))
 | 
			
		||||
        lList.push(Math.floor(Math.random() * 80 + 30))
 | 
			
		||||
        xlList.push(Math.floor(Math.random() * 80 + 40))
 | 
			
		||||
        mList.push(Math.floor(Math.random() * 100 + 20))
 | 
			
		||||
        lList.push(Math.floor(Math.random() * 130 + 30))
 | 
			
		||||
        xlList.push(Math.floor(Math.random() * 150 + 40))
 | 
			
		||||
        sumList.push(sList[i] + mList[i] + lList[i] + xlList[i])
 | 
			
		||||
      }
 | 
			
		||||
      msg.time = time
 | 
			
		||||
@@ -194,50 +194,84 @@ export default {
 | 
			
		||||
    getChart(msg) {
 | 
			
		||||
      console.log(msg)
 | 
			
		||||
      var option = {
 | 
			
		||||
        color: ['#5AD8A6', '#5B8FF9', '#5D7092', '#F6BD16', '#E8684A'],
 | 
			
		||||
        title: {
 | 
			
		||||
          text: 'Beijing AQI',
 | 
			
		||||
          text: '时间段玻璃颗粒数',
 | 
			
		||||
          left: '1%'
 | 
			
		||||
        },
 | 
			
		||||
        tooltip: {
 | 
			
		||||
          trigger: 'axis'
 | 
			
		||||
        },
 | 
			
		||||
        legend: {
 | 
			
		||||
          data: ['Total', 'M', 'L', 'S', 'XL'],
 | 
			
		||||
          right: '4%'
 | 
			
		||||
        },
 | 
			
		||||
        grid: {
 | 
			
		||||
          left: '5%',
 | 
			
		||||
          right: '15%',
 | 
			
		||||
          left: '4%',
 | 
			
		||||
          right: '4%',
 | 
			
		||||
          bottom: '10%'
 | 
			
		||||
        },
 | 
			
		||||
        xAxis: msg.time,
 | 
			
		||||
        yAxis: {},
 | 
			
		||||
        toolbox: {
 | 
			
		||||
          right: 10,
 | 
			
		||||
          feature: {
 | 
			
		||||
            dataZoom: {
 | 
			
		||||
              yAxisIndex: 'none'
 | 
			
		||||
            },
 | 
			
		||||
            restore: {},
 | 
			
		||||
            saveAsImage: {}
 | 
			
		||||
          }
 | 
			
		||||
        xAxis: {
 | 
			
		||||
          type: 'category',
 | 
			
		||||
          boundaryGap: false,
 | 
			
		||||
          data: msg.time
 | 
			
		||||
        },
 | 
			
		||||
        yAxis: {
 | 
			
		||||
          type: 'value'
 | 
			
		||||
        },
 | 
			
		||||
        dataZoom: [
 | 
			
		||||
          {
 | 
			
		||||
            startValue: '2014-06-01'
 | 
			
		||||
            startValue: '2023-02-014'
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            type: 'inside'
 | 
			
		||||
          }
 | 
			
		||||
        ],
 | 
			
		||||
        visualMap: {
 | 
			
		||||
          top: 50,
 | 
			
		||||
          right: 10,
 | 
			
		||||
          outOfRange: {
 | 
			
		||||
            color: '#999'
 | 
			
		||||
        series: [
 | 
			
		||||
          {
 | 
			
		||||
            name: 'Total',
 | 
			
		||||
            type: 'line',
 | 
			
		||||
            data: msg.sumList,
 | 
			
		||||
            markLine: {
 | 
			
		||||
              show: false,
 | 
			
		||||
              Symbol: 'none',
 | 
			
		||||
              label: {
 | 
			
		||||
                position: 'end',
 | 
			
		||||
                formatter: '合格线\n' + this.maxLine
 | 
			
		||||
              },
 | 
			
		||||
              data: [
 | 
			
		||||
                {
 | 
			
		||||
                  silent: false,
 | 
			
		||||
                  lineStyle: {
 | 
			
		||||
                    type: 'dashed',
 | 
			
		||||
                    color: '#0B58FF'
 | 
			
		||||
                  },
 | 
			
		||||
                  yAxis: this.maxLine
 | 
			
		||||
                }
 | 
			
		||||
              ]
 | 
			
		||||
            }
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            name: 'M',
 | 
			
		||||
            type: 'line',
 | 
			
		||||
            data: msg.mList
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            name: 'L',
 | 
			
		||||
            type: 'line',
 | 
			
		||||
            data: msg.lList
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            name: 'S',
 | 
			
		||||
            type: 'line',
 | 
			
		||||
            data: msg.sList
 | 
			
		||||
          },
 | 
			
		||||
          {
 | 
			
		||||
            name: 'XL',
 | 
			
		||||
            type: 'line',
 | 
			
		||||
            data: msg.xlList
 | 
			
		||||
          }
 | 
			
		||||
        },
 | 
			
		||||
        series: {
 | 
			
		||||
          name: 'Beijing AQI',
 | 
			
		||||
          type: 'line',
 | 
			
		||||
          data: msg.sList
 | 
			
		||||
        }
 | 
			
		||||
        ]
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      option && this.chart.setOption(option)
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user