如何设置x轴为时间轴的echars图表?

16 篇文章 0 订阅
6 篇文章 0 订阅

在vue项目中echars如何设置x轴为time时间轴?
将xAxis中的type值设为time,data并不用写,然后设置图表需要的时间范围即可。

代码展示:

  1. 在option定义外面设置时间范围,通过moment.js来格式化时间戳(时间制为24小时)

 

//  默认开始时间和结束时间 当天00点到23点59分
startValue = this.$moment().startOf('day').format('YYYY-MM-DD HH:mm:ss');
endValue = this.$moment().endOf('day').format('YYYY-MM-DD HH:mm:ss');

    2、在xAxis里面设置type为time,并设置时间范围(我设置的时间间隔是2小时,)

         xAxis: {
              type: 'time',
              min:startValue,
              max:endValue,
              // 让x轴定位到顶部
              position:'top',
              //  设置刻度为2个小时: * 1000代表转为毫秒(1秒等于1000毫秒)
              interval: 3600 * 1000 * 2,
              // 是否显示分隔线
              splitLine: {
                show: true
              }
          },

3、具体效果

echars中xAxis里面type的相关文档

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Echarts的x可以设置时间轴,通过将xAxis中的type值设为time来实现。在这种情况下,不需要指定xAxis对象的data,而是通过series对象中的value\[0\]来显示时间轴的Label。value\[0\]可以是时间戳,也可以是形如"2018-12-5 10:20:30"的日期格式,但不能是无效的时间格式类型。同时,可以使用moment.js来格式化时间戳,以便显示在图表中。以下是一个示例代码: ```javascript var option = { xAxis: { type: 'time', axisLabel: { formatter: function(value, index) { return moment(value).format('YYYY-MM-DD HH:mm:ss'); } } }, // 其他配置项... }; var myChart = echarts.init(document.getElementById('chart'), theme); myChart.setOption(option); ``` 在这个示例中,x的类型被设置为time,通过axisLabel中的formatter函数来格式化时间戳,以便在图表中显示。你可以根据自己的需求进行进一步的配置和调整。 #### 引用[.reference_title] - *1* *3* [Echart图表X轴为时间轴的解释](https://blog.csdn.net/weixin_34162695/article/details/92336986)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [如何设置x轴为时间轴echars图表?](https://blog.csdn.net/m0_58060036/article/details/118091860)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值