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

先说需求，在开产品需求会时，让echarts的柱状图和折线图默认显示6条数据，其它的通过剩余拉动显示将剩余的通过两边按钮拖动显示局部代码// 想显示成几条那么就把6改成几就可以了，resultarr是横坐标的长度(倒序排列)let resultarr = []var start = resultarr.length - 6var end = resultarr.length - 1dataZoom

Э时间行者于我

17245人浏览 · 2022-01-19 09:37:38

Э时间行者于我 · 2022-01-19 09:37:38 发布

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

echarts

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

echarts-dataZoom

局部代码

// 想显示成几条那么就把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

echarts

//这个时间可以根据自己需要的内容来
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)
     }
   })