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

相关推荐
落笔忆梦1 分钟前
利用浏览器空闲时间优化资源加载与渲染
前端·javascript
我是日安2 分钟前
Day 2 - 开发环境建置:monorepo
vue.js
艾小码2 分钟前
还在用Vue 2硬撑?升级Vue 3的避坑指南来了!
前端·javascript·vue.js
是晓晓吖3 分钟前
page.waitForResponse 执行环境:页面还是 Node.js?
前端·puppeteer
三十_4 分钟前
【Docker】学习 Docker 的过程中,我是这样把镜像越做越小的
前端·后端·docker
Mintopia5 分钟前
🌐 交互式 AIGC:Web 端实时反馈生成的技术架构设计
前端·javascript·aigc
蓝天星空6 分钟前
ES6-Promise用法
前端·javascript·es6
诗书画唱9 分钟前
解决HTML/JS开发中的常见问题与实用资源
前端·javascript·html
Mintopia10 分钟前
🚀 Next.js 自建部署全家桶:Docker + PM2 + Nginx
前端·javascript·全栈
鹏多多13 分钟前
详解vue渲染函数render的使用
前端·javascript·vue.js