zoukankan      html  css  js  c++  java
  • 插件使用 之 layui、echart

    layui 样式 功能

    引入

    <link href="layui-v2.4.3/layui/css/layui.css">       class=”xxx” 加样式

    <script src="layui-v2.4.3/layui/layui.js"></script>       模块化

    layui.use(['layer', 'form'], function(){ ...以下为内容... }   //导入模块,简写

    /<script src="layui-v2.4.3/layui/layui.all.js"></script>     非模块化

    /!function(){ ...以下为内容... }();                //  !()  layui加载完成

    内容:

      var layer = layui.layer,     //加载提示框模块

     form = layui.form;     //加载表单模块

      

      layer.open({

    参数 ...

    })

    layer.config(options) - 初始化全局配置

    layer.ready(callback) - 初始化就绪

    layer.open(options) - 原始核心方法

    layer.alert(content, options, yes) - 普通信息框

    layer.confirm(content, options, yes, cancel) - 询问框

    layer.msg(content, options, end) - 提示框

    layer.load(icon, options) - 加载层

    layer.tips(content, follow, options) - tips

    layer.msg(‘hello’);

     

     

    echarts 统计图

    引入

    <script src="js/echarts.js"></script>

    <div id="main" style=" 600px;height:400px;"></div> 存放图 需设宽高

    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);                              设置参数

  • 相关阅读:
    springMVC-1
    8-IO总结
    7-RandomAccessFile 随机流
    6-对象流(对象的序列化)
    正则表达式语法手册,以及一些实例
    JavaScript的屏幕对象
    js常用正则表达式表单验证代码
    使用 CSS3 实现超炫的 Loading(加载)动画效果
    ajax处理跨域有几种方式
    javascript实现图片延迟加载方法汇总(三种方法)
  • 原文地址:https://www.cnblogs.com/javscr/p/9987640.html
Copyright © 2011-2022 走看看