| 前端框架：vue element ui |
| 项目参考 Git 地址：https://github.com/PanJiaChen/vue-element-admin |
| |
| |
| 说明：vue element ui 集成 highcharts-vue 后，点击收拢或展开左侧菜单， |
| chart 不会自动调整显示宽度。 |
| |
| |
| 修改位置：.\src\components\Charts\mixins\resize.js 方法，vue components |
| 以 mixins 混入方式引入 resize.js 作为可复用功能，实现对所有 chart 进行宽度 |
| 自适应。 |
| |
| |
| 修改 resize.js： |
| import {debounce} from '@/utils' |
| |
| export default { |
| data () { |
| return { |
| $_sidebarElm: null |
| } |
| }, |
| mounted () { |
| this.__resizeHandler = debounce (() => { |
| if (this.chart) { |
| this.chart.resize () |
| } |
| |
| // 这里要求所有 highcharts 组件内部都要绑定一个 ref 属性，且名字叫 chart，这点不太好，暂时没想到 |
| // 比较好的解决办法 |
| if (this.$refs.chart.chart) { |
| // 方法一，指定高度和宽度，有 animation 渐入效果 |
| let chart = this.$refs.chart.chart |
| let w = this.$refs.chart.$el.offsetWidth |
| let h = this.$refs.chart.$el.offsetHeight |
| |
| chart.setSize (w, h); |
| chart.hasUserSize = null; |
| |
| // 方法二，直接调用 reflow ()，但是不会触发 animation（没有渐入效果） |
| //this.$refs.chart.chart.reflow () |
| } |
| }, 100) |
| window.addEventListener ('resize', this.__resizeHandler) |
| |
| this.$_sidebarElm = document.getElementsByClassName ('sidebar-container')[0] |
| this.$_sidebarElm && this.$_sidebarElm.addEventListener ('transitionend', this.$_sidebarResizeHandler) |
| }, |
| beforeDestroy () { |
| window.removeEventListener ('resize', this.__resizeHandler) |
| |
| this.$_sidebarElm && this.$_sidebarElm.removeEventListener ('transitionend', this.$_sidebarResizeHandler) |
| }, |
| methods: { |
| $_sidebarResizeHandler (e) { |
| if (e.propertyName === 'width') { |
| debugger |
| this.__resizeHandler () |
| } |
| } |
| } |
| } |
| |
| |
| |
| |
| 参考： |
| https://www.highcharts.com/forum/viewtopic.php?t=32608 （topic） |
| http://jsfiddle.net/ersz3b8a/ （highcharts animation 演示） |
| https://github.com/highcharts/highcharts-vue （highcharts-vue 官方 doc 与 source code） |
| https://my.oschina.net/u/2612473/blog/4355146 （以绑定 ref 属性方式对 chart 进行 reflow） |
| https://juejin.cn/post/6844903908398071816 （vue mixins 混入介绍） |
| https://panjiachen.github.io/vue-element-admin-site/guide/advanced/chart.html#demo （echart 与 highcarts 一样本身无法主动自适应） |
