zoukankan      html  css  js  c++  java
  • 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();
          });
        }
    
  • 相关阅读:
    htmlUnil-2.33 jar包
    HtmlUnil 不兼容问题
    Java 网页抓取 工具类
    浏览器不兼容
    Chrome常用调试技巧1
    关于社交网络的思考
    google浏览器历史旧版
    EJB是什么Java使用EJB容器的详细概述
    何必言精通——十年杂感(转载)
    搜索优化—如何在Google搜索引擎上排名靠前Google左侧排名
  • 原文地址:https://www.cnblogs.com/eternityz/p/12271913.html
Copyright © 2011-2022 走看看