echarts图表重设尺寸

Posted 2020-11-25 eternityz

在绘制chart的方法中添加下面语句,则会在尺寸变化的时候,重新绘制图表

window.addEventListener("resize", function ()   {
    myChart.resize();
  });

完整如下:

drawLine () {
      // 基于准备好的dom，初始化echarts实例
      // let myChart = this.$echarts.init(document.getElementById(this.ids));
      let myChart = this.$echarts.init(this.$refs[this.ids]);
      let option = {
        legend: {
          data: ['净值', '余额']
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let paramsEquity = params[0];
            var date = new Date(paramsEquity.name);
            let paramsBalance = params[1]
            return '<span style="float:left;">' + date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate() + '</span></br>' + '<span style="float:left;">净值: $' + paramsEquity.value[1] + '</span></br>' + '<span style="float:left;">余额: $' + paramsBalance.value[1] + '</span';
          },
          axisPointer: {
            animation: false
          }
        },
        xAxis: {
          show: false,
          type: 'time',
          splitLine: {
            show: false
          }
        },
        yAxis: {
          show: false,
          type: 'value',
          boundaryGap: ['0%', '5%'],
          max: this.maxMin[0],
          min: this.maxMin[1],
          axisLabel: {
            formatter: '${value}'
          },
          splitLine: {
            show: false
          }
        },
        series: this.calSeries
      };

      // 绘制图表
      myChart.setOption(option);
      //
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    }