记Echarts使用–X轴固定时间
在使用echarts的时候，会有种每次初恋的感觉，不知道是记忆力减退，还是自己确实没接触过，但是明明感觉遇到过这种场景，却记忆不起。
因此，个人还是觉得好记性不如烂笔头
需求：
后台接口会给我们返回一整天的间隔5分钟的帧数据，然后我们需要将一整天分为7个段，x轴需要固定展示0:00 4:00 8:00 … 24:00；
最开始的想法是，将一天以5分钟划分，获取当天的数组，大约288个数据，再将后台返回的数据填充变成一个二维数组，但是结果出来，发现和想要的相差太远。
后来想到的一种方式是：自己造出来一个series的假数据，每项都是空值，但是每项的时间戳是固定的整小时的，然后再通过Xaxis中的splitNumber:将数据划为7个等分，这样的思路是因为，当天的数据可能不是完整的，因此x轴的数值撑不开。
不说了，上代码，以后有类似的直接拿过来整
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> --> <script> let data = [ [1673825982000, "1"], [1673826282000, "1"], [1673826582000, "1"], [1673826882000, "1"], [1673827182000, "2"], [1673827482000, "2"], [1673827783000, "2"], [1673828081000, "3"], [1673828382000, "3"], [1673828682000, "3"], [1673828982000, "4"], [1673829281000, "4"], [1673829582000, "4"], [1673829882000, "4"], [1673830182000, "5"], [1673830482000, "5"], [1673830782000, "6"], [1673831082000, "6"], [1673831382000, "6"], [1673831968000, "8"], [1673832268000, "18"], [1673832567000, "25"], [1673832868000, "26"], [1673833168000, "28"], [1673833467000, "30"], [1673833767000, "31"], [1673834068000, "32"], [1673834367000, "35"], [1673834668000, "38"], [1673834968000, "41"], [1673835268000, "44"], [1673835568000, "47"], [1673835868000, "53"], [1673836168000, "56"], [1673836468000, "62"], [1673836768000, "66"], [1673837068000, "72"], [1673837368000, "77"], [1673837668000, "85"], [1673837968000, "99"], [1673838268000, "106"], [1673838568000, "123"], [1673838868000, "154"], [1673839168000, "170"], [1673839468000, "205"], [1673839768000, "238"], [1673840069000, "249"], [1673840368000, "258"], [1673840669000, "274"], [1673840969000, "302"], [1673841269000, "340"], [1673841569000, "395"], [1673841869000, "445"], [1673842169000, "445"], [1673842770000, "445"], [1673843070000, "446"], [1673843371000, "444"], [1673843670000, "441"], [1673843971000, "434"], [1673844271000, "432"], [1673844571000, "416"], [1673844871000, "422"], [1673845171000, "431"], [1673845471000, "430"], [1673845771000, "428"], [1673846071000, "429"], [1673846371000, "421"], [1673846672000, "411"], [1673846972000, "407"], [1673847272000, "408"], [1673847572000, "403"], [1673847872000, "397"], [1673848173000, "386"], [1673848472000, "380"], [1673848772000, "375"], [1673849073000, "370"], [1673849373000, "368"], [1673849673000, "359"] ] //造的假数据成为series中的其中一项 //这里是以每个小时为一个单位的 var mytime24 = new Array() var i = 0; var now_data = new Date() var year_now = now_data.getFullYear(), month_now = now_data.getMonth() + 1, day_now = now_data.getDate() var time_pre = `${year_now}/${month_now}/${day_now} 00:00:00` var ttt = (new Date(time_pre)).getTime() for (; i < 25; i++) { mytime24.push([ttt, '']); //传入value的值为空则该值点不会显示在图表中 ttt = ttt + 3600000; } var myChart = echarts.init(document.getElementById('main')); let str = []; // str.push() let option = { tooltip: { trigger: 'axis' }, xAxis: { type: 'time', splitNumber: 7, //设置下这里将x分为7段 8个刻度值 splitLine: { show: false //隐藏x轴那条线 }, axisTick: { show: false //隐藏x轴的刻度 }, axisLine: { show: false }, axisLabel: { // 格式化数据只显示时间的小时 showMaxLabel: true, //展示x轴的最后一个，一般我看是不展示的 formatter: function(value, index) { //在这里写你需要的时间格式 var t_date = new Date(value); console.log(index); if (index != 7) { return [t_date.getHours(), '00'].join(':') } else { return '24:00' } } }, data: [] }, grid: { left: 44, right: 30, top: 40, }, yAxis: { type: 'value', name: '发电功率（W）', nameLocation: 'end' }, series: [{ name: '', type: 'line', data: mytime24, //空数据 自己写的假数据 }, { name: '', type: 'line', symbol: 'none', lineStyle: { color: '#FF8100' }, areaStyle: { //关于折线图向下区域的设置，可以根据自己的需求来 normal: { color: { type: 'linear', x: 0, y: 0, x2: 0, y2: 1, colorStops: [{ offset: 0, color: 'rgba(248,129,8,0.24)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(255,129,0,0)' // 100% 处的颜色 } ], global: false // 缺省为 false }, } }, data }] } myChart.setOption(option) </script> </body> </html>
只是记下经过，怕自己再次遗忘
