2024年前端最新Vue Echarts图表dataZoom缩放区域根据数据量显示，原生前端开发的路该怎么走

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

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

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

left: ‘10%’,

right: ‘10%’,

bottom: ‘2%’,

start: 0,

end: 100,

textStyle: {

color: ‘#d4ffff’,

fontSize: 11

}

}, {

type: ‘inside’

}],

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数据

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

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

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题