layui做折线图_layui前端框架实现echars折线图异步加载及弹出框
这几天写了一个需求，就是layui框架整合echars折线图实现动态加载的需求，，网上也有好多案例，，我借鉴了一位博主的分享的代码，，然后整合的一些
首先是body里面的
趋势图
接下来是折线图的配置
function loadTwoLine(assigneename,belongsystem) {
var submittime1=$("#submittime1").val();
var submittime2=$("#submittime2").val();
assigneename=window.encodeURI(window.encodeURI(assigneename));
belongsystem=window.encodeURI(window.encodeURI(belongsystem));
var myChart = echarts.init(document.getElementById('TwoLineChart'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
title: {
text: ''
},
tooltip: {
trigger: 'axis',
},
legend: {
data: []
},
calculable: true,
xAxis: {
type: 'category',
boundaryGap: false, //取消左侧的间距
data: []
},
yAxis: {
type: 'value',
splitLine: { show: false },//去除网格线
name: ''
},
series: [{
name: '任务数',
type: 'line',
symbol: 'emptydiamond',
color:'blue',//设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
data: []
},
{
name: '办结',
type: 'line',
symbol: 'emptydiamond', //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
data: []
}]
});
myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
var testworkload = []; //类别数组(实际用来盛放X轴坐标值)
var teststarttime = [];
$.ajax({
type: 'get',
url: "${ctx}/bpmStart/getListWorkingNum2.do?assigneename="+assigneename+"&submittime1="+submittime1+"&submittime2="+submittime2+"&belongsystem="+belongsystem,//请求数据的地址
dataType: "json", //返回数据形式为json
success: function (result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
var list = result;
for (var i = 0; i < list.length; i++) {
teststarttime.push(list[i].teststarttime); //遍历蒸发量并填入数组
}
for (var i = 0; i < list.length; i++) {
testworkload.push(list[i].testworkload); //遍历降水量并填入数组
}
}
myChart.hideLoading(); //隐藏加载动画
myChart.setOption({ //加载数据图表
xAxis: {
data: teststarttime
},
series: [{
data: testworkload
}]
});
},
error: function (errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
},
});
};
最后是折线图的弹出框
layui.use([
'table'], function() {
var table = layui.table;
table.on('tool(test)', function (obj) { //test为你table的lay-filter对应的
if(obj.event === 'reqInfo'){
window.open("${ctx}/bpmStart/waitToBeDone.do?business_key="+obj.data.businessKey+"&rand="+Math.random())
}
var data = obj.data;
if (obj.event === 'qushitu') {
index=layer.open({
type:1,
title:'测试需求处理趋势图',
shadeClose:true,
shade:0.8,
area:['700px','600px'],
content:$('#myChartShow')
});
loadTwoLine(data.assigneename,data.belongsystem);
}
});
});