插件使用 之 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="width: 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);                              设置参数