前言
有如下页面需求:在一个页面展示多个echarts图表,并且根据屏幕大小变化而变化。
实例
可以封装成组件使用,以增加代码复用性
// myCharts.vue <template> <div class="charts-comps" ref="charts"></div> </template> <script> import echarts from 'echarts' export default { name: 'myCharts', props: { type: { type: String, default: '' } }, data () { return { resizeTimer: null, myChart: null } }, methods : { init () { let myChart = echarts.init(this.$refs.charts); this.myChart = myChart; myChart.setOption({ xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: 'line', areaStyle: {} }] }); } } mounted () { this.init(); // 初始化图表 let _this = this; window.addEventListener('resize', function () { if (_this.resizeTimer) clearTimeout(_this.resizeTimer); _this.resizeTimer = setTimeout(function () { _this.myChart.resize(); }, 100) }) } } </script> <style lang="less" scoped> .charts-comps{ width: 100%; height: 100%; } </style>
这样就可以在需要用到的地方使用了
// index.vue <template> <my-charts class="charts-comps" ref="charts" v-for="item in dataList" :key="item"></my-charts> </template> <script> import myCharts from './myCharts' export default { name: 'test', components: {myCharts}, data () { return { dataList: ['test1','test2','test3','test4'] } } } </script>
关键代码解析
let _this = this; window.addEventListener('resize', function () { ... })
在myCharts组件中去监听窗口大小变化,这样可以针对每一个图表很方便的resize()重绘图表(Echarts.resize()是echarts的对图表进行重新绘制的方法)。这里使用window.addEventListener而不使用window.onresize的原因是:window.onresize绘覆盖掉前面定义的方法,而只执行最后一个,导致图表只有最后一个重绘了,而window.addEventListener避免了这个问题。
if (_this.resizeTimer) clearTimeout(_this.resizeTimer); _this.resizeTimer = setTimeout(function () { _this.myChart.resize(); }, 100)
结合 函数防抖(debounce) 避免在窗口大小变化时频繁的进行图表的resize()。在处理复杂的function时可以很大限度的提高性能。实现原理就是对要执行的目标方法延时处理,设置一个定时器,当再次执行相同方法时(窗口大小变化时会被频繁的侦听到onresize),若前一个定时任务还未执行完,则清除掉定时任务,重新定时。这样当屏幕大小在100毫秒之内没有再次变化时才会对Echarts进行resize(),当然时间段可以根据自身需要设置长一点。
补充知识:vue+echarts 同页面多个echarts图表,明明宽度设置的都是100%,却只有第一个生效以及如何实现自适应
问题描述
三个echarts图表,明明宽度设置的都是100%,却只有第一个生效以及如何实现自适应
解决办法
1.初始化时需要加上,确保操作的是最新的DOM
this.$nextTick(_ => { });
2.echarts图表自适应实现,需要在渲染图表后加上
window.addEventListener("resize", function() { myChart.resize(); });
完整如下:
以上这篇vue实现多个echarts根据屏幕大小变化而变化实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]