关于响应式eachart（随父级宽高改变而改变,可单页面多个eachart一起适配）

y∩__∩y 归来

已于 2022-03-23 18:25:20 修改

阅读量215

点赞数 3

分类专栏： Eachart 文章标签：前端 angular.js typescript javascript css

于 2022-03-22 18:20:05 首次发布

本文链接：https://blog.csdn.net/qq_43730595/article/details/123667564

版权

Eachart 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

关于响应式eachart（随父级宽高改变而改变,可单页面多个eachart一起适配）

效果展示

在这里插入图片描述

一、ts代码

  import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-eachart-text',
  templateUrl: './eachart-text.component.html',
  styleUrls: ['./eachart-text.component.less']
})
export class EachartTextComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
    this.eachartfunttion()
    this.eachartBarfunttion()
  }
  resizeFun
  eachartfunttion() {
    let chartDom = <HTMLInputElement>document.getElementById('main');
    let myChart = echarts.init(chartDom, null, {
      width: document.getElementById('main').clientWidth,//获取父级的宽//初始化默认的宽
      height: document.getElementById('main').clientHeight//获取父级的高//初始化默认的高
    });
    //监听页面的 window.onresize 事件获取浏览器大小改变的事件，
    //然后调用 echartsInstance.resize 改变图表的大小
    this.resizeFun = () => {
      console.log("1111111111111111111111111111")
      myChart.resize({
        width: document.getElementById('main').clientWidth,//获取父级的宽
        height: document.getElementById('main').clientHeight//获取父级的高
      });
    }
    window.addEventListener('resize', this.resizeFun);
    let option;
    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [150, 230, 224, 218, 135, 147, 260],
          type: 'line'
        }
      ]
    };
    option && myChart.setOption(option);
  }
  resizeBarFun
  eachartBarfunttion() {
    let chartDom = <HTMLInputElement>document.getElementById('mainbar');
    let myChart = echarts.init(chartDom, null, {
      width: document.getElementById('mainbar').clientWidth,//获取父级的宽//初始化默认的宽
      height: document.getElementById('mainbar').clientHeight//获取父级的高//初始化默认的高
    });
    //监听页面的 window.onresize 事件获取浏览器大小改变的事件，
    //然后调用 echartsInstance.resize 改变图表的大小
    this.resizeBarFun = () => {
      console.log("222222222222222222222222222222")
      myChart.resize({
        width: document.getElementById('mainbar').clientWidth,//获取父级的宽
        height: document.getElementById('mainbar').clientHeight//获取父级的高
      })
    }
    window.addEventListener('resize', this.resizeBarFun);

    let option;
    option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110, 130],
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    };

    option && myChart.setOption(option);
  }
  //生命周期销毁调用
  ngOnDestroy() {
    window.removeEventListener('resize', this.resizeBarFun);//去除事件监听
    window.removeEventListener('resize', this.resizeFun);//去除事件监听
  }

}

二、html代码

<div class="Qbody">
  <!-- 折线图 -->
  <div id="main" class="main"></div>
  <!-- 柱状图 -->
  <div id="mainbar" class="mainbar"></div>
</div>

三、css代码

.Qbody{
  width: 100%;
  height:calc(100vh - 64px);//64px 为多余的部分，没有则直接用100vh
  padding: 20px;
  background: blue;
  //折线图
  .main{
    height: 50%;
    width: 100%;
    background: red;
  }
  //柱状图
  .mainbar{
    height: 50%;
    width: 100%;
    background: greenyellow;
  }
}