blue is the standard, the red is current mine compared with these two diagrams, I do not no how to design the x-axis in the blue diagram, which is a range to describe the data.
Now, I using an array to store all value displayed, and on the y-axis, another array stores the times of each number displays. But I do not know make the X-axis to be a range.
<script>
var sheetName = null;
var sheets = null;
var ageArray = new Array();
var ageTimes = new Array();
function readExcel(file_obj){
var reader = new FileReader();
var file = file_obj.files[0];
reader.readAsBinaryString(file);
reader.onload = function (e) {
var data = e.target.result;
var wb = XLSX.read(data, {type: 'binary'});
sheetName = wb.SheetNames[0] // 获取文档中第一个sheet页签的名字
sheets = wb.Sheets[sheetName] // 获sheet名页签下的数据
var json = XLSX.utils.sheet_to_json(sheets)
// console.log(sheets); // 返回sheet对象到控制台
// console.log(json.length);
// console.log(json);
for (let i = 0; i < json.length; i++) {
ageArray.push(json[i]['Age ']);
}
// console.log(ageArray);
function unique (arr) {
return Array.from(new Set(arr))
}
ageArray = unique(ageArray);
ageArray.sort(function (a,b){
if (a>b) {
return 1
} else if (a<b){
return -1
} else return 0
});
// console.log(ageArray);
// count times
let LevelList = json.map(item => {
return item['Age '];
})
let contlist = LevelList.reduce(function(prev,next){
prev[next] = (prev[next]+1) || 1;
return prev
},{});
console.log(contlist);
for (let j = 0; j < ageArray.length; j++) {
var index = ageArray[j];
// console.log(contlist[index]);//
ageTimes.push(contlist[index]);
// console.log(ageTimes);
}
var myChart = echarts.init(document.querySelector('.box'));
var option = {
title: {
text: 'ECharts'
},
tooltip: {},
legend: {
data: ['sale']
},
xAxis: {
data: ageArray,
},
yAxis: {
},
series: [
{
name: 'sale',
type: 'bar',
data: ageTimes
}
]
};
myChart.setOption(option);
};
}
</script><style>
.box {
width: 1000px;
height: 400px;
background-color: pink;
}
</style><body>
<input type="file" onchange="readExcel(this)" />
<div class="box"></div>
</body>
