出去打工和儿子租房

  • echarts 圖表類型設置為time 時 ，設置x軸間隔的問題

    2021-01-07 11:14發布

    站內問答 / Web前端
    12923 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 下一頁

    相關問題推薦

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

      抓包（packet capture）就是將網絡傳輸發送與接收的數據包進行截獲、重發、編輯、轉存等操作，也用來檢查網絡安全。抓包也經常被用來進行數據截取等。抓包可以通過抓包工具來查看網絡數據包內容。通過對抓獲的數據包進行分析，可以得到有用的信息。目前流行的...

    • 現在的web開發的要求高嗎？2020-11-01 21:57
      回答 120

      相對前幾年來說，要高上不少了，畢竟入行的人也是越來越多了，基礎的工作對應想要參與的人群基數越來越大，但是對于高端人才的需求還是很多，人才還是相對稀缺性的。所以，想要學web或者其他技術也一樣，別等，別觀望。web前端就業方向特別多包括web前端開發...

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

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

    • 相對定位和絕對定位的區別是什么呢2021-04-09 11:10
      回答 25

      相對定位：該元素相對于自己原有位置，偏移一定距離。相對的是自己。絕對定位：該元素相對于其父元素，偏移一定距離。相對的是父元素，重點是這個父元素也需要是設置了position屬性。從最近的父元素開始找，直到找到body位置為止。...

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

      SSR就是一臺服務器，可以利用 SSR 在遠程的服務器上配置 SSR，使其能夠成為 SSR 節點，這樣本地電腦或者其它設備利用 SSR 節點實現 VPN 或者遠程上網及游戲加速等方面。ShadowsocksR（簡稱 SSR）是 Shadowsocks 分支，在 Shadowsocks 的基礎上增加了一些數據...

    • 前端自學的效果怎么樣2020-11-19 13:46
      回答 65
      已采納

      前端是目的就業前景非常不錯的一個計算機技術，但是自學的話還是有一定難度的，網絡上自學是碎片化的，同時互聯網技術跟新換代快，自己的話比較吃力也學習不到最新的技術。

    • 現在計算機培訓都有什么課程？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 看看這個?

    沒有解決我的問題，去提問
    出去打工和儿子租房