echarts图表dataZoom 组件用于区域缩放

最新推荐文章于 2024-09-17 07:23:55 发布

api13

最新推荐文章于 2024-09-17 07:23:55 发布

阅读量321

点赞数

文章标签：大数据

本文链接：https://blog.csdn.net/weixin_58688577/article/details/125760506

版权

本文介绍了如何使用Echarts的DataZoom组件实现区域缩放功能，特别是在X轴坐标众多时，通过设置start和end属性来控制显示的百分比范围，从而提升图表的可读性。

摘要由CSDN通过智能技术生成

表单有时候需要展现的X轴坐标很多，就需要区域缩放

区域缩放核心代码是dataZoom，dataZoom[0]，要写进度，start和end就是从1%到60%，可见区域

效果

代码

option = {
  color: ["#3398DB"],
  tooltip: {
    trigger: "axis"
  },
  xAxis: {
    data: ["2014-07-14", "2014-07-15", "2014-07-16", "2014-07-17", "2014-07-18", "2014-07-19", "2014-07-20", "2014-07-21", "2014-07-22", "2014-07-23", "2014-07-24", "2014-07-25", "2014-07-26", "2014-07-27", "2014-07-28", "2014-07-29", "2014-07-30", "2014-07-31", "2014-08-01", "2014-08-02", "2014-08-03", "2014-08-05", "2014-08-06