echarts通过dataZoom来控制默认显示固定条数数据

需求:默认显示倒数六条数据

// 想显示成几条那么就把6改成几就可以了,dataAxis是横坐标的长度(倒序排列)
var start = dataAxis.length - 6
var end = dataAxis.length - 1
 dataZoom: [
         {
            type: 'slider',
            startValue: start,
            endValue:end
        },
        {
            type: 'inside'
        },
    ],
 

 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要在 ECharts 中使用 dataZoom显示6条数据,你可以使用 dataZoom 的 start 和 end 属性来控制可视化的数据范围。以下是一个示例代码: ```javascript // 假设你已经创建了一个 ECharts 实例并且有一个包含所有数据数据数组 var myChart = echarts.init(document.getElementById('my-chart')); // 替换为你的 ECharts 实例 var data = [/* your data array */]; // 配置 ECharts 表的 option var option = { xAxis: { type: 'category', data: data.map(function (item) { return item.name; }) }, yAxis: { type: 'value' }, series: [{ type: 'line', data: data.map(function (item) { return item.value; }) }], dataZoom: [{ type: 'slider', start: 0, end: 5, // 只显示前6条数据,索引从0开始计数 showDetail: false // 可选,是否显示详细信息 }] }; // 将配置应用于表 myChart.setOption(option); ``` 这段代码首先创建了一个 ECharts 实例,并假设你有一个包含所有数据数据数组。然后,配置了 xAxis(横轴)和 yAxis(纵轴),以及一个 line 类型的 series(系列)来绘制折线。接下来,在 option 中添加了一个 dataZoom 配置项,并设置其 start 和 end 属性,以控制可视化的数据范围。在这个例子中,我们将 start 设置为 0,end 设置为 5,这样只显示前 6 条数据(索引从 0 开始计数)。 最后,将配置应用于表,通过调用 `myChart.setOption(option)` 来渲染表。请注意,你需要将代码中的 `my-chart` 替换为你的 ECharts 实例的容器元素的 ID,并根据你的数据结构和需求进行相应的修改。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值