chart3() {
let chart = document.getElementById('chart3');
let myChar = echarts.init(chart);
//X轴
let dataX = ['2023-09-14', '2023-09-15', '2023-09-16', '2023-09-17', '2023-09-18', '2023-09-19', '2023-09-20']
//Y轴-不完全燃烧热损失(q2)
let dataY1 = [2.38, 2.28, 2.20, 2.91, 2.67, 2.10, 2.88];
//Y轴-排烟热损失(q3)
let dataY2 = [4.25, 4.12, 5.06, 5.20, 5.88, 5.93, 5.80];
//Y轴-散热损失(q5)
let dataY3 = [3.63, 3.67, 3.67, 3.62, 3.47, 4.10, 4.52];
let option;
option = {
color: ['#5087EC', '#FCCA00', '#EC3E3F'],
title: {
left: 'center',
text: '加热炉热损运行趋势'
},
legend: {
data: ['不完全燃烧热损失(q2)', '排烟热损失(q3)', '散热损失(q5)'],
top: "8%",
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
top: '20%',
bottom: 40,
//containLabel: true
},
xAxis: {
type: 'category',
data: dataX
},
yAxis: {
type: 'value',
name: '%'
},
series: [
{
name: '不完全燃烧热损失(q2)',
data: dataY1,
type: 'line',
label: {
show: true,
position: 'top'
},
},
{
name: '排烟热损失(q3)',
data: dataY2,
type: 'line',
label: {
show: true,
position: 'top'
},
},
{
name: '散热损失(q5)',
data: dataY3,
type: 'line',
label: {
show: true,
position: 'top'
},
},
]
};
myChar.clear();//清除图表
myChar.setOption(option);//set数据
myChar.resize();//重绘
window.addEventListener("resize", () => {
myChar.resize();
});
},
Echarts常用示例
最新推荐文章于 2024-07-26 13:56:51 发布