首页 前端知识 [echarts] 图表自适应宽高大小

[echarts] 图表自适应宽高大小

2024-06-18 22:06:19 前端知识 前端哥 21 896 我要收藏
 <div class="echart-wrap" :ref="wrapId" :id="wrapId" >
    <div :ref="chartsId"  :id="chartsId" ></div>
  </div>
props: {
    wrapId: {
      // 需传递外层echarts外层id字符串,已便于动态获取外层宽高
      type: String,
      default: 'wrapId',
    },
    chartsId: {
      // echarts本身id 以便于dom操作,避免冲突
      type: String,
      default: 'chartsId',
    },
 .echart-wrap{
    width: 100%;
    height: 100%;
    position: relative;
  }
this.myChart.setOption(this.options, true);
window.addEventListener('resize', () => {
        this.echartsResize(this.myChart, this.chartsId, this.wrapId);
      });
 /**
     *  echarts resize
     *
     * @export
     * @param {*} myChart echarts 初始化后得到的值
     * @param {String} domId echarts的dom id
     * @param {String} domWrapId echarts 外层div的 dom id,用来获取宽高
     */
    echartsResize(myChart, domId, domWrapId) {
      // 重置容器高宽
      this.echartsSetWH(domId, domWrapId);
      if (myChart) {
        myChart.resize();
      }
    },

    /**
     * echarts 设置宽高
     *
     * @export
     * @param {String} domId echarts的dom id
     * @param {String} domWrapId echarts 外层div的 dom id,用来获取宽高
     */
    echartsSetWH(domId, domWrapId) {
      const worldMapContainer = document.getElementById(domId);
      // // 用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
      if (worldMapContainer) {
        worldMapContainer.style.width = `${document.getElementById(domWrapId).offsetWidth - 5}px`;
        worldMapContainer.style.height = `${document.getElementById(domWrapId).offsetHeight - 5}px`;
      }
    },

Echarts图表自适应宽高大小

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12687.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!