Echarts图表插件x轴显示日期

登录

利用Echarts图表插件，添加了数据表数据源，修改了代码，在设计器端x坐标轴显示了日期格式：

代码：
const {

  yearmon: xAxisData,

  rcyl: yAxisData1,

  rcy: yAxisData2,

  hs: yAxisData3,

  remarks: yAxisData4

} = ForguncyEchartsHelper.splitDataSource(Context.oil_daily)

option = {

  legend: {
top: 30
  },
  tooltip: {
trigger:'axis'
  },

  xAxis: {
type: 'category',
//name: '日期',
//type: 'time',
data: xAxisData,
axisLabel:{
         formatter: function (value) {
            // 格式化时间轴标签
            return echarts.format.formatTime('yyyy/MM/dd', value);
         }
}
  },
  yAxis: [
{
   type: 'value',
   name: '日产液油',
   nameLocation:'middle',
   //nameTextStyle:{
   //  color:'#A52A2A'
   //} ,
   nameGap: 40,
   axisLine: {
      lineStyle: {
      color: "rgba(173, 80, 80, 1)"
      }
   }
},
{
   type: 'value',
   name: '含水',
   nameLocation: 'middle',
   min:0,
   max:100,
   axisLine: {
      lineStyle: {
      color: '#007FFF'
      }
   },
   nameGap:40,
   splitLine: false
}
  ],
  series: [
{
   name:'日产液',
   data: yAxisData1,
   type: 'line',
   //stack: 'a',
   areaStyle:{},
   //label: {
   //  show:true

   //},
   color: '#A52A2A' //褐色
},
{
   name: '日产油',
   data:yAxisData2,
   type: 'line',
   //stack: 'a',
   areaStyle:{},
   color: '#FF2400' //红色
},
{
   name: '含水',
   data: yAxisData3,
   type: 'line',
   yAxisIndex:1,
   color:'#007FFF' //蓝色
}
{
   name:'备注',
   data: yAxisData4,
   type: 'line'
}


  ]
};

在浏览器中打开，日期格式显示不出来。更换了浏览器同样不行，edge浏览器也不行

请问什么原因，如果解决？

Joe.xu · Joe.xu

从截图中看是日期的数据没有取到，具体的可能要通过demo才能分析

，
需要您附上一个可以复现问题的工程文件和说明操作步骤。这样我们这边可以更好地理解您的问题，更好的帮助到您哦~

神马 · 神马

这个是内网数据，没法做公网上测试

神马 · 神马

上面的代码，还有数据配置的截图，应该可以说明问题

神马 · 神马

yearmon: xAxisData,
这个是日期格式的数据，在x轴上的格式
xAxis: {
type: 'category',
//name: '日期',
//type: 'time',
data: xAxisData,
axisLabel:{
         formatter: function (value) {
            // 格式化时间轴标签
            return echarts.format.formatTime('yyyy/MM/dd', value);
         }
}

神马 · 神马

上面的代码我不太懂，函数的参数value，不知道是否更换

神马 · 神马

“从截图中看是日期的数据没有取到“，如果是这样，那么在加数据之前，把日期格式转换成文本，应该就能解决这个问题

神马 · 神马

“从截图中看是日期的数据没有取到“按照这个提示，在加载数据之前，把日期格式转换成文本格式，确实到达了预期效果。
只是不知道是否是最佳方案，之前的方法为啥不行？

Simon.Sun · Simon.Sun

本帖最后由 Simon.Sun 于 2024-6-14 16:48 编辑

您好，大佬使用的是内建库吗，内建库日期是用 Excel 时间序列来存储时间的，即实际存储的值是 1970/1/1 到今天的相隔天数。
如果用 ECharts 日期格式化函数，需要先转成 Date 对象，比如：

formatter: function (value) {
            // 将 Excel 时间数值转换为可读的时间格式
            var date = new Date((value - 25569) * 24 * 3600 * 1000);
            return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
      }

不清楚是不是这个原因，不过转换的问题大概率是日期的类型不是 Date 类型导致的。可能需要做下类型处理。

神马 · 神马

感谢支持回复！又深入理解了一步，我使用的是外链Oracle数据库，使用time，就是一个大斜线，估计是同样的问题

		自动登录	找回密码
密码			立即注册

[已处理] Echarts图表插件x轴显示日期

最佳答案

10 个回复

本帖子中包含更多资源

活字格认证

活字格高级认证

微信认证勋章

讲师达人

悬赏达人

圣诞拼拼乐

Wyn高级认证

Wyn认证