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

2021-01-07 11:14发布

站内问答 / Web前端
17401 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条回答
梵梵
2021-09-09 09:00

  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("-", "/"));

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

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

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

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

  17. //console.log(params);

  19. }

  20. },

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

  22. xAxis: {

  23. type: 'time',

  24. boundaryGap: false,

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

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

  27. axisLabel: {

  28. formatter: function (value, index) {

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

  30. var date = new Date(value);

  31. var texts;

  32. if (index === 0) {

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

  34. }

  35. else {

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

  37. }

  38. console.log(texts);

  39. //return texts;

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

  41. },

  42. margin: 4

  43. },

  44. axisTick: { show: false }

  45. },

  46. yAxis: {

  47. type: 'value',

  48. min: 'dataMin',

  49. max: 'dataMax'

  50. },

  51. series: [{

  52. name: '产量',

  53. type: 'line',

  54. lineStyle: {

  55. normal: {

  56. width: 1.6,

  57. color: 'red'

  58. }

  59. },

  60. animation: false,

  61. symbol: 'circle',

  62. symbolSize: 2,

  63. showAllSymbol: true,

  64. itemStyle: {

  65. normal: {

  66. label: {

  67. show: true,

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

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

  70. //return params.dataIndex;

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

  72. return params.value2;

  73. }

  74. else {

  75. return "";

  76. }

  78. },

  79. textStyle: { color: 'gray' }

  80. }

  81. }

  82. },

  83. 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]]

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

  85. },

  86. {

  87. name: '配产',

  88. type: 'line',

  89. lineStyle: {

  90. normal: {

  91. width: 1.6,

  92. color: 'blue'

  93. }

  94. },

  95. animation: false,

  96. symbol: 'none',

  97. symbolSize: 1,

  98. showAllSymbol: false,

  99. /*

  100.    label: {

  101.        normal: {

  102.            formatter: function (params) {

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

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

  105.                return '666';

  106.            }

  107.        }

  108.    },*/

  109. 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]]

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

  111. }]



一周热门 更多>