怎么处理ECharts x轴数据过多的展示问题？

效果图

解决方案

解决方案是，配置dataZoom属性。dataZoom用于区域缩放，从而能自由关注数据细节，或者概览数据整体。

var options = {
  xAxis: {
    type: "category",
    data: ["1999", "2000", "2001", "2002", "2003", "2004", "2005"],
  },
  yAxis: {},
  dataZoom: [
    {
      type: "slider",
      realtime: true,
      start: 0,
      end: 50,
      xAxisIndex: [0],
    },
  ],
  series: [
    {
      type: "bar",
      barWidth: 12,
      data: [143, 185, 193, 143, 185, 193, 50],
    },
  ],
};


var dom = document.getElementById("myCharts");
var myChart = echarts.init(dom);
myChart.setOption(options);
var dom = document.getElementById("myCharts");
var myChart = echarts.init(dom);
myChart.setOption(options);

示例代码下载

可以复制以上代码运行查看使用效果，也可以到GitHub: github.com/Jackyyans/c…下载，更多示例将会持续更新，欢迎关注。