自动生成的静态代码示例
zhezhongyun 2025-05-25 16:47 26 浏览
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>
无标题文档
</title>
<link href="jscss/bootstrap.min.css" rel="stylesheet">
<link href="jscss/jquery.contextMenu.min.css" rel="stylesheet">
<link href="jscss/font-awesome.min.css" rel="stylesheet">
<link href="jscss/animate.min.css" rel="stylesheet">
<link href="jscss/style.min.css" rel="stylesheet">
<link href="jscss/skins.css" rel="stylesheet">
<link href="jscss/ry-ui.css" rel="stylesheet">
<link href="jscss/extend.css" rel="stylesheet">
<link href="jscss/layui.css" rel="stylesheet">
<link href="jscss/global.css" rel="stylesheet">
<link href="jscss/styleCard.css" rel="stylesheet">
<link rel="stylesheet" href="jscss//css/layui.css">
<style>
body{padding: 16px;}
</style>
<script src="jscss/jquery.min.js"></script>
<script src="jscss/bootstrap.min.js"></script>
<style type="text/css">
<style type="text/css">
<!-- .STYLE0{ font-family: "宋体"; font-size: 8pt; color: #000000; } --></style>
</head>
<body>
<div>
<form class="layui-form" method="get" lay-filter="top" id="AAA">
<div class="row">
<div class="col-xl-3 col-sm-6 col-12">
<div class="card flex-fill fb sm-box">
<i class="fab fa-facebook"></i>
<h6>
50,095
</h6>
<p>
Likes
</p>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12">
<div class="card flex-fill twitter sm-box">
<i class="fab fa-twitter"></i>
<h6>
48,596
</h6>
<p>
Follows
</p>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12">
<div class="card flex-fill insta sm-box">
<i class="fab fa-instagram"></i>
<h6>
52,085
</h6>
<p>
Follows
</p>
</div>
</div>
<div class="col-xl-3 col-sm-6 col-12">
<div class="card flex-fill linkedin sm-box">
<i class="fab fa-linkedin-in"></i>
<h6>
69,050
</h6>
<p>
Follows
</p>
</div>
</div>
</div>
<!-- 使用 layui-container 作为主要容器 -->
<div class="layui-container">
<!-- 创建一行 -->
<div class="layui-row">
<div class="layui-col-md6">
<div id="lineChart" style="width:100%; height: 400px;"></div>
</div>
<div class="layui-col-md6">
<div id="barChart" style="width:100%; height: 400px;"></div>
</div>
</div>
<!-- 创建一行 -->
<div class="layui-row">
<div class="layui-col-md6">
<div id="stripChart" style="width:100%; height: 400px;"></div>
</div>
<div class="layui-col-md6">
<div id="pieChart" style="width:100%; height: 400px;"></div>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript" src="jscss/layui.js"></script>
<script type="text/javascript" src="jscss/echarts.min.js"></script>
<script>
layui.use(["form", "util", "laydate", "rate", "slider"],
function() {
var $ = layui.$;
var form = layui.form;
var layer = layui.layer;
var util = layui.util;
var laydate = layui.laydate;
//日期
laydate.render({
elem: "#date"
});
var lineChartDom = document.getElementById('lineChart');
var lineChart = echarts.init(lineChartDom);
var option;
option = {
title: {
text: 'Stacked Line'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: 'Email',
type: 'line',
smooth: true,
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
smooth: true,
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
smooth: true,
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
smooth: true,
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
smooth: true,
data: [820, 932, 901, 934, 1290, 1330, 1320]
}]
};
option && lineChart.setOption(option);
var barChartDom = document.getElementById('barChart');
var barChart = echarts.init(barChartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
option && barChart.setOption(option);
// 基于准备好的dom，初始化echarts实例
var stripChartDom = document.getElementById('stripChart');
var stripChart = echarts.init(stripChartDom);
// 指定图表的配置项和数据
var option = {
yAxis: {
type: 'category',
data: ['苹果', '香蕉', '橙子', '葡萄', '草莓']
},
xAxis: {
type: 'value'
},
series: [{
data: [5, 20, 36, 10, 10],
type: 'bar'
}]
};
// 使用刚指定的配置项和数据显示图表。
option && stripChart.setOption(option);
var pieChartDom = document.getElementById('pieChart');
var pieChart = echarts.init(pieChartDom);
var option;
option = {
title: {
text: 'Referer of a Website',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [{
value: 1048,
name: 'Search Engine'
},
{
value: 735,
name: 'Direct'
},
{
value: 580,
name: 'Email'
},
{
value: 484,
name: 'Union Ads'
},
{
value: 300,
name: 'Video Ads'
}],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
option && pieChart.setOption(option);
});
</script>
</body>
</html>
- 上一篇：如何用代码快速制作营销网站底部广告?
- 下一篇：带你看好玩的CSS-霓虹灯按钮
相关推荐
- Qt setAttribute设置窗口属性（qt设置窗口名字）
-
this->resize(500,400);this->setWindowTitle("主窗口");QLabel*label=newQLabel(...
- 利用Axure+js创建可配置地图页面（axure制作app界面）
-
编辑导语：如何利用Axure实现自定义地图展示？本篇文章里，作者结合Axure与高德地图，对如何在Axure中设置相应参数、进而预览时实现自定义地图展示效果的操作流程进行了示范和总结，一起来看一下。本...
- Excel如何获取所有类型的工作表，详细编程方法介绍
-
No.1Excel可以创建不同类型的工作表，编程中会遇到返回某一类型的工作或所有类型的工作表，对表进行操作，那么如何得到想要的工作表呢？下面介绍一个方法。首先要认识一下Sheets对象，它表示工作簿中...
- VBA中的常用单元格引用方式（vba中单元格的引用方法）
-
VBA编程经常和“对象”打交道，其中最频繁的对象大概就是“单元格”了。（听说您还没有对象？那……我想你大概需要一份Excel，包邮988……）今天我们就来聊一下单元格的各种引用方式，比如单个单元格、行...
- 强烈安利试试这个!效果爆炸的漫画变身AI，火到服务器几度挤爆
-
金磊丰色发自凹非寺量子位报道|公众号QbitAI“排队1241人，等待2600秒……”——这届网友为了看一眼自己在动漫里的样子，可真是拼了！“始作俑者”是一款可以把人像变动漫的生成器。只...
- 软网推荐:为窗口控制菜单添加扩展控制命令
-
当我们点击Windows标准窗口（如记事本、资源管理器等）左上角的窗口控制按钮时，会弹出一个含有窗口控制基本命令的菜单，其中包括移动、大小、最小化、最大化、关闭等窗口控制命令。如果我们觉得这些命令不能...
- 45、VBA字典去重，两种不同的方法在实战中的运用(VBA进阶)
-
1、在VBA字典去重的操作中，若程序仅需要使用key值，那么无论采用哪种方法都不会有问题；但如果需要获得对应的item值，就必须根据实际需求选择合适的方法了。学VBA要知其然而知其所以然，不能似懂非懂...
- Excel VBA学习笔记:合并单元格的相关操作
-
合并单元格，一个在工作中很常见的，但是是令写（工作表）公式和VBA代码的人都很不喜欢的东东，今天来讲讲与它相关的操作语法。1、Range("A1:B2").Merge；合并A1到B2单...
- 软网推荐:图片编辑 小而不凡（秽的读法）
-
说起图片编辑小工具，咱手边就有个“画图”软件。但是，这个工具比较简单，对于处理透明背景、应用滤镜效果、添加边框、做拼接图和全景照、图层操作等，就无能为力了。同样是小软件，PhotoPad就能满足上述需...
- Android弹软键盘时之ListView的变化控制
-
前几天有个人问我，说在最底下有个输入框，弹出键盘时整个界面都一起跟着移动，上面的标题栏都移到上面看不到了，界面非常难看。其实这种问题一般存在于这样的界面布局中那就是，上面是标题栏，中间是Listvie...
- 如何将数组值传递到工作表中（怎么传数组）
-
【分享成果，随喜正能量】不与别人盲目攀比，自己就会悠然自得;不把人生目标定得太高，自己就会欢乐常在;不刻意追求完美，自己就会远离痛苦;不是时时苛求自己，自己就会活的自在;不每每吹毛求疵，自己就会轻轻松...
- 【VBA入门必备】Offset和Resize这样用，工作效率翻3倍!
-
大家好！今天共同学习下VBA中单元格属性Offset和Resize操作。一、Offset：单元格的"导航仪"功能说明：以当前单元格为坐标原点，灵活跳转位置语法格式：单元格.Offset...
- 50道阿里巴巴MySql经典面试题(附答案)
-
1、MySQL中有哪几种锁？1、表级锁：开销小，加锁快；不会出现死锁；锁定力度大，发生锁冲突的概率最高，并发度最低。2、行级锁：开销大，加锁慢；会出现死锁；锁定粒度最小，发生锁冲突的概率最低，并发度...
- 如何在Vue3项目中集成ESLint+Prettier+Stylelint+Husky?
-
随着前端工程化的发展,前端代码规范也显得越来越重要,所以作为一个前端对于这方面还是需要有一定的了解的。本篇文章将带大家使用ESLint+Prettier+Stylelint+Husky从零搭建一个Vi...
- SpringBoot 中 Json 格式化配置（springboot json转对象）
-
SpringBoot针对jackson是自动化配置的，如果需要修改，也可以自定义配置。0x01：通过application.yml配置属性说明：spring.jackson.date-form...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)
- opacity 属性 (32)