扬尘Vue代码

zmc

2023-08-30 d3d7dcf919eda40a415b6dc744fb0b347d4293a8

 src/views/line_graph/components/LineChart.vue

ÎļþÃû´Ó src/sfc/LineChart.vue ÐÞ¸Ä
@@ -44,14 +44,14 @@
  },
  mounted() {
    this.intiChart();
    //   this.chart.setOption(this.chartData)
    window.addEventListener('resize', this.resizeChart);
  },
  watch: {
    chartData() {
      // option变化时，图形再次初始化
      this.setOption();
    }
    },

  },
  beforeUnmount() {
    if (this.chart) {
@@ -62,9 +62,6 @@
    intiChart() {
      // åˆ›å»ºecharts实例
      this.chart = _echarts.init(this.$refs.chart);

      // ä½¿ç”¨åˆšæŒ‡å®šçš„配置项和数据显示图表
      // this.chart.setOption(option, true);
    },

    setOption() {
@@ -78,10 +75,10 @@
        toolbox: {
          // å·¥å…·æ 
          feature: {
            dataZoom: {
              // åŒºåŸŸç¼©æ”¾
              yAxisIndex: 'none'
            },
            // dataZoom: {
            //   // åŒºåŸŸç¼©æ”¾
            //   yAxisIndex: 'none'
            // },

            // ä¿å­˜ä¸ºå›¾ç‰‡
            saveAsImage: {}
@@ -89,7 +86,13 @@
        },
        xAxis: {
          name: this.xName,
          data: this.chartData.x
          data: this.chartData.x,
          type: 'category',
            axisLabel: {
              formatter: function (value) {
                return value.slice(5);
              }
            }
        },
        yAxis: {
          type: 'value',
@@ -112,7 +115,13 @@

    // è·Ÿé¡µé¢å“åº”式变化
    resizeChart() {
      this.chart.resize();
      // this.chart.resize();
      // delay(600).then(() => this.chart.resize());
      this.$nextTick(() => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    }
  }
};
@@ -121,7 +130,7 @@
<style>
.line-chart {
  width: 100%;
  height: 500px;
  height: 35vh;
  margin-top: 25px;
}
</style>