SOURCE

console 命令行工具 X clear

                    
>
console
var dom = document.getElementById("container");
var myChart = echarts.init(dom);

var app = {};
option1 = {
    title: {
        text: '温度对比'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['1车', '2车', '3车', '4车', '5车']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,]
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '1车',
            type: 'line',
            data: [27,27,29,27,39,38,33,43,43,46,44,53,53,50,52,53,61,65,67,60,62,68,73,72,75,81,81,76,82,82,87,93,90,97,98,91,93,99,106,103,102,105,110,111,119,]
        },
        {
            name: '2车',
            type: 'line',
            data: [29,27,26,27,31,40,36,39,45,48,42,53,45,53,56,54,55,59,65,63,70,71,74,68,77,74,74,79,81,79,86,85,94,93,97,93,99,97,100,100,104,112,105,117,116,]
        },
        {
            name: '3车',
            type: 'line',
            data: [30,32,33,35,36,33,43,39,39,42,47,50,52,47,49,55,53,61,67,69,67,72,71,77,71,74,76,82,78,89,87,92,94,96,97,95,96,99,106,102,107,106,111,110,117,]
        },
        {
            name: '4车',
            type: 'line',
            data: [25,24,35,33,29,32,40,37,40,39,50,47,47,51,58,57,58,65,67,60,71,63,68,70,78,79,74,84,83,80,81,89,90,88,97,95,98,104,105,102,107,105,112,110,118,]
        },
        {
            name: '5车',
            type: 'line',
            data: [26,27,25,34,30,39,43,37,39,43,45,43,51,51,50,57,55,57,62,64,70,70,66,74,70,71,79,85,86,81,91,89,87,87,95,101,97,98,100,100,105,104,111,109,113,]
        }
    ]
};
option2 = {
    title: {
        text: '电流对比'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['1车', '2车', '3车', '4车', '5车']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,]
    },
    yAxis: {
        type: 'value',
        max:50
    },
    series: [
        {
            name: '1车',
            type: 'line',
            data: [23,27,28,23,29,18,23,27,28,20,18,28,18,23,20,23,18,27,23,29,21,21,25,25,18,21,25,24,19,19,29,23,22,28,28,24,24,29,25,23,20,29,19,27,20,]
        },
        {
            name: '2车',
            type: 'line',
            data: [27,29,23,28,25,19,22,25,21,24,22,28,19,24,22,24,22,24,29,26,22,20,29,19,25,25,28,26,20,20,21,27,21,29,19,29,22,28,23,28,23,28,25,20,19,]
        },
        {
            name: '3车',
            type: 'line',
            data: [24,29,29,29,22,24,18,29,23,29,18,26,20,29,26,26,26,23,29,27,20,22,28,23,21,24,27,23,23,20,27,27,29,18,28,20,28,25,25,29,20,27,24,25,18,]
        },
        {
            name: '4车',
            type: 'line',
            data: [23,24,24,26,23,24,25,23,29,18,18,23,21,23,26,23,24,21,24,29,24,18,18,26,22,24,28,26,27,29,21,29,19,24,28,27,27,26,22,26,25,22,21,26,27,]
        },
        {
            name: '5车',
            type: 'line',
            data: [26,25,21,23,27,22,19,25,27,27,20,26,18,21,26,18,26,19,21,18,23,18,27,29,18,28,20,21,24,20,20,28,25,28,20,18,23,26,23,29,26,18,20,20,20,]
        }
    ]
};
option3 = {
    title: {
        text: '转速对比'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['1车', '2车', '3车', '4车', '5车']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,]
    },
    yAxis: {
        type: 'value',
        max:50
    },
    series: [
        {
            name: '1车',
            type: 'line',
            data: [26,26,26,26,27,27,27,27,27,26,27,26,26,27,27,26,26,26,27,27,27,27,27,27,26,27,27,26,27,27,26,27,26,26,26,27,27,27,27,27,27,27,27,26,26,]
        },
        {
            name: '2车',
            type: 'line',
            data: [27,26,27,27,26,26,26,26,27,27,26,27,26,26,27,26,27,27,26,26,26,27,27,26,26,27,27,27,26,26,27,26,27,26,26,27,27,26,27,26,27,26,26,27,26,]
        },
        {
            name: '3车',
            type: 'line',
            data: [26,27,27,27,27,26,26,26,26,27,27,26,26,27,27,26,26,26,26,26,27,27,26,26,27,26,27,27,27,27,26,26,26,26,27,26,27,26,26,27,27,26,26,26,27,]
        },
        {
            name: '4车',
            type: 'line',
            data: [29,29,30,29,30,29,30,29,30,29,30,29,30,30,29,30,29,30,29,30,30,29,30,30,30,30,30,29,30,30,29,29,30,29,29,29,29,30,29,29,29,30,29,29,29,]
        },
        {
            name: '5车',
            type: 'line',
            data: [29,29,28,28,28,29,29,29,29,28,29,28,28,29,28,29,28,29,28,28,29,28,28,29,28,28,28,28,28,29,28,28,29,29,28,29,29,28,29,29,28,29,28,28,29,]
        }
    ]
};
option4 = {
    title: {
        text: '压力对比'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['1车', '2车', '3车', '4车', '5车']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [1,3,5,7,9,11,13,15,17,19,21,23,25,27,29,31,33,35,37,39,41,43,45,47,49,51,53,55,57,59,61,63,65,67,69,71,73,75,77,79,81,83,85,87,89,91,]
    },
    yAxis: {
        type: 'value'
        ,max:10
    },
    series: [
        {
            name: '1车',
            type: 'line',
            data: [3,3,4,0,3,0,4,0,4,4,4,4,0,3,0,4,3,4,4,4,3,3,4,4,3,4,0,0,3,4,0,4,0,3,3,3,3,0,4,0,3,0,0,3,4,]
        },
        {
            name: '2车',
            type: 'line',
            data: [3,3,3,4,0,3,4,0,3,0,4,0,3,0,3,0,0,0,0,4,4,0,0,4,4,0,3,4,3,0,4,0,4,3,4,4,3,3,3,3,0,3,0,0,3,]
        },
        {
            name: '3车',
            type: 'line',
            data: [3,4,4,4,4,0,0,4,4,4,0,4,4,3,4,0,3,0,3,3,4,3,4,4,4,4,0,0,3,0,3,3,4,4,3,3,4,4,3,0,3,3,4,4,3,]
        },
        {
            name: '4车',
            type: 'line',
            data: [3,4,4,3,3,4,4,4,3,3,0,3,0,0,4,4,4,0,0,0,3,4,4,0,3,4,0,4,4,0,0,0,3,0,3,4,0,0,0,0,3,4,3,3,0,]
        },
        {
            name: '5车',
            type: 'line',
            data: [0,3,4,0,3,4,0,4,4,4,3,0,0,3,3,0,4,0,3,0,4,4,0,4,3,3,3,3,0,0,0,0,3,0,3,0,3,3,3,0,4,4,3,4,3,]
        }
    ]
};

myChart.setOption(option4, true);




layui.use('form', function(){
  var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
  form.on('select(product)', function(data){
  if(data.value==1){
      myChart.setOption(option1, true);
  }else if(data.value==2){
      myChart.setOption(option2, true);
  }else if(data.value==3){
      myChart.setOption(option3, true);
  }else if(data.value==4){
      myChart.setOption(option4, true);
  }
  });
  form.on('select(planType)', function(data){
  if(data.value==1){
      $("#max").addClass("layui-hide");
      $("#min").removeClass("layui-hide");
  }else if(data.value==2){
      $("#max").removeClass("layui-hide");
      $("#min").addClass("layui-hide");
  }});

  //……
  
  //但是,如果你的HTML是动态生成的,自动渲染就会失效
  //因此你需要在相应的地方,执行下述方法来进行渲染
  form.render();
});  
<!DOCTYPE html>
<html style="height: 100%">

<head>
	<meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0 ;padding: 20px; background-color: #F2F2F2;">
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
		<legend>密炼机曲线对比</legend>
	</fieldset>

	<div class="layui-card">
		<div class="layui-card-header">对比数据选择 </div>
		<div class="layui-card-body" style="width: 100%; height: auto;">
			<form class="layui-form layui-form-pane" action="">
				<div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">数据选择</label>
                        <div class="layui-input-inline">
                            <select name="modules" lay-verify="required" lay-filter="planType"> 
                            <option value="1">单任务数据</option>
                            <option value="2">多任务数据</option>
                            </select>
                        </div>
                    </div>  
                    <div class="layui-inline">
                        <label class="layui-form-label">对比项目</label>
                        <div class="layui-input-inline">
                            <select name="modules" lay-verify="required" lay-filter="product"> 
                            <option value="1">温度</option>
                            <option value="2">电流</option>
                            <option value="3">转速</option>
                            <option value="4">压力</option>
                            </select>
                        </div>
                    </div>  
                </div>
                <div class="layui-form-item" id='min'>
					<div class="layui-inline">
						<label class="layui-form-label">任务编号</label>
                        <div class="layui-input-inline" >
                            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入作业编号" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class='layui-hide' id='max'>
                <div class="layui-form-item">
                    <label class="layui-form-label">对比数据1</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入作业编号" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                    <select name="quiz2">
                        <option value="">请选择车次</option>
                        <option value="">第一车</option>
                        <option value="">第二车</option>
                        <option value="">第三车</option>
                        <option value="">第四车</option>
                        <option value="">第五车</option>
                        <option value="">第六车</option>
                        <option value="">第七车</option>
                        <option value="">第八车</option>
                        <option value="">第九车</option>
                        <option value="">第十车</option>
                    </select>
                    </div>
                    <label class="layui-form-label">对比数据2</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入作业编号" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                    <select name="quiz2">
                        <option value="">请选择车次</option>
                        <option value="">第一车</option>
                        <option value="">第二车</option>
                        <option value="">第三车</option>
                        <option value="">第四车</option>
                        <option value="">第五车</option>
                        <option value="">第六车</option>
                        <option value="">第七车</option>
                        <option value="">第八车</option>
                        <option value="">第九车</option>
                        <option value="">第十车</option>
                    </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">对比数据3</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入作业编号" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                    <select name="quiz2">
                        <option value="">请选择车次</option>
                        <option value="">第一车</option>
                        <option value="">第二车</option>
                        <option value="">第三车</option>
                        <option value="">第四车</option>
                        <option value="">第五车</option>
                        <option value="">第六车</option>
                        <option value="">第七车</option>
                        <option value="">第八车</option>
                        <option value="">第九车</option>
                        <option value="">第十车</option>
                    </select>
                    </div>
                    <label class="layui-form-label">对比数据4</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入作业编号" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                    <select name="quiz2">
                        <option value="">请选择车次</option>
                        <option value="">第一车</option>
                        <option value="">第二车</option>
                        <option value="">第三车</option>
                        <option value="">第四车</option>
                        <option value="">第五车</option>
                        <option value="">第六车</option>
                        <option value="">第七车</option>
                        <option value="">第八车</option>
                        <option value="">第九车</option>
                        <option value="">第十车</option>
                    </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">对比数据5</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入作业编号" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                    <select name="quiz2">
                        <option value="">请选择车次</option>
                        <option value="">第一车</option>
                        <option value="">第二车</option>
                        <option value="">第三车</option>
                        <option value="">第四车</option>
                        <option value="">第五车</option>
                        <option value="">第六车</option>
                        <option value="">第七车</option>
                        <option value="">第八车</option>
                        <option value="">第九车</option>
                        <option value="">第十车</option>
                    </select>
                    </div>
                    <label class="layui-form-label">对比数据6</label>
                    <div class="layui-input-inline">
                        <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入作业编号" class="layui-input">
                    </div>
                    <div class="layui-input-inline">
                    <select name="quiz2">
                        <option value="">请选择车次</option>
                        <option value="">第一车</option>
                        <option value="">第二车</option>
                        <option value="">第三车</option>
                        <option value="">第四车</option>
                        <option value="">第五车</option>
                        <option value="">第六车</option>
                        <option value="">第七车</option>
                        <option value="">第八车</option>
                        <option value="">第九车</option>
                        <option value="">第十车</option>
                    </select>
                    </div>
                </div>
                </div>
                
            </form>
        </div>
	</div>
	<div class="layui-card">
		<div class="layui-card-header">曲线图</div>
		<div class="layui-card-body" style="width: 100%; height: 550px;">
			<div id="container" style="height: 90%"></div>
		</div>
	</div>

</body>

</html>

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