基于文本数据 echarts 制作折线图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="file" name="file" id="fileId" />
<input type="button" name="btn" value="展示" id="btnId" οnclick="check()" />
<div id="container" style="height: 500px"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
<script>
document.getElementById("btnId").addEventListener("click", check);
function check() {
console.log("in1-");
var objFile = document.getElementById("fileId");
if (objFile.value == "") {
alert("不能空")
}
//console.log(objFile.files[0].size); // 文件字节数
var files = $('#fileId').prop('files');//获取到文件列表
if (files.length == 0) {
alert('请选择文件');
} else {
console.log("in2-");
var reader = new FileReader();//新建一个FileReader
reader.readAsText(files[0], "UTF-8");//读取文件
reader.onload = function (evt) { //读取完文件之后会回来这里
var fileString = evt.target.result; // 读取文件内容
var array = fileString.split("\n"); // 20行
var xRet = []; // 多少个时间段
var yRet = []; // 21条线
var selectInfo = {};
// var last = null;
array.forEach(function (line, index) {
str = line.split(' '); //
if (xRet.length == 0) {
for (let i = 0; i < str.length; ++i) {
xRet.push(i);
}
}
if (Object.keys(selectInfo).length == 0 ){
selectInfo[index+1] =true;
}else{
selectInfo[index+1] =false;
}
yRet.push({
name: index+1, // index就是20个slot
type: 'bar', // bar 柱状图 line 折线图
// stack: 'Total', // 后一个在前一个堆叠
data: str,
});
});
console.log(xRet.length)
console.log(yRet.length)
console.log(yRet[0].data.length)
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
title: {
text: '最后一个是平均值'
},
tooltip: {
show: true,
trigger: 'axis'
},
dataZoom: { // 放大和缩放
type: 'inside'
},
xAxis: {
name: "时间段",
type: 'category',
axisLabel: {
// showMinLabel: true,
// show: true,
},
data: xRet
},
legend: { // 显示图例组件
bottom: '0',
z: 100,
selected:selectInfo // 默认启动只显示一条线
},
yAxis: {
name: "间隔",
type: 'value'
},
series: yRet
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
}
}
}
</script>
</body>
</html>
选择data文件 加载. 展示。