echarts X轴值的设置 formatter

在开发过程中,X轴的值并不想和Y轴的数据对应,所以看了一下官网的设置还是比较简单的。

原来的值是原数据中的数值,现在开发过程中要把X轴换成当前时间点(其实不难):

远来数据展示:

在option.xAxis.axisLabel中写上:

其中value 和index都是对应着X轴的值和值的下标索引

formatter: (value, index) => {
     let date = new Date();
     timeStamp = Date.parse(date)
     let texts = [];
     if (index === 0) {
         texts.unshift(date.getHours() > 8 ? ('08:00') : '20:00');
     } else if (index === 5){
         texts.push(date.getHours(), date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
     }else{
         texts.push('')
     };
     return texts.join(':')
},

如下图

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts提供了两种方式来生成x轴轴值: 1. 直接在数据中指定x轴轴值 在数据中指定x轴轴值是最简单的方法。例如,在一个包含年份和销售额的数据中,可以将年份作为x轴轴值,销售额作为y轴轴值。如下所示: ```javascript var data = [ {year: '2015', sales: 100}, {year: '2016', sales: 200}, {year: '2017', sales: 300}, {year: '2018', sales: 400}, ]; ``` 在ECharts中,可以通过设置xAxis.type为'category',来将x轴轴值设置为类目型数据。如下所示: ```javascript option = { xAxis: { type: 'category', data: ['2015', '2016', '2017', '2018'] }, yAxis: {}, series: [{ type: 'line', data: [100, 200, 300, 400] }] }; ``` 2. 使用ECharts轴值自动生成功能 ECharts提供了轴值自动生成的功能,可以根据数据自动生成x轴轴值。需要设置xAxis.type为'value',并且不设置xAxis.data。如下所示: ```javascript option = { xAxis: { type: 'value' }, yAxis: {}, series: [{ type: 'line', data: [[2015, 100], [2016, 200], [2017, 300], [2018, 400]] }] }; ``` 在这个例子中,ECharts会根据数据自动生成x轴轴值。如果要自定义x轴轴值,可以通过formatter函数来实现。如下所示: ```javascript option = { xAxis: { type: 'value', axisLabel: { formatter: function (value) { return value + '年'; } } }, yAxis: {}, series: [{ type: 'line', data: [[2015, 100], [2016, 200], [2017, 300], [2018, 400]] }] }; ``` 在这个例子中,formatter函数会将x轴轴值加上'年'字。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值