易晨曦提交1、监测因子趋势页面修改时间控件 2、监测因子对比修改echarts显示

yupan

2022-11-07 49f1db40efa2a03c0eada89abdfb9e9bd779f64c

 src/components/Echarts/LineChartSpe.vue

@@ -15,24 +15,24 @@
  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,
    },
    // xdata: {
    //   type: Array,
    //   required: true
@@ -40,16 +40,19 @@
  },
  data() {
    return {
      chart: null
      chart: null,
    }
  },
  watch: {
    chartData: {
      deep: true,
      
      handler(val) {
        console.log(val,'wath');
        this.setOptions(val)
      }
    }
      },
      deep: true,
      
    },
  },
  mounted() {
    this.$nextTick(() => {
@@ -69,30 +72,41 @@
      this.setOptions(this.chartData)
    },
    setOptions(val) {
      console.log(val);
      this.chart.setOption({
      console.log(val.series,'123');
      function fontSize(res) {
        let clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth
        if (!clientWidth) return
        let fontSize = 100 * (clientWidth / 1920)
        return res * fontSize
      }
      this.chart.setOption(
        {
        xAxis: {
          data: val.xAxis,
          boundaryGap: false,
          axisTick: {
            show: false
          }
              show: false,
            },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true
            height: fontSize(3.5),
            containLabel: true,
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
                yAxisIndex: 'none',
            },
            restore: {},
            saveAsImage: {}
          }
              saveAsImage: {},
            },
        },
        // tooltip: {
        //   trigger: 'axis',
@@ -106,22 +120,19 @@
            return [pt[0], '10%']
          },
          formatter(params) {
              console.log(params,'ssss');
              let data=[]
            for (let i = 0; i < params.length; i++) {
              return params[i].seriesName + ':' + '&nbsp;&nbsp;' + params[i].data.data0
                data+=params[i].seriesName + '&nbsp:' +'&nbsp&nbsp'+params[i].value+ '<br/>'
            }
          }
            return data
        },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'cross'
        //   },
        //   padding: [5, 10]
        // },
          },
         
        yAxis: {
          axisLabel: {
            show: false
          }
              show: false,
            },
        },
        legend: {
          icon: 'circle',
@@ -129,17 +140,23 @@
          // textStyle: {
          //   fontSize: 18
          // },
          data: val.title
            data: val.title,
        },
        dataZoom: [{
          dataZoom: [
            {
          type: 'inside',
          start: 0,
          end: 100
        }, {
              end: 100,
            },
            {
          start: 0,
          end: 10
        }],
        series: val.series
              end: 10,
              top:fontSize(4),
              height: fontSize(0.4),
            },
            
          ],
          series: val.series,
        // [{
        //   name: JSON.parse(JSON.stringify(val.title)),
        //   itemStyle: {
@@ -164,8 +181,10 @@
        //     }
        //   }
        // }]
      }, true)
    }
  }
        },
        true
      )
    },
  },
}
</script>