echarts使用datazoom左右滑动后,怎么设置x轴时间刻度只显示左右两个值?

实现这个效果:

img


我的代码:

dataZoom: [
          {
            type: "slider", //slider表示有滑动块的,inside表示内置的
            show: true,
            backgroundColor: "#eee", //组件的背景颜色
            height: 18,
            xAxisIndex: [0],
            bottom: 10,
            start: 80,
            end: 100,
            handleSize: 18,
            handleIcon: "",
            showDetail: false,
            borderColor: "#eee", //边框颜色
            fillerColor: "#fbd9d9", //选中范围背景色
            backgroundColor: "#fff", //背景颜色
            moveOnMouseMove: true,
            dataBackground: {
              lineStyle: {
                // color: "#fce7c6",
                color: "red",
              },
              areaStyle: {
                color: "#fff",
              },
            },
            selectedDataBackground: {
              lineStyle: {
                // color:"#f39b44"
                color: "#green",
              },
              areaStyle: {
                color: "#fff",
                shadowColor: "rgba(0, 0, 0, 0.5)",
                shadowBlur: 10,
              },
            },
            handleSize: 30,
            handleSize: "130%", // 手柄大小
            // 用于画手柄
            handleIcon:
              // "M0,0 v9.7h5 v-9.7h-5 Z", // 画一个长方形
              "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z", // 画一个圆形
            handleStyle: {
              color: "#fff",
              global: true, // 缺省为 false
              shadowBlur: 6,
              shadowColor: "rgba(123, 154, 204, 0.5)",
              shadowOffsetX: 0, // 阴影偏移x轴多少
              shadowOffsetY: 0, // 阴影偏移y轴多少
            },
          },
        ],

好像这个需求无法实现,在datazoom中无法实现,我建议你去改变数据源,将数据源中的X的数据中间的全部改成 空格填充,只留第一个和最后一个数据,我只能想到这种办法了

showDetail设为true可以在滚动区域显示前后的范围,但你说的x轴只显示前后范围,只能获取到范围处理x的数据了
不过这样的需求很怪- -

// 获取dataZoom改变后的开始结束值
myChart.on('datazoom',function(params){
  const dataZoom = myChart.getModel().option.dataZoom[0]
  console.log(dataZoom.startValue, dataZoom.endValue)
  ...
})