嗯，其实还是很菜的，这是一个笔试题，还没过，可能做的东西不合格，用的是js+echarts
基本思路，就是两个input框，获取它的值，然后生成数组，替换一下echarts里的数据源，通过按钮的点击事件生成图表
效果图
基本就这样，就是对数组的添加和排序，感觉应该是做的不够细，像每个柱的大小，如果生成数量是两个的话展示效果不太好，其次就是代码写的有点问题。
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./echarts.js"></script>
</head>
<body>
<div>
<span>最小值:</span>
<input type="text" placeholder="请输入" id="min" οninput="if(value<0)value=0;if(value>100)value=100">
<span>最大值:</span>
<input type="text" placeholder="请输入" id="max"
οninput="if(value<0)value=0;if(value>100)value=100"
>
<span>数量:</span>
<input type="text" placeholder="请输入" id="num"
οninput="if(value<0)value=0;if(value>10)value=10">
<span>排序:</span>
<select id="select">
<option value ="1">从小到大</option>
<option value ="2">从大到小</option>
</select>
<button οnclick="submit()">生成</button>
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</div>
<script>
let min= document.getElementById('min')
let max= document.getElementById('max')
let num= document.getElementById('num')
let order= document.getElementById('select')
let xData=[]
let yData=[]
function submit(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
a=parseInt(min.value)
b=parseInt(max.value)
c=parseInt(num.value)
d=parseFloat((b-a)/(c-1))
index=order.selectedIndex
value=order.options[index].value
min.value=''
max.value=''
num.value=''
order.value=''
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(value);
// console.log(index);
//x轴
for(var i=0;i<c;i++){
for(var j=1;j<=i+1;j++){
xData[i]=j
}
}
//y轴
if(value=='1'){
yData[0]=a
for(var k=1;k<c;k++){
yData[k]=yData[k-1]+d
}
}else{
yData[0]=b
for(var k=1;k<c;k++){
yData[k]=yData[k-1]-d
}
}
console.log(yData);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
// 指定图表的配置项和数据
var option = {
title: {
text: ''
},
tooltip: {},
legend: {
},
xAxis: {
data: xData
},
yAxis: {
},
series: [
{
type: 'bar',
data: yData,
itemStyle: {
normal: {
label: {
show: true, //开启显示
position: 'top', //在上方显示
textStyle: { //数值样式
color: 'black',
fontSize: 16
}
}
}
},
}
]
};
</script>
</body>
</html>
总体来说，是本人遇到的第一个机试编程类型，通过这次确实还是知识的欠缺。再接再厉！与君共勉！
2836
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
