您的位置：首页 > Web前端 > JQuery

基于ECharts,JQueryUI的可拖拽数据展示web页面

2018-03-18 10:58 393 查看

基于ECharts,JQueryUI的可拖拽数据展示web页面

因近期工作需求，需要提供一个展示数据的web页面，同时需要提供灵活的布局，所以调研了ECharts及JQueryUI的一些功能，本文做一个简单的总结。

echarts是一个百度提供的一个开源的js库，主要用来做数据的展示工作，使用非常简单，并且提供了非常丰富的demo。例如下:

JQueryUI主要负责实现可拖拽布局，JQueryUI提供的功能有:(除了JqueryUI之外，还调研了Sortable.js 和 gridster虽然效果很酷炫，功能很全面(在拖拽布局方面比JqueryUI全面)，但是维护的人群比较少，最近的更新都是几个月前了，所以放弃了Sortable.js，以后有时间可以再重新看一下);

Gridster :http://dsmorse.github.io/gridster.js/

JQueryUI的主要功能：

1. 动作: Draggable，Droppable, Resizeable, Selectable, Sortable

2. 控件: Accordin ,Button, Dialog, Datepicker等

BootStrap主要用于布局，可以满足后期跨设备使用的需求。

bootStrap在线编辑器 http://www.bootcss.com/p/layoutit/ 主要可以用来生成静态页面。

bootStrap教程:https://v3.bootcss.com/getting-started/

下面简单说一下各个部分的使用方法：

BootStrap和JQueryUI的使用方法都非常简单，只需要在你希望达到某种效果的元素上加上相应的Class,并在js标签中规定所要拥有的功能进行初始化就可以了：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#draggable" ).draggable();
} );
</script>
</head>
<body>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
</body>
</html>

echart的使用也非常简单，他需要一个有空间的dom对象,将其用echart.init 再设置相应的属性即可，如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.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'));

// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

效果:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery ui web 布局

相关文章推荐

新的分享

章节导航