echarts 图表类型设置为time 时 ，设置x轴间隔的问题

2021-01-07 11:14发布

站内问答 / Web前端
17187 11 14

series的data为：[[2020-11-21,1],[2020-11-22,2],[2020-11-23,3],[2020-11-24,4],[2020-11-25,5]]想设置两天显示一个数，...

series的data为：
[["2020-11-21",1],["2020-11-22",2],["2020-11-23",3],["2020-11-24",4],["2020-11-25",5]]

想设置两天显示一个数，应该怎么设置
interval: 3600, // 设置x轴时间间隔，这里的单位是什么

发送
11条回答
思禹小姐姐y
2楼 · 2021-01-07 15:49

1、代码判断

xAxis: {

type: 'time',

splitLine: {

show: false

},

interval: 3600, // 设置x轴时间间隔

axisLabel: {

formatter: function(value, index) {

return liangTools.unix2hm(value)

}

}

},

首先要把xAxis 显示类型设置成time，然后设置对应X轴时间间隔，也就interval对应的参数，这个大家需要注意下，如果后台返回的时间戳是毫秒级的那么axisLabel下formatter定义中返回日期也是根据对应来进行转换，如果是基于秒的那么formatter也要基于秒来去转换日期格式，否则会不匹配

然后为了以后偷懒可以，把日期转换方法及毫秒转换秒的方法都贴上unix2hm: function(v) {

if (/^(-)?\d{1,10}$/.test(v)) {

v = v * 1000

} else if (/^(-)?\d{1,13}$/.test(v)) {

v = v * 1000

} else if (/^(-)?\d{1,14}$/.test(v)) {

v = v * 100

} else if (/^(-)?\d{1,15}$/.test(v)) {

v = v * 10

} else if (/^(-)?\d{1,16}$/.test(v)) {

v = v * 1

} else {

alert('时间戳格式不正确')

return

}

const dateObj = new Date(v)

const hours = dateObj.getHours() > 10 ? dateObj.getHours() : '0' + dateObj.getHours()

const minutes = dateObj.getMinutes() < 10>

const UnixTimeToDate = hours + ':' + minutes

return UnixTimeToDate

},

millToSecond: function(time) {

return Math.round(time / 1000)

}

最后看先完成后的显示效果


椰子椰子
3楼 · 2021-01-08 17:04

还是得多去扎实一下基础知识，就不会有这种问题啦

20200921文 - 做更棒的自己!
4楼 · 2021-04-16 16:18

markline下面的属性 data : [ [ {name: '标线1起点', value: 100, x: 50, y: 20}, {name: '标线1终点', x: 150, y: 120} ], [ {name: '标线2起点', value: 200, x: 30, y: 80}, {name: '标线2终点', x: 270, y: 190} ],

可口可乐
5楼 · 2021-04-18 21:41

markline下面的属性 data : [ [ {name: '标线1起点', value: 100, x: 50, y: 20}, {name: '标线1终点', x: 150, y: 120} ], [ {name: '标线2起点', value: 200, x: 30, y: 80}, {name: '标线2终点', x: 270, y: 190} ],

嘿呦嘿呦拔萝卜
6楼 · 2021-04-19 16:06

1、代码判断

xAxis: {

type: 'time',

splitLine: {

show: false

},

interval: 3600, // 设置x轴时间间隔

axisLabel: {

formatter: function(value, index) {

return liangTools.unix2hm(value)

}

}

},

首先要把xAxis 显示类型设置成time，然后设置对应X轴时间间隔，也就interval对应的参数，这个大家需要注意下，如果后台返回的时间戳是毫秒级的那么axisLabel下formatter定义中返回日期也是根据对应来进行转换，如果是基于秒的那么formatter也要基于秒来去转换日期格式，否则会不匹配

然后为了以后偷懒可以，把日期转换方法及毫秒转换秒的方法都贴上unix2hm: function(v) {

if (/^(-)?\d{1,10}$/.test(v)) {

v = v * 1000

} else if (/^(-)?\d{1,13}$/.test(v)) {

v = v * 1000


ablabla
7楼 · 2021-04-22 09:24

markline下面的属性 data : [ [ {name: '标线1起点', value: 100, x: 50, y: 20}, {name: '标线1终点', x: 150, y: 120} ], [ {name: '标线2起点', value: 200, x: 30, y: 80}, {name: '标线2终点', x: 270, y: 190} ],

果果宝贝
8楼 · 2021-09-02 13:53

1、首先需要引入echarts的包。

2、然后创建折线图存放的div，这里需要设置id值和大小。

3、再然后设置js方法初始化图表。

4、初始化图表后就开始设置option的内容。

5、设置完内容开始设置图表的值。

6、这样图表就设置完成了但是界面没有地方去触犯这个图表，所以需要写个页面打开时初始加载的方法。


freediandianer
9楼 · 2021-09-02 13:57

  2. 我发现是最新的5.0版本和原版本兼容性问题，但需要用最新版本，不知怎么设 配置项如下


  3. option = {

  4. tooltip: {

  5. trigger: 'axis',

  6. formatter: function (params, ticket, callback) {

  7. var dataValue = params[0].value + "";

  8. var dataArray = dataValue.split(',');

  9. var date = new Date(dataArray[0].replace("-", "/"));

  10. var dataValue_peichan = params[1].value + "";

  11. var dataArray_peichan = dataValue_peichan.split(',');

  12. return (date.getMonth() + 1) + '/' + date.getDate() + '：' + dataArray[1] + '
    配产：'     + dataArray_peichan[1] + '(' + (dataArray[1] - dataArray_peichan[1]) + ')';

  13. //return dataArray[0] + '：' + dataArray[1];

  14. //console.log(params);

  15. }

  16. },

  17. grid: { top: 15, bottom: 20, left: 40, right: 20 },

  18. xAxis: {

  19. type: 'time',

  20. boundaryGap: false,

  21. interval: 15 * 24 * 3600 * 1000,

  22. //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']

  23. axisLabel: {

  24. formatter: function (value, index) {

  25. // 格式化成月/日，只在第一个刻度加空格，防止挡住纵坐标刻度值

  26. var date = new Date(value);

  27. var texts;

  28. if (index === 0) {

  29. texts = [' ' + (date.getMonth() + 1), date.getDate()];

  30. }

  31. else {

  32. texts = [(date.getMonth() + 1), date.getDate()];

  33. }

  34. console.log(texts);

  35. //return texts;

  36. return texts.join('/');

  37. },

  38. margin: 4

  39. },

  40. axisTick: { show: false }

  41. },

  42. yAxis: {

  43. type: 'value',

  44. min: 'dataMin',

  45. max: 'dataMax'

  46. },

  47. series: [{

  48. name: '产量',

  49. type: 'line',

  50. lineStyle: {

  51. normal: {

  52. width: 1.6,

  53. color: 'red'

  54. }

  55. },

  56. animation: false,

  57. symbol: 'circle',

  58. symbolSize: 2,

  59. showAllSymbol: true,

  60. itemStyle: {

  61. normal: {

  62. label: {

  63. show: true,

  64. formatter: function (params, ticket, callback) {

  65. //格式化展现（标签+值）

  66. //return params.dataIndex;

  67. if (params.dataIndex == 45) {

  68. return params.value2;

  69. }

  70. else {

  71. return "";

  72. }

  73. },

  74. textStyle: { color: 'gray' }

  75. }

  76. }

  77. },

  78. data: [["2020-11-22", 5364], ["2020-11-23", 5387], ["2020-11-24", 5397], ["2020-11-25", 5356], ["2020-11-26", 5383], ["2020-11-27", 5410], ["2020-11-28", 5406], ["2020-11-29", 5399], ["2020-11-30", 5384], ["2020-12-01", 5374], ["2020-12-02", 5385], ["2020-12-03", 5407], ["2020-12-04", 5410], ["2020-12-05", 5405], ["2020-12-06", 5412], ["2020-12-07", 5400], ["2020-12-08", 5383], ["2020-12-09", 5400], ["2020-12-10", 5414], ["2020-12-11", 5412], ["2020-12-12", 5406], ["2020-12-13", 5396], ["2020-12-14", 5361], ["2020-12-15", 5367], ["2020-12-16", 5353], ["2020-12-17", 5339], ["2020-12-18", 5351], ["2020-12-19", 5357], ["2020-12-20", 5368], ["2020-12-21", 5367], ["2020-12-22", 5373], ["2020-12-23", 5379], ["2020-12-24", 5373], ["2020-12-25", 5361], ["2020-12-26", 5345], ["2020-12-27", 5345], ["2020-12-28", 5329], ["2020-12-29", 5319], ["2020-12-30", 5302], ["2020-12-31", 5290], ["2021-01-01", 5301], ["2021-01-02", 5316], ["2021-01-03", 5320], ["2021-01-04", 5327], ["2021-01-05", 5327], ["2021-01-06", 5337]]

  79. //data: [3, 5, 36, 10, 20, 15, 7, 20, 15, 7]

  80. },

  81. {

  82. name: '配产',

  83. type: 'line',

  84. lineStyle: {

  85. normal: {

  86. width: 1.6,

  87. color: 'blue'

  88. }

  89. },

  90. animation: false,

  91. symbol: 'none',

  92. symbolSize: 1,

  93. showAllSymbol: false,

  94. /*

  95.    label: {

  96.        normal: {

  97.            formatter: function (params) {

  98.                //var date = new Date(params.name);

  99.                //return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];

  100.                return '666';

  101.            }

  102.        }

  103.    },*/

  104. data: [["2020-11-22", 5500], ["2020-11-23", 5500], ["2020-11-24", 5500], ["2020-11-25", 5500], ["2020-11-26", 5500], ["2020-11-27", 5500], ["2020-11-28", 5500], ["2020-11-29", 5500], ["2020-11-30", 5500], ["2020-12-01", 5455], ["2020-12-02", 5455], ["2020-12-03", 5455], ["2020-12-04", 5455], ["2020-12-05", 5455], ["2020-12-06", 5455], ["2020-12-07", 5455], ["2020-12-08", 5455], ["2020-12-09", 5455], ["2020-12-10", 5455], ["2020-12-11", 5455], ["2020-12-12", 5455], ["2020-12-13", 5455], ["2020-12-14", 5455], ["2020-12-15", 5455], ["2020-12-16", 5455], ["2020-12-17", 5455], ["2020-12-18", 5455], ["2020-12-19", 5455], ["2020-12-20", 5455], ["2020-12-21", 5455], ["2020-12-22", 5455], ["2020-12-23", 5455], ["2020-12-24", 5455], ["2020-12-25", 5455], ["2020-12-26", 5455], ["2020-12-27", 5455], ["2020-12-28", 5455], ["2020-12-29", 5455], ["2020-12-30", 5455], ["2020-12-31", 5455], ["2021-01-01", 5452], ["2021-01-02", 5452], ["2021-01-03", 5452], ["2021-01-04", 5452], ["2021-01-05", 5452], ["2021-01-06", 5452]]

  105. //data: [3, 5, 36, 10, 20, 15, 7, 20, 15, 7]



1 2 下一页

相关问题推荐

  • 现在的web开发的要求高吗？2020-11-01 21:57
    回答 120

    相对前几年来说，要高上不少了，毕竟入行的人也是越来越多了，基础的工作对应想要参与的人群基数越来越大，但是对于高端人才的需求还是很多，人才还是相对稀缺性的。所以，想要学web或者其他技术也一样，别等，别观望。web前端就业方向特别多包括web前端开发...

  • 相对定位和绝对定位的区别是什么呢2021-04-09 11:10
    回答 25

    相对定位和绝对定位是定位的两种表现形式，区别如下：一、主体不同1、相对定位：是设置为相对定位的元素框会偏移某个距离。2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。二、特点不同1、相对定位：在使用相对定位时，无论是否进行移...

  • 抓包是什么意思？2020-04-01 17:36
    回答 7
    已采纳

    抓包（packet capture）就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全。抓包也经常被用来进行数据截取等。抓包可以通过抓包工具来查看网络数据包内容。通过对抓获的数据包进行分析，可以得到有用的信息。目前流行的...

  • 前端常用的框架有哪些？2020-11-27 10:54
    回答 89

    常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等

  • 前端自学的效果怎么样2020-11-19 13:46
    回答 65
    已采纳

    前端是目的就业前景非常不错的一个计算机技术，但是自学的话还是有一定难度的，网络上自学是碎片化的，同时互联网技术跟新换代快，自己的话比较吃力也学习不到最新的技术。

  • SSR 是什么意思？2020-03-20 18:56
    回答 6

    SSR就是一台服务器，可以利用 SSR 在远程的服务器上配置 SSR，使其能够成为 SSR 节点，这样本地电脑或者其它设备利用 SSR 节点实现 VPN 或者远程上网及游戏加速等方面。ShadowsocksR（简称 SSR）是 Shadowsocks 分支，在 Shadowsocks 的基础上增加了一些数据...

  • 现在计算机培训都有什么课程？2020-10-31 14:36
    回答 52
    已采纳

    计算机培训方向比较多，建议找适合自己的方向选择培训编程类：JAVA、WEB、Python、C/C++、C#等测试类：软件测试运维类：云计算、网络安全设计类：UI设计、3D建模等

  • 移动跨平台开发框架有哪些HTML5移动框架 2022-04-01 18:57
    回答 8

    HTML5 + CSS + JavaScript 开发 跨平台重用代码 

  • miniMobile移动端框架有什么特点HTML5移动框架 2022-04-01 18:57
    回答 4

    采用rem单位自动响应,并提供独有栅格化系统快速定义宽高、边距节省css代码量,同时总结各大型移动端网页,提供一套ui颜色搭配规范,尺寸规范,字体规范等。

  • 求推荐界面比较漂亮的移动开发框架HTML5移动框架 2022-03-15 16:12
    回答 10

    iView UI、ioni、SUI

  • 移动端开发用什么JS框架好HTML5移动框架 2022-03-11 18:19
    回答 6

     jQTouch 

  • 现在移动端开发都用的什么框架HTML5移动框架 2022-03-11 18:19
    回答 4

    如果只是普通的移动端用vue react 或者dva 如果是要编译成小程序什么的或者混生 就用uni-app（对应vue语法）taro（对应react） 或者纯原生 这个没有限制的，自己怎么舒服怎么来

  • 为什么说atom和sublime都是前端开发者用的HTML编辑器 2022-01-06 15:12
    回答 4

    因为可以运用在网页和小程序的开饭中，而且开源，用着便宜，企业都很喜欢

  • 前端开发用的文本编辑器有哪些？HTML编辑器 2022-01-06 15:10
    回答 10

    一、Visual Studio Code下载地址：https://code.visualstudio.com/微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目：一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器。Visual Stud...

  • 如何循环淡入淡出图片css样式 2021-12-08 11:25
    回答 9

    jQuery自带淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看这个 

没有解决我的问题，去提问