layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页面会轻松地拥有丰富而友好的操作体验。
在中国可视化生态系统中，ECharts 通过提供方便丰富的可视化图表，极大缩短了用户与数据的距离。个人认为是最好用的可用来生成图表的插件。
现在使用Layer和Echarts构建弹出层折线图。
下载好所需要用到的工具包，Echarts下载为echarts.min.js，Layer在layer官网下载之后将layer文件夹放到项目之中。
在HTML文件中引入
<script src=\"js/jquery-1.11.1.min.js\"></script> <!-- 你必须先引入jQuery1.8或以上版本 --> <script src=\"js/layer/layer.js\"></script> <script src=\"js/bootstrap.min.js\"></script> <!-- 引入 ECharts 文件 --> <script src=\"js/echarts.min.js\"></script>
页面内容
<body>
<button id=\"test2\">Layer+Echarts构建弹出层折线图</button>
<div id=\"speedChart\" style=\"display: none;\">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id=\"speedChartMain\" style=\"width: 600px; height: 400px;\"></div>
</div>
<div id=\"dfd\">
<span>Layer+Echarts构建弹出层折线图</span>
<p>Layer+Echarts构建弹出层折线图</p>
</div>
</body>
js脚本
<script type=\"text/javascript\">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(\'speedChartMain\'));
option = {
tooltip: {
trigger: \'axis\'
},
legend: {
data:[\'邮件营销\',\'联盟广告\',\'视频广告\',\'直接访问\',\'搜索引擎\']
},
grid: {
left: \'3%\',
right: \'4%\',
bottom: \'3%\',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: \'category\',
boundaryGap: false,
data: [\'周一\',\'周二\',\'周三\',\'周四\',\'周五\',\'周六\',\'周日\']
},
yAxis: {
type: \'value\'
},
series: [
{
name:\'邮件营销\',
type:\'line\',
stack: \'总量\',
data:[120, 132, 101, 134, 90, 230, 210]
},
{
name:\'联盟广告\',
type:\'line\',
stack: \'总量\',
data:[220, 182, 191, 234, 290, 330, 310]
},
{
name:\'视频广告\',
type:\'line\',
stack: \'总量\',
data:[150, 232, 201, 154, 190, 330, 410]
},
{
name:\'直接访问\',
type:\'line\',
stack: \'总量\',
data:[320, 332, 301, 334, 390, 330, 320]
},
{
name:\'搜索引擎\',
type:\'line\',
stack: \'总量\',
data:[820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//弹出一个页面层
$(\'#test2\').on(\'click\', function() {
layer.open({
title:\'hello world\',
type: 1,
shade: false,
area: [\'620px\', \'460px\'],
shadeClose: false, //点击遮罩关闭
content: $(\"#speedChart\")
});
});
</script>
预览
当然以上是静态加载，我们平常使用最多的是异步加载，修改一下代码即可：
<div id=\"speedChart\" style=\"display: none;\">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id=\"speedChartMain\" style=\"width: 600px; height: 400px;\"></div>
</div>
$(document).ready(function() {
option = {
tooltip: {
trigger: \'axis\'
},
legend: {
data:[]
},
grid: {
left: \'3%\',
right: \'4%\',
bottom: \'3%\',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: \'category\',
boundaryGap: false,
data: []
},
yAxis: {
type: \'value\'
},
series: []
};
//按钮提交表单数据
$(\"#subSpeed\").click(function(){
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(\'speedChartMain\'));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
var url=$(\"#speedFrom\").attr(\"action\");
var times=[]; //時間数组（实际用来盛放X轴坐标值）
var speeds=[]; //速度数组（实际用来盛放Y坐标值）
$.post(url,$(\"#speedFrom\").serialize(),
function(data, status){
if(data!=null){
for (var i = 0; i < data.length; i++) {
times.push(data[i].timeStamp);
speeds.push(data[i].speed);
}
//之前option中legend和 XAxis的data,series 为空，所以现在将数据填充进去
myChart.setOption({ //加载数据图表
legend: {
data:[$(\"#roads\").val()]
},
xAxis: {
data: times
},
series: [{
// 根据名字对应到相应的系列
name: $(\"#roads\").val(),
type:\'line\',
data: speeds
}]
});
}
layer.open({
title:\'折线图\',
type: 1,
shade: false,
area: [\'620px\', \'460px\'],
shadeClose: true, //点击遮罩关闭
content: $(\"#speedChart\")
});
},\"json\");
});
});
以上这篇Layer+Echarts构建弹出层折线图的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
© 版权声明
THE END
暂无评论内容