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

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

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

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

基于ECharts,JQueryUI的可拖拽数据展示web页面_第1张图片基于ECharts,JQueryUI的可拖拽数据展示web页面_第2张图片

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标签中规定所要拥有的功能进行初始化就可以了:


<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Draggable - Default functionalitytitle>
  <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 aroundp>
div>
body>
html>

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


<html>
<head>
    <meta charset="utf-8">
    <title>EChartstitle>
    
    <script src="echarts.min.js">script>
head>
<body>
    
    <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>

效果:
基于ECharts,JQueryUI的可拖拽数据展示web页面_第3张图片

你可能感兴趣的:(web前端)