echarts自适应

最新推荐文章于 2024-07-26 15:20:05 发布

小山羊~

最新推荐文章于 2024-07-26 15:20:05 发布

阅读量421

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_21747731/article/details/102877758

版权

本文介绍如何在项目中使用ECharts实现自适应屏幕尺寸的功能，通过引入mixins文件夹中的resize文件，并结合util.js中的url.js模块，确保图表在窗口大小变化时能自动调整大小。

摘要由CSDN通过智能技术生成

（1）引入文件夹mixins,resize文件

import {
  debounce
} from '@/untils/url.js'

export default {
  data () {
    return {
      $_sidebarElm: null,
      $_resizeHandler: null
    }
  },
  mounted () {
    this.$_resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
        this.chart1.resize()
      }
    }, 100)
    this.$_initResizeEvent()
    this.$_initSidebarResizeEvent()
  },
  beforeDestroy () {
    this.$_destroyResizeEvent()
    this.$_destroySidebarResizeEvent()
  },
  // to fixed bug when cached by keep-alive
  // https://github.com/PanJiaChen/vue-element-admin/issues/2116
  activated () {
    this.$_initResizeEvent()
    this.$_initSidebarResizeEvent()
  },
  deactivated () {
    this.$_destroyResizeEvent()
    this.$_destroySidebarResizeEvent()
  },
  methods: {
    // use $_ for mixins properties
    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential