<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var xAxisData = [];
var lineData = [];
for (let i = 0; i < 1000; i++) {
xAxisData[i] = String(i);
lineData[i] = 60
}
/** 设值data数据 */
function setValue(start, end, val) {
for (let i = start; i < end; i++) {
lineData[i] = val
}
}
setValue(200, 210, 59);
setValue(210, 260, 58);
setValue(400, 420, 40);
setValue(420, 430, 59);
lineData[560] = 0;
lineData[580] = 50;
setValue(590, 999, 49);
var option = {
tooltip: {
trigger: 'axis'
},
backgroundColor: 'rgb(255,255,255)',
grid: {
left: '8%',
top: 30,
right: '5%',
bottom: 30,
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLabel: {
interval: 99
},
data: xAxisData,
},
yAxis: {
type: 'value',
name: '发电期望/W',
nameLocation: 'center',
nameGap: 50,
nameTextStyle: {
color: '#000',
fontSize: 12
}
},
series: [
{
symbol: 'none',
data: lineData,
type: 'line',
smooth: true,
markLine: {
silent: true,
symbol: 'arrow',
data: [
{
silent: false,
xAxis: 600, // 表现自定义的位置，可赋值
label: {
position: 'end', // 表现内容展示的位置
formatter: '当前值', // 标线展示的内容
color: '#8C8C8C' // 展示内容颜色
},
// lineStyle: { type: 'solid', color: '#C1E7FF', width: 3 } // 样式： 线型、颜色、线宽
},
[
{
name: '历史值',
label: {
position: 'middle', // 表现内容展示的位置
// formatter: '当前值', // 标线展示的内容
color: '#8C8C8C' // 展示内容颜色
},
symbol: 'arrow',
coord: [0, 30]
},
{
symbol: 'arrow',
coord: [600, 30]
}
],
[
{
name: '预测值',
label: {
position: 'middle', // 表现内容展示的位置
// formatter: '当前值', // 标线展示的内容
color: '#8C8C8C' // 展示内容颜色
},
symbol: 'arrow',
coord: [600, 30]
},
{
symbol: 'arrow',
coord: [999, 30],
}
],
]
}
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>