找回密码
 立即注册

QQ登录

只需一步,快速开始

神马

中级会员

28

主题

153

帖子

517

积分

中级会员

积分
517
QQ
神马
中级会员   /  发表于:2024-6-13 19:20  /   查看:1877  /  回复:10
100金币
利用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才能分析, 需要您附上一个可以复现问题的工程文件和说明操作步骤。这样我们这边可以更好地理解您的问题,更好的帮助到您哦~

10 个回复

倒序浏览
最佳答案
最佳答案
Joe.xu讲师达人认证 悬赏达人认证 活字格认证
超级版主   /  发表于:2024-6-13 19:20:32
来自 2#
从截图中看是日期的数据没有取到,具体的可能要通过demo才能分析
需要您附上一个可以复现问题的工程文件和说明操作步骤。这样我们这边可以更好地理解您的问题,更好的帮助到您哦~
回复 使用道具 举报
神马
中级会员   /  发表于:2024-6-14 09:23:17
3#
这个是内网数据,没法做公网上测试
回复 使用道具 举报
神马
中级会员   /  发表于:2024-6-14 09:31:13
4#
上面的代码,还有数据配置的截图,应该可以说明问题
回复 使用道具 举报
神马
中级会员   /  发表于:2024-6-14 09:33:26
5#
yearmon: xAxisData,
这个是日期格式的数据,在x轴上的格式
xAxis: {
    type: 'category',
    //name: '日期',
    //type: 'time',
    data: xAxisData,
    axisLabel:{
            formatter: function (value) {
                // 格式化时间轴标签
                return echarts.format.formatTime('yyyy/MM/dd', value);
            }
    }
回复 使用道具 举报
神马
中级会员   /  发表于:2024-6-14 09:42:12
6#
上面的代码我不太懂,函数的参数value,不知道是否更换
回复 使用道具 举报
神马
中级会员   /  发表于:2024-6-14 10:54:50
7#
“从截图中看是日期的数据没有取到“,如果是这样,那么在加数据之前,把日期格式转换成文本,应该就能解决这个问题
回复 使用道具 举报
神马
中级会员   /  发表于:2024-6-14 15:01:47
8#
“从截图中看是日期的数据没有取到“按照这个提示,在加载数据之前,把日期格式转换成文本格式,确实到达了预期效果。
只是不知道是否是最佳方案,之前的方法为啥不行?
回复 使用道具 举报
Simon.Sun活字格认证 Wyn认证
超级版主   /  发表于:2024-6-14 16:44:07
9#
本帖最后由 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 类型导致的。可能需要做下类型处理。



本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复 使用道具 举报
神马
中级会员   /  发表于:2024-6-16 09:39:56
10#
感谢支持回复!又深入理解了一步,我使用的是外链Oracle数据库,使用time,就是一个大斜线,估计是同样的问题
回复 使用道具 举报
12下一页
您需要登录后才可以回帖 登录 | 立即注册
返回顶部