插件使用 之 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);                              設置參數


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM