2024年Web前端最新Vue Echarts图表dataZoom缩放区域根据数据量显示，2024Web前端面试心得

后话

---

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

dataZoom具体配置 点这里

然后写代码去判断一下这个dataZoom 是否生效以及他的初始和结束分别是多少。

比如当我想让柱状图或者是折线图横轴数量超过7的时候出现缩放控件，那在小于等于7的时候把控件的show属性设置为false，初始设置为0，当超过7的时候把控件的show属性设置为true，初始位置计算一下或者是直接设置为0。xData是x轴数据的list集合。

if (xData.length <= 7) {

option.dataZoom[0].show = false

option.dataZoom[0].start = 0

} else {

option.dataZoom[0].start = (7 / xData.length) * 100

// option.dataZoom[0].start = 0

}

这样就可以了！

然后就可以渲染echarts图表了。

this.charts = echarts.init(document.getElementById(id))

this.charts.clear() // 清空echarts数据

this.charts.setOption(option) // 重新渲染option

销毁 echarts 图表，一般是放到销毁组件的生命周期中。

// 销毁

destroyed () {

this.charts.dispose()

}

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

s://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-xK57lzuk-1715430773519)]