Echarts柱状图横坐标不显示

本人遇到的问题:折线图横坐标可以正常显示 柱状图接收一样的数据在横坐标却显示不了

1.在前端打印是否能够正常接收数据、数据类型是否有误以及数据是否有内容
html 复制代码
      console.log(typeof optionbar.xAxis.data)
      console.log(optionbar.xAxis.data)
2.如上确定能够接收到数据,并且数据格式无误,检查各种关键点如option是否对应这个echarts图
html 复制代码
    //折线图
    let lineDom = document.getElementById('line');
    let lineChart = echarts.init(lineDom);
    ...
    lineChart.setOption(optionline);

    //柱状图
    let barDom = document.getElementById('bar');
    let barChart = echarts.init(barDom);
    ...
    barChart.setOption(optionbar);
3.调整echarts图是否挤压或者遮挡横坐标显示
html 复制代码
grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
4.以上确定无误后遇到了跟我一样的情况
html 复制代码
//折线图横坐标数据处理
      optionline.xAxis.data = [...new Set((res.data.line || []).map(v => v.date))] || [];

//柱状图横坐标数据处理
      optionbar.xAxis[0].data = [...new Set((res.data.bar || []).map(v => v.date))] || [];

柱状图接收横坐标需要加索引[0],即xAxis[0],神奇,这会应该可以正常显示了

相关推荐
yngsqq15 分钟前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk18 分钟前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan19 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE23 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年25 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能36 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房36 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
轻语呢喃37 分钟前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂40 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7741 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor