echarts的y轴的刻度只显示0和100两个刻度值，其它的都不需要显示？

Question

如何让y轴的刻度线只显示0和100 两个数字
让x轴的刻度是五秒为一个刻度
变成这种密集一点的这种
如何设置呢
数据来源是 后端发起请求 每五秒请求一次，一次只返回一个数值

const initChartsMonitor = () => {
  let data: number[] = [];
  for (var i = 0; i < 1000; i++) {
    data.push(props.cpu_percent);
  }
    const myChart = echarts.init(chartsMonitorRef.value);
    const option = {
        grid: {
            top: 15,
            right: 15,
            bottom: 30,
            left: 30,
        },
    xAxis: {
      type: 'time',
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      boundaryGap: [0, '100%'],
      axisLine: {
        show: true
      },
      splitLine: {
        show: false
      }
    },
    series: [
      {
        name: 'Fake Data',
        type: 'line',
        showSymbol: false,
        data: data
      }
    ]
    };
// 这个是定时器
  setInterval(function () {
    for (var i = 0; i < 5; i++) {
      data.shift();
      data.push(props.cpu_percent);
    }

    myChart.setOption<echarts.EChartsOption>({
      series: [
        {
          data: data
        }
      ]
    });
  }, 5000);
    myChart.setOption(option);
    state.myCharts.push(myChart);
};

这个是代码

Answer 1

看你的情况，不需要限制Y轴只有 0 和 100 两个数字吧？直接设置Y轴间隔（yAxis. interval ）为 100 就好了呀。
然后第二个问题，就是5秒为一个刻度，那么就需要你在添加DataSet的时候把间隔做成秒就好了歪。

用这个 Dynamic Data DEMO 稍微改了一下，日期没有输完整，因为懒得用 new Date 取值，大概看看意思就好：

const categories = (function () {
  let now = new Date();
  let res = [];
  let len = 20;
  while (len--) {
    res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
    now = new Date(+now - 5000);
  }
  return res;
})();
const data = (function () {
  let res = [];
  let len = 20;
  while (len--) {
    res.push(Math.round(Math.random() * 1000));
  }
  return res;
})();
option = {
  title: {
    text: 'Dynamic Data'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#283b56'
      }
    }
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  dataZoom: {
    start: 0,
    end: 100
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    data: categories
  },
  yAxis: {
    type: 'value',
    scale: true,
    name: 'Price',
    interval:100,
    boundaryGap: [0, 0.1]
  },
  series: [
    {
      name: 'Dynamic Line',
      type: 'line',
      data: data
    }
  ]
};
setInterval(function () {
  let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
  data.push(Math.round(Math.random() * 1000));
  categories.push(axisData);
  myChart.setOption({
    xAxis:  {
      data: categories
    },
    series: [
      {
        data: data
      },
    ]
  });
}, 5000);