遇到的难题汇总

一、在布局中动态设置左侧导航的高度

布局里可能有很多层级的子组件,在子组件没有完全加载之前,没法知道容器的高度,因此很难正确设置左侧导航的高度。
另外,在交互过程中,容器的高度也会改变,还有当浏览器宽高改变或者屏幕分辨率改变时,这些情况下也需要动态设置左侧导航的高度。
有没有办法在布局里知道是否所有的子组件均已加载完毕?或者有没有办法知道容器的高度是否改变?

一种思路是:不在布局里设置左侧导航高度,在最后一个子组件的componentDidUpdate事件中设置,这样的问题是每个页面都需要找到最后一个子组件并且设置高度。

解决方法:在window的resize事件里监控innerHeight(document.documentElement.clientHeight),并根据innerHeight来动态设置左侧导航的高度。

二、ECharts中横坐标出现重影现象(文本加粗)

正常的文本:
296720-20170519144539416-1692662247.png

重影的文本:
296720-20170519144504463-1237865889.png

很奇怪的是:这个问题在有些电脑会出现,有些电脑不会。

------------------------------------ 2019.1.16 Update ------------------------------------
解决方法:
初始化ECharts时将像素比的参数 devicePixelRatio 设置成2倍(默认是 1),注意要在 init 方法的第三个参数中设置,第二个参数是设置主题的,置为 null 即可。

ECharts.init(el); -> ECharts.init(el, null, {devicePixelRatio: 2});

顺便贴下 init 方法的源码:

/**
 * @param {HTMLElement} dom
 * @param {Object} [theme]
 * @param {Object} opts
 * @param {number} [opts.devicePixelRatio] Use window.devicePixelRatio by default
 * @param {string} [opts.renderer] Currently only 'canvas' is supported.
 * @param {number} [opts.width] Use clientWidth of the input `dom` by default.
 *                              Can be 'auto' (the same as null/undefined)
 * @param {number} [opts.height] Use clientHeight of the input `dom` by default.
 *                               Can be 'auto' (the same as null/undefined)
 */
export function init(dom, theme, opts) {
    var existInstance = getInstanceByDom(dom);
    if (existInstance) {
        return existInstance;
    }

    var chart = new ECharts(dom, theme, opts);
    chart.id = 'ec_' + idBase++;
    instances[chart.id] = chart;

    if (dom.setAttribute) {
        dom.setAttribute(DOM_ATTRIBUTE_KEY, chart.id);
    }
    else {
        dom[DOM_ATTRIBUTE_KEY] = chart.id;
    }

    enableConnect(chart);

    return chart;
}

转载于:https://www.cnblogs.com/kagol/p/6873684.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值