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],神奇,这会应该可以正常显示了

相关推荐
好玩的Matlab(NCEPU)8 小时前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰8 小时前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome
Crystal3288 小时前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476688 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
lecepin8 小时前
AI Coding 资讯 2025-10-29
前端·后端·面试
余道各努力,千里自同风8 小时前
小程序中获取元素节点
前端·小程序
PineappleCoder8 小时前
大模型也栽跟头的 Promise 题!来挑战一下?
前端·面试·promise
非凡ghost8 小时前
MousePlus(鼠标增强工具) 中文绿色版
前端·windows·计算机外设·软件需求
Moonbit8 小时前
MoonBit Pearls Vol.13:初探 MoonBit 中的 JavaScript 交互
javascript·后端
焚 城9 小时前
EXCEL(带图)转html【uni版】
前端·html·excel