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

最新推荐文章于 2024-09-11 15:57:00 发布

原创最新推荐文章于 2024-09-11 15:57:00 发布 · 2.4k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js

前端同时被 3 个专栏收录

26 篇文章

订阅专栏

vue

16 篇文章

订阅专栏

echars

6 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何使用Echarts设置时间轴xAxis为time类型，包括如何定义时间范围、设置时间间隔以及实现效果。通过设置min和max属性指定当天0点到23点的时间范围，利用moment.js进行时间格式化，同时设置interval属性为2小时，确保x轴每隔2小时显示一个刻度。此外，还展示了如何显示x轴刻度分隔线。

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

代码展示：

在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、具体效果