在vue中使用echarts解决自适应问题

使用插件

npm install echarts --save
npm install vue-echarts-v3 --save 

原理

在浏览器窗体改变的时候进行resize 使得echarts自适应
关键

• 使用echarts自带的resize()
• window的监听事件

形式

制作echart组件 并把resize方法绑定到组件上 在实例化之后每个echarts都可以自适应

代码

1、template

<i-echarts :option="option" ref="charts" />
// option为echarts的option

2、JavaScript

import IEcharts from 'vue-echarts-v3/src/full.js'
 components: {
    'i-echarts': IEcharts
  },
  props: {
    option: {}
  },
  methods: { 
    resize () { this.$refs.charts.resize() } 
  },
  mounted () { 
    const _this = this
    const _this = this window.addEventListener('resize', () => _this.resize(), false) 
    setTimeout(() => { _this.resize() }, 10) 
  }

说明

本方法只是一个简单的自适应方法 并没有更多的echarts相关操作接入
别问 问也不懂