echarts中dataZoom来控制默认显示固定条数数据（可自定义）

<>先说需求，在开产品需求会时，让echarts的柱状图和折线图默认显示6条数据，其它的通过剩余拉动显示

<>将剩余的通过两边按钮拖动显示

<>局部代码
// 想显示成几条那么就把6改成几就可以了，resultarr是横坐标的长度(倒序排列) let resultarr = [] var start =
resultarr.length - 6 var end = resultarr.length - 1 dataZoom: [ { show: true,
type: 'slider', handleSize: 32, // 两边的按钮大小 startValue: start, // 重点在这 -- 开始的值
endValue: end // 重点在这 -- 结束的值 }, { // zoomLock: true, // 这个开启之后只能通过鼠标左右拉动，不能滚动显示
type: 'inside' } ],
<>全部代码
var option = { title: { left: 'center', text: data.title // 标题 }, tooltip: {
trigger: 'axis', axisPointer: { type: 'shadow' } }, dataZoom: [ { show: true,
type: 'slider', handleSize: 32, // 两边的按钮大小 startValue: start, // 重点在这 -- 开始的值
endValue: end // 重点在这 -- 结束的值 }, { // zoomLock: true, // 这个开启之后只能通过鼠标左右拉动，不能滚动显示
type: 'inside' } ], legend: { right: '8%' }, grid: { // 显示的容器 left: '3%', right
: '4%', bottom: '6%', containLabel: true }, xAxis: { name: '物流商', type:
'category', offset: 7, data: resultarr // x轴要显示的内容-----就是这儿要根据显示的长度来自定义 //
data: data.data.map(item => item.name) }, yAxis: { name: '妥投率%', type: 'value',
boundaryGap: [0, 0.01] }, color: ['#5b9bd5', '#ed7d31', '#a5a5a5', '#ffc000',
'#4472c4', '#70ad47'], series: seriesValue }
<>seriesValue

//这个时间可以根据自己需要的内容来 let mmm = ['2021-07', '2021-08', '2021-09', '2021-10',
'2021-11', '2021-12'] seriesValue = mmm.map((key, index) => { return { name: key
, type: 'bar', label: { show: true, position: 'top' }, barMaxWidth: 36, // 柱图宽度
data: Object.keys(temp).map(key => temp[key][index].effectRate) } })

• « 上一篇：js 判断数组中是否有重复值两种方法
• » 下一篇：【好文推荐】openGauss psycopg2 批量操作性能测试