在vue中使用echarts解決自適應問題
使用插件
npm install echarts --save
npm install vue-echarts-v3 --save
原理
在瀏覽器窗體改變的時候進行resize 使得echarts自適應
關鍵
- 使用echarts自帶的resize()
- window的監(jiān)聽事件
形式
制作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相關操作接入
別問 問也不懂
