SOURCE

console 命令行工具 X clear

                    
>
console
new Vue({
    el: "#app",
    data() {
        return {
            xNum: 5,
            newXNum: 5,
            list: ['', '', '', '', ''],
            yMax: 200,
            yMin: 0,
            systemNum: 1,
            finalResult: '暂无数据',
        }
    },
    mounted() {

    },
    methods: {

        /** 确定X坐标 **/
        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>
				<!-- {{list}} -->

				<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: #B3C0D1; */
    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;
  }

本项目引用的自定义外部资源