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

相关推荐
bdawn1 小时前
Vue3 项目首屏加载性能优化全攻略
性能优化·vue·策略·分包
blackorbird1 小时前
Edge 浏览器 IE 模式成攻击突破口:黑客借仿冒网站诱导攻击
前端·edge
谷歌开发者2 小时前
Web 开发指向标 | Chrome 开发者工具学习资源 (一)
前端·chrome·学习
名字越长技术越强2 小时前
Chrome和IE获取本机ip地址
前端
天***88962 小时前
Chrome 安装失败且提示“无可用的更新” 或 “与服务器的连接意外终止”,Chrome 离线版下载安装教程
前端·chrome
半梦半醒*2 小时前
zabbix安装
linux·运维·前端·网络·zabbix
大怪v3 小时前
【搞发🌸活】不信书上那套理论!亲测Javascript能卡浏览器Reader一辈子~
javascript·html·浏览器
清羽_ls3 小时前
React Hooks 核心规则&自定义 Hooks
前端·react.js·hooks
你的人类朋友3 小时前
“签名”这个概念是非对称加密独有的吗?
前端·后端·安全
西陵3 小时前
Nx带来极致的前端开发体验——任务缓存
前端·javascript·架构