• echarts图表重设尺寸


    在绘制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();
          });
        }
    
  • 相关阅读:
    vue中路由跳转传递参数
    父组件向子孙组件传递数据provide/inject
    微信、QQ等内置浏览器定位失败
    Java ArrayList类
    java 生成 [1, n] 之间的随机数
    Java 构造方法
    Java this关键字
    Java private关键字及作用
    Java 随笔
    Java 内存划分
  • 原文地址:https://www.cnblogs.com/eternityz/p/12271913.html
Copyright © 2020-2023  润新知