1、新增站点数据页面 2、修改监测因子趋势显示bug 3、修改监测因子趋势和监测因子对比页面的时间控件

yupan

2022-10-27 0761d9e95393d7f0301a49613c095db363d79e75

 src/components/Echarts/LineChart.vue

@@ -1,8 +1,5 @@
<template>
  <!-- <div> -->
  <!-- <div>1111111111111111111111111111111111111111</div> -->
  <div :class="className" :style="{height:height,width:width}" />
  <!-- </div> -->
  <div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
@@ -16,28 +13,28 @@
  props: {
    className: {
      type: String,
      default: 'chart'
      default: 'chart',
    },
    width: {
      type: String,
      default: '100%'
      default: '100%',
    },
    height: {
      type: String,
      default: '350px'
      default: '350px',
    },
    autoResize: {
      type: Boolean,
      default: true
      default: true,
    },
    chartData: {
      type: Object,
      required: true
      required: true,
    },
    interval: {
      type: Number,
      default: 1
    }
      default: 1,
    },
    // xdata: {
    //   type: Array,
    //   required: true
@@ -45,7 +42,7 @@
  },
  data() {
    return {
      chart: null
      chart: null,
    }
  },
  watch: {
@@ -53,8 +50,8 @@
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
      },
    },
    // xdata: {
    //   deep: true,
    //   handler(val) {
@@ -65,10 +62,9 @@
    // }
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.initChart()
    // })
    this.initChart()
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
@@ -78,117 +74,142 @@
    this.chart = null
  },
  methods: {

    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
    setOptions(val) {
      function fontSize(res){
       let clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
        if (!clientWidth) return;
        let fontSize = 100 * (clientWidth / 1920);
        return res*fontSize;
   }

      // console.log('组件设置的数据')
      // console.log(val)
      this.chart.setOption({
        title: {
          text: val.text,
          textStyle: {
            color: '#000000'
          }
        },
        xAxis: {
          data: val.xAxis,
          boundaryGap: false,
          axisTick: {
            show: false
          },
          // axisTick: { // 决定是否显示坐标刻度
          //   alignWithLabel: true,
          //   show: true
          // },
          axisLine: {
            lineStyle: {
              color: '#000000'
            }
          },
          axisLabel: {
            interval: this.interval
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '20%',
          top: '10%',
          containLabel: true,
          x: 120
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
      console.log(val)
      this.chart.setOption(
        {
          title: {
            text: val.text,
            textStyle: {
              color: '#000000',
            },
            restore: {},
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis',
          position: function(pt) {
            return [pt[0], '10%']
          }
        },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'cross'
        //   },
        //   padding: [5, 10]
        // },
        yAxis: {
          axisTick: {
            show: false // 轴线刻度
          },
          axisLine: {
            lineStyle: {
              color: '#000000'
            }
          }
          xAxis: {
            data: val.xAxis.slice(0, 24),
            boundaryGap: false,
            axisTick: {
              show: false,
            },
            // axisTick: { // 决定是否显示坐标刻度
            //   alignWithLabel: true,
            //   show: true
            // },
            // axisLine: {
            //   lineStyle: {
            //     color: '#000000'
            //   }
            // },
            // axisLabel: {
            //   interval: this.interval
            // }
          },
          grid: {
            left: '5%',
            right: '5%',
            top:'5%',
            containLabel: true,
            height:fontSize(3.3),
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none',
              },
              restore: {},
              saveAsImage: {},
            },
          },
          tooltip: {
            trigger: 'axis',
            position: function (pt) {
              return [pt[0], '10%']
            },
          },
          // tooltip: {
          //   trigger: 'axis',
          //   axisPointer: {
          //     type: 'cross'
          //   },
          //   padding: [5, 10]
          // },
          yAxis: {
            axisTick: {
              show: false, // 轴线刻度
            },
            // axisLine: {
            //   lineStyle: {
            //     color: '#000000'
            //   }
            // }
          },
          legend: {
            data: val.title,
            tooltip: {
              show: true,
            },
            textStyle:{
              fontSize:fontSize(0.12)
            },
            widht:'auto',
            height:'auto',
            top: fontSize(4.6),
          },
          dataZoom: [
            {
              type: 'inside',
              start: 0,
              end: 100,
            },
            {
              start: 0,
              end: 20,
              bottom: fontSize(4.4),
              height: fontSize(0.5),
            },
          ],
          series: val.series,
          // [{
          //   name: JSON.parse(JSON.stringify(val.title)),
          //   itemStyle: {
          //     normal: {
          //       color: '#7AC5CD',
          //       lineStyle: {
          //         color: '#7AC5CD',
          //         width: 2
          //       }
          //     }
          //   },
          //   smooth: true,
          //   type: 'line',
          //   data: val.series,
          //   animationDuration: 2800,
          //   animationEasing: 'cubicInOut',
          //   areaStyle: {},
          //   label: {
          //     normal: {
          //       show: true,
          //       position: 'top'
          //     }
          //   }
          // }]
        },
        legend: {
          data: val.title
        },
        // dataZoom: [{
        //   type: 'inside',
        //   start: 0,
        //   end: 100
        // }, {
        //   start: 0,
        //   end: 10
        // }],
        series: val.series
        // [{
        //   name: JSON.parse(JSON.stringify(val.title)),
        //   itemStyle: {
        //     normal: {
        //       color: '#7AC5CD',
        //       lineStyle: {
        //         color: '#7AC5CD',
        //         width: 2
        //       }
        //     }
        //   },
        //   smooth: true,
        //   type: 'line',
        //   data: val.series,
        //   animationDuration: 2800,
        //   animationEasing: 'cubicInOut',
        //   areaStyle: {},
        //   label: {
        //     normal: {
        //       show: true,
        //       position: 'top'
        //     }
        //   }
        // }]
      }, true)
    }
  }
        true
      )
      window.onresize = this.chart.resize;
    },
  },
}
</script>