记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>
只是记下经过，怕自己再次遗忘
