HTML怎么把里面的提出变成js模块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="../static/js/echarts.min.js"></script>
<!-- 引入jquery.js -->
<script src="../static/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//建立axjx所需的json数据
var app={
xday:[],
yvalue1:[],
yvalue2:[],
yvalue3:[],
yvalue4:[]
};
//发送ajax请求
$(document).ready(function () {
getData();
console.log(app.xday);
console.log(app.yvalue1);
console.log(app.yvalue2);
console.log(app.yvalue3);
console.log(app.yvalue4)
});
//设计画图
function getData() {
$.ajax({
//渲染的是127.0.0.1/test 下的json数据
url:'/test',
data:{},
type:'POST',
async:false,
dataType:'json',
success:function(data) {
app.xday = data.xdays;
app.yvalue1 = data.yvalues1;
app.yvalue2 = data.yvalues2;
app.yvalue3 = data.yvalues3;
app.yvalue4 = data.yvalues4;
myChart.setOption({
tooltip: {},
xAxis: {
data: app.xday
},
yAxis: {},
//
series: [{
name: '时间',
type: 'line',
data: app.yvalue1
}
,{
name: '时间',
type: 'line',
data: app.yvalue2
}
,{
name: '时间',
type: 'line',
data: app.yvalue3
}
,{
name: '时间',
type: 'line',
data: app.yvalue4
}
]
})
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
}
</script>
</body>
</html>
如上该如何改为两个文件呢 一个html调用个js模块那种
没能理解你的需求
你肯定要创建一个js文件
假设我们创建一个 echartsDemo.js 文件 在当前目录下 放置如下代码
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//建立axjx所需的json数据
var app={
xday:[],
yvalue1:[],
yvalue2:[],
yvalue3:[],
yvalue4:[]
};
//发送ajax请求
$(document).ready(function () {
getData();
console.log(app.xday);
console.log(app.yvalue1);
console.log(app.yvalue2);
console.log(app.yvalue3);
console.log(app.yvalue4)
});
//设计画图
function getData() {
$.ajax({
//渲染的是127.0.0.1/test 下的json数据
url:'/test',
data:{},
type:'POST',
async:false,
dataType:'json',
success:function(data) {
app.xday = data.xdays;
app.yvalue1 = data.yvalues1;
app.yvalue2 = data.yvalues2;
app.yvalue3 = data.yvalues3;
app.yvalue4 = data.yvalues4;
myChart.setOption({
tooltip: {},
xAxis: {
data: app.xday
},
yAxis: {},
//
series: [{
name: '时间',
type: 'line',
data: app.yvalue1
}
,{
name: '时间',
type: 'line',
data: app.yvalue2
}
,{
name: '时间',
type: 'line',
data: app.yvalue3
}
,{
name: '时间',
type: 'line',
data: app.yvalue4
}
]
})
},
error:function (msg) {
console.log(msg);
alert('系统发生错误');
}
})
}
你的html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="../static/js/echarts.min.js"></script>
<!-- 引入jquery.js -->
<script src="../static/js/jquery-1.8.3.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
<script src="./echartsDemo.js"></script>
</html>
新建一个js文件，将script标签内的逻辑卸载js文件内，再通过script标签引入这个js放到最下方
