<div class="test"></div>
ngOnInit() {
let mytestcharts = echarts.init(document.querySelector('.test') as any);
let data1 = [
{name:'2022/12/18 6:38:08', value:['2022/12/18 6:38:08', 80]},
{name:'2022/12/18 16:18:18', value:['2022/12/18 16:18:18', 60]},
{name:'2022/12/18 19:18:18', value:['2022/12/18 19:18:18', 90]},
{name:'2022/12/19 4:38:08', value:['2022/12/19 4:38:08', 70]},
{name:'2022/12/19 14:18:18', value:['2022/12/19 14:18:18', 50]},
// {name:'2022/12/19 17:18:18', value:['2022/12/19 17:18:18', 80]}
];
let data2 = [
{name:'2022/12/18 7:38:08', value:['2022/12/18 7:38:08', 90]},
{name:'2022/12/18 18:18:18', value:['2022/12/18 18:18:18', 70]},
{name:'2022/12/18 20:18:18', value:['2022/12/18 20:18:18', 100]},
{name:'2022/12/19 5:38:08', value:['2022/12/19 5:38:08', 60]},
{name:'2022/12/19 15:18:18', value:['2022/12/19 15:18:18', 40]},
{name:'2022/12/19 18:18:18', value:['2022/12/19 18:18:18', 70]}
];
let anchor = [
{name:'2022/12/18 00:00:00', value:['2022/12/18 00:00:00', 0]},
{name:'2022/12/19 00:00:00', value:['2022/12/19 00:00:00', 0]},
];
let option = {
title: {
text: '动态数据 + 时间坐标轴'
},
legend: {
data: ['机台1', '机台2']
},
tooltip: {
trigger: 'axis',
formatter: function (params:any) {
params = params[0];
let date = new Date(params.name);
return params.value[0] + ' : ' + params.value[1];
// return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
},
axisPointer: {
animation: false
}
},
xAxis: {
type: 'time',
splitLine: {
show: false
},
axisLabel: {
formatter: function (value:any, index:any) {
//格式化成月/日,只在第一个刻度显示年份
let date = new Date(value);
let texts:any = [];
if (date.getHours() === 0) {
texts= [date.getFullYear(),(date.getMonth() + 1), date.getDate()];
return texts.join('-');
} else {
texts= [date.getHours(),date.getMinutes()];
return texts.join(':');
}
}
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [
{
name: '机台1',
type: 'line',
showSymbol: true,
hoverAnimation: false,
data: data1
},
{
name: '机台2',
type: 'line',
showSymbol: false,
hoverAnimation: false,
data: data2
},
{
name:'anchor',
type:'line',
showSymbol:false,
data:anchor,
itemStyle:{normal:{opacity:0}},
lineStyle:{normal:{opacity:0}},
}
]
};
console.log(option);
// mytestcharts.setOption(option);
}
运行效果: