echars折线图如何让x轴的数据与series数据不对应?

image

image

image
x轴显示7条数据,series需要显示100多条数据,
在页面上显示成这样
image

貌似是一个x数据对应一个series数据,怎样让100多条数据全部展示呢?

`xAxis: [

           {
                 boundaryGap: false,  // 坐标的刻度是否在中间 
                 data: this.testOpinionData, //数据
                 axisLine: {   // 坐标轴线条相关设置(颜色等)
                   lineStyle: {
                     color: '#0e2a60'
                   }
             },
            show:false,
                 axisTick: {  // 坐标轴刻度相关设置
                   length: '0'  // 长度设置为0
                 },
                 axisLabel: {  // 坐标轴刻度标签
                   margin: 6,  // 刻度标签与轴线之间的距离
                   fontSize: '12',
                   color: '#ffffff'
                 },
                 splitLine: {  // 坐标轴分割线。默认数值轴显示,类目轴不显示
                   show: false,
                   lineStyle: {
                     color: '#0e2a60'
                   }
             },
               },
          {
                 boundaryGap: false,  // 坐标的刻度是否在中间 
            data: this.opinionData, //数据
            show: true, 
                 axisLine: {   // 坐标轴线条相关设置(颜色等)
                   lineStyle: {
                     color: '#0e2a60'
                   }
                 },
                 axisTick: {  // 坐标轴刻度相关设置
                   length: '0'  // 长度设置为0
                 },
                 axisLabel: {  // 坐标轴刻度标签
                   margin: 6,  // 刻度标签与轴线之间的距离
                   fontSize: '12',
                   color: '#ffffff'
                 },
                 splitLine: {  // 坐标轴分割线。默认数值轴显示,类目轴不显示
                   show: true,
                   lineStyle: {
                     color: '#0e2a60'
                   }
                 }
          }
        ],`
        ![image](/img/bVbA7Rs)
阅读 7.6k
2 个回答

做两个X轴呀
一个X轴是真实的,有100多项,可以是索引数组,然后设置隐藏
一个X轴展示用的,只有七个星期值,设置显示

x轴只有7个点当然只显示7个数据,你想全部展示就要有对应的x轴的点

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题