✍ Requirement Background
Echarts chart library is a popular icon library. In the process of using it, there will be some problems. Here is a problem WORTH recording that I have encountered:
When developing chart requirements, it is often necessary to have a chart that can adapt to the page, but when using Echarts, there is a problem:
When I set the width of the chart to 50%, I found that the underlying elements are unrecognizable % and will render to PX (50px).
➤ ➤
% = % = % = % = % = % = % = % = % = % = % = % = % = % = % = % = % In general, if you want adaptive percentages, you need to initialize them when the parent element has a width, which you can do with nextTick.
✨ tip:
But initialization alone obviously does not meet the needs of adaptive pages, which we can combine
Echart provides resize(), and the window.addeventListener ('resize', fn) implementation.
Remember to use this.$once(‘hook:beforeDestroy’) for destruction listening.
👀 Related codes:
// Adaptive const handler = () => echart.resize() window.addeventListener ('resize', handler) this.$once('hook:beforeDestroy', () => { window.removeEventListener('resize', handler) })Copy the code