```javascript
在这里插入代码片
drawTime() {
const data = [
{
value: ["2021-9-16 12:00", 8]
},
{
value: ["2021-9-16 12:50", 6]
},
{
value: ["2021-9-16 13:20", 6]
},
{
value: ["2021-9-16 13:50", 4.5]
},
{
value: ["2021-9-16 14:10", 3.5]
},
{
value: ["2021-9-16 14:30", 3.5]
},
{
value: ["2021-9-16 14:50", 4.5]
},
{
value: ["2021-9-16 15:20", 4.5]
},
{
value: ["2021-9-16 15:30", 8]
},
{
value: ["2021-9-16 15:40", 8]
},
{
value: ["2021-9-16 16:10", 8]
},
{
value: ["2021-9-16 16:30", 1.8]
},
{
value: ["2021-9-16 16:55", 1.8]
},
{
value: ["2021-9-16 17:15", 3.8]
},
{
value: ["2021-9-16 17:40", 3.8]
},
{
value: ["2021-9-16 18:10", 6.2]
},
{
value: ["2021-9-16 18:45", 6.2]
},
{
value: ["2021-9-16 19:15", 7.2]
},
{
value: ["2021-9-16 19:30", 7.2]
},
{
value: ["2021-9-16 20:45", 5.8]
},
{
value: ["2021-9-16 21:00", 11]
},
{
value: ["2021-9-16 22:00", 4]
},
{
value: ["2021-9-16 24:00", 4]
},
{
value: ["2021-9-17 15:00", 2]
},
{
value: ["2021-9-17 23:00", 2]
},
{
value: ["2021-9-18 01:00", 2]
}
];
let myChart = this.$echarts.init(document.getElementById("time"));
let option = {
title: {
x: "center",
show: true,
text: " ",
textStyle: {
width: 300,
height: 300
}
},
xAxis: [
{
type: "time",
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
formatter: function(v) {
const dateObj = new Date(v);
const hours =
dateObj.getHours() > 10
? dateObj.getHours()
: dateObj.getHours() == 0
? "24"
: "0" + dateObj.getHours();
const dateObjTime = dateObj.getTime();
const minutes =
dateObj.getMinutes() < 10
? dateObj.getMinutes() + "0"
: dateObj.getMinutes();
let UnixTimeToDate = hours + ":" + minutes;
dateObj.getHours() > 10;
let min = new Date("2021-9-16 12:00").getTime();
let max = new Date("2021-9-17 12:00").getTime();
const month = dateObj.getMonth() + 1;
switch (dateObjTime) {
case min:
UnixTimeToDate =
UnixTimeToDate +
"\n" +
dateObj.getFullYear() +
"/" +
month +
"/" +
dateObj.getDate();
return UnixTimeToDate;
case max:
UnixTimeToDate =
UnixTimeToDate +
"\n" +
dateObj.getFullYear() +
"/" +
month +
"/" +
dateObj.getDate();
return UnixTimeToDate;
default:
return UnixTimeToDate;
}
}
},
visualMap: {
type: "piecewise",
show: false,
dimension: 0,
splitNumber: 16,
},
smooth: 0.6,
symbol: "none",
lineStyle: {
color: "#5470C6",
width: 8
},
markLine: {
symbol: ["none", "none"],
label: { show: false },
},
splitLine: {
show: false
},
maxInterval: 3600 * 6 * 1000,
min: new Date("2021-9-16 12:00"),
max: new Date("2021-9-18 01:00")
}
],
yAxis: [
{
type: "value",
min: 0,
max: 10,
interval: 2
}
],
series: [
{
type: "line",
data: data
}
]
};
if (option ) {
myChart.setOption(option);
}
},
``
echarts根据时间画出折线图
最新推荐文章于 2024-06-06 11:39:14 发布