fix: 监测因子折线图修改

quanyawei

2024-03-14 6343fe4c609b57002d84b83b502899d63dd53727

fix: 监测因子折线图修改

 src/components/Echarts/LineChartSpe.vue

@@ -70,13 +70,16 @@
    initChart () {
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.clear()
      this.setOptions(this.chartData)
      // this.setOptions(this.chartData)
    },
    setOptions (val) {
      console.log('val,val', val)
      // val.series.forEach(element => {
      //   element.data = element.data.map(item => item === 0 ? 0.1 : item)
      // })
      if (this.chart) {
        this.chart.clear()
      }
      let that = this
      function fontSize (res) {
        let clientWidth =
@@ -152,30 +155,9 @@
              color: 'rgb(255, 255, 255);',
              fontSize: fontSize(0.117), // 字体大小
              lineHeight: 0
            },
            formatter: function (params) {
              console.log('params', params)
              let html = params[0].name
              params.forEach((item, index) => {
                html += (`<br/>${item.marker + item.seriesName}: ${item.value === undefined ? 0 : item.value}`)
              })
              return html
            }
          },
          yAxis: {
            type: 'log',
            axisTick: {
              show: true, // 轴线刻度
            },
            axisLine: {
              show: true, // 不显示坐标轴线
            },
            // axisLabel: {
            //   formatter: function (value) {
            //     return value === 0.1 ? 0 : value
            //   }
            // },
          },
          yAxis: val.yAxis,
          legend: {
            data: val.title,
            tooltip: {

 src/views/contrast/index.vue

@@ -119,6 +119,7 @@
  data () {
    // 这里存放数据
    return {
      isYaxisSame: ['a34004', 'a34002', 'a05024', 'a21004', 'a21026'],
      dataType: 'HourPicker',
      lineChartData: lineChartData.purchases,
      props: { multiple: true },
@@ -130,7 +131,7 @@
      // newMac2:'',
      newSensor: [],
      radio1: '日报',
      unit: 0,
      unit: 1,
      type: 'select',
      newLineChartData: {
        series: [],
@@ -182,7 +183,7 @@
    radio1 (nv, ov) {
      if (nv === '日报') {
        this.dataType = 'HourPicker'
        this.unit = 0
        this.unit = 1
      } else if (nv === '月报') {
        this.dataType = 'DatePicker'
        this.unit = 3
@@ -298,8 +299,9 @@
        },
      })
        .then((res) => {
          // console.log('获得时间对应因子数据')
          console.log('获得时间对应因子数据', res.data)
          const data = res.data
          let yAxisList = []
          for (let i = 0; i < data.length; i++) {
            data[i].name = this.$options.filters.sensorFilter(
              data[i].sensorCode
@@ -308,95 +310,73 @@
          for (let i = 0; i < data[0].timeValueList.length; i++) {
            newLineChartData.xAxis.push(data[0].timeValueList[i].time)
          }

          for (var i = 0; i < data.length; i++) {
            if (this.isYaxisSame.includes(data[i].sensorCode)) {
              yAxisList.push(data[i].name)
            } else {
              newLineChartData.yAxis.push(
                {name: data[i].name,
                  code: data[i].sensorCode,
                  type: 'value',
                  position: 'left',
                  axisTick: {
                    show: true, // 轴线刻度
                  },
                  axisLine: {
                    show: true, // 不显示坐标轴线
                  },
                  splitNumber: 4, // 设置坐标轴的分割段数
                  splitLine: {
                  // 去除网格线
                    show: false,
                  },
                },
              )
            }

            newLineChartData.series.push({
              data: [],
              name: '',
              name: data[i].name,
              code: data[i].sensorCode,
              type: 'line',
              triggerLineEvent: true,
              yAxisIndex: 0,
              emphasis: { focus: 'series' },
              lineStyle: { width: 4 }
            })
            // newLineChartData.yAxis.push({})
            newLineChartData.series[i].name = data[i].name
            newLineChartData.title.push(data[i].name)
            for (var j = 0; j < data[i].timeValueList.length; j++) {
              // newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
              newLineChartData.series[i].data.push(data[i].timeValueList[j].value === 0 ? undefined : data[i].timeValueList[j].value)
              newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
            }
          }
          if (yAxisList.length > 0) {
            newLineChartData.yAxis = [ {
              type: 'value',
              position: 'left',
              axisTick: {
                show: true, // 轴线刻度
              },
              axisLine: {
                show: true, // 不显示坐标轴线
              },
              splitNumber: 4, // 设置坐标轴的分割段数
              splitLine: {
                // 去除网格线
                show: false,
              },
            }, ...newLineChartData.yAxis]
          }
          newLineChartData.yAxis.forEach((item, index) => {
            item.position = (index + 1) % 2 === 0 ? 'right' : 'left'
            item.offset = this.getoffsetData(index)
          })
          newLineChartData.series.forEach(item => {
            item.yAxisIndex = yAxisList.includes(item.name) ? 0 : newLineChartData.yAxis.findIndex(
              i => i.code && item.code === i.code
            )
          })
          this.lineChartData = newLineChartData

          // this.middleData = JSON.parse(JSON.stringify(res.data))
          // const data = res.data
          // // 无量纲算法
          // // 遍历因子数组
          // for (let i = 0; i < data.length; i++) {
          //   // 使用因子名称过滤替换方法
          //   data[i].name = this.$options.filters.sensorFilter(
          //     data[i].sensorCode
          //   )
          //   // data[i].name = data[i].sensorCode
          //   var tempArray = []
          //   for (let j = 0; j < data[i].timeValueList.length; j++) {
          //     tempArray.push(data[i].timeValueList[j].value)
          //   }
          //   data[i].MaxValue = this.getMaxValue(tempArray)
          //   data[i].sort = i
          // }
          // // 大数组MaxValue降序方法
          // data.sort(this.compare('MaxValue', false))
          // // 用1除以选择因子的数量
          // var step = Math.floor((1 / data.length) * 100) / 100
          // data[0].Factor = 1
          // // 以降序排的数组，第一个为基准值，从第二个开始计算
          // for (let i = 1; i < data.length; i++) {
          //   // 拿到最大值
          //   var supposemMaxValue =
          //     data[0].MaxValue - i * step * data[0].MaxValue
          //   if (data[i].MaxValue < supposemMaxValue) {
          //     data[i].Factor = supposemMaxValue / data[i].MaxValue
          //   }
          // }
          // // 大数组sort升序方法
          // data.sort(this.compare('sort', true))
          // // 给折线图数据添加遍历

          // // for (let i = 0; i < data.length; i++) {
          // //   newLineChartData.series.push({ data: [], name: '', type: 'line' })
          // //   newLineChartData.series[i].name = data[i].name
          // //   newLineChartData.title.push(data[i].name)
          // //   for (let j = 0; j < data[i].timeValueList.length; j++) {
          // //     data[i].timeValueList[j].value = data[i].timeValueList[j].value * data[i].Factor
          // //     newLineChartData.series[i].data.push(data[i].timeValueList[j].value)
          // //   }
          // // }
          // for (let i = 0; i < data.length; i++) {
          //   newLineChartData.series.push({ data: [], name: '', type: 'line' })
          //   newLineChartData.series[i].name = data[i].name
          //   newLineChartData.title.push(data[i].name)
          //   for (let j = 0; j < data[i].timeValueList.length; j++) {
          //     // console.log(data);
          //     data[i].timeValueList[j].value =
          //       data[i].timeValueList[j].value * data[i].Factor
          //     newLineChartData.series[i].data.push({ value: 0, data0: 0 })
          //     newLineChartData.series[i].data[j].value =
          //       data[i].timeValueList[j].value
          //   }
          // }
          // for (let i = 0; i < data[0].timeValueList.length; i++) {
          //   newLineChartData.xAxis.push(data[0].timeValueList[i].time)
          // }
          // // 给图表tooltip赋值原始数据
          // for (let i = 0; i < this.middleData.length; i++) {
          //   console.log(i);
          //   for (let j = 0; j < this.middleData[i].timeValueList.length; j++) {
          //     newLineChartData.series[i].data[j].data0 =
          //       this.middleData[i].timeValueList[j].value
          //   }
          // }
          // this.lineChartData = newLineChartData
          // console.log(newLineChartData.series[0].name);
        })
        .catch((err) => {
          console.log(err)
@@ -488,6 +468,16 @@
      //   console.log(err)
      // })
    },
    // 获取y轴偏移距离
    getoffsetData (val) {
      if (val === 0 || val === 1) return 0
      if (val % 2 === 0) {
        return val / 2 * 60
      }
      if (val % 2 !== 0) {
        return val / 3 * 60
      }
    },
    // 获取最大值
    getMaxValue (arr) {
      // return Math.max.apply(null, arr)