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浏览器也不行
请问什么原因，如果解决？
从截图中看是日期的数据没有取到，具体的可能要通过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 于 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，就是一个大斜线，估计是同样的问题
页:
[1]
2