echarts的dataZoom里的endValue设置固定长度

最新推荐文章于 2024-12-13 11:46:49 发布

LLL_LH

最新推荐文章于 2024-12-13 11:46:49 发布

阅读量2.5k

点赞数

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/LLL_liuhui/article/details/115200037

版权

本文介绍了如何在ECharts的dataZoom组件中设置endValue，以实现折线图显示固定长度的数据。通过设置endValue，可以限制数据展示范围，优化过多数据的展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

写了一个折线图，但是数据太多，所以加了dataZoom,之后又要一个页面显示固定长度，所以endValue要加限制。

官方文档：https://echarts.apache.org/zh/option.html#dataZoom-inside.endValue

放代码：

setChartOptions (charts) {
    option = {
      tooltip: {
        show: true,
        trigger: 'axis',
        confine: true
      },
      legend: {
        show: false
      },
      grid: {
        left: '2%',
        right: '10%',
        bottom: '5%',
        containLabel: true,
        top: '20',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.data.lineData.category,
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
      },
      yAxis: {
        type: 'value'
      },
      dataZoom: [{
        show: true,
        type: