console
new Vue({
el: "#app",
data() {
return {
xNum: 5,
newXNum: 5,
list: ['', '', '', '', ''],
yMax: 200,
yMin: 0,
systemNum: 1,
finalResult: '暂无数据',
}
},
mounted() {
},
methods: {
confirmX() {
var list = [];
for (let i = 0; i < Number(this.xNum); i++) {
list.push("");
};
this.list = list;
this.newXNum = Number(this.xNum);
},
generateList() {
console.log(this.list);
var xAxisList = [];
console.log(this.newXNum)
for (let m = 0; m < Number(this.newXNum); m++) {
for (let i = 0; i < Number(this.systemNum); i++) {
let xAxisObj = {
x: this.list[m],
y: Math.floor(Math.random() * Number(this.yMax) + Number(this.yMin)),
s: String(i+1)
}
xAxisList.push(xAxisObj)
}
};
this.finalResult = JSON.stringify(xAxisList);
},
randomY() {
var num = Math.floor(Math.random() * Number(this.yMax) + Number(this.yMin));
return num;
},
}
})
<script src="//unpkg.com/vue/dist/vue.js">
</script>
<script src="//unpkg.com/element-ui@2.0.11/lib/index.js">
</script>
<div id="app">
<el-container>
<el-header class="mb20">折线图随机数据生成</el-header>
<div>
<div class="left mb20">
<div>
<el-input class="small-input" v-model="xNum" placeholder="请输入横坐标数量" size="small"></el-input>
<el-button class="mb20" type="primary" @click="confirmX" size="small">确定横坐标数量</el-button>
</div>
<div v-for="i in Number(newXNum)">
第{{ i}}个横坐标
<el-input class="small-input" v-model="list[i-1]" placeholder="请输入横坐标" size="small"></el-input>
</div>
<div>
<span>请输入纵坐标最小值</span>
<el-input class="small-input" v-model="yMin" placeholder="请输入纵坐标最小值" size="small"></el-input>
</div>
<div>
<span>请输入纵坐标最大值</span>
<el-input class="small-input" v-model="yMax" placeholder="请输入纵坐标最大值" size="small"></el-input>
</div>
<div>
<span>请输入系列(折线)数量</span>
<el-input class="small-input" v-model="systemNum" placeholder="请输入系列数量" size="small"></el-input>
</div>
<el-button type="primary" @click="generateList" size="small">生成</el-button>
</div>
<div class="v-card right">
<el-input :rows="6" type="textarea" id="copyid" v-model="finalResult" > </el-input>
</div>
</div>
</el-container>
</div>
@import url("//unpkg.com/element-ui@2.0.11/lib/theme-chalk/index.css");
.el-header, .el-footer {
background-color: #E9EEF3;
color: #333;
text-align: center;
line-height: 60px;
font-weight: bold;
}
.el-main {
color: #333;
}
.el-input{
margin-bottom: 20px;
}
.v-card{
margin-top: 20px;
}
.mb20{
margin-bottom: 20px;
}
.v-input{
margin-bottom: 20px;
}
.small-input{
width:200px;
}
.left{
display: inline;
}
.right{
display: inline;
}