版本更新
HibiKier
|
After Width: | Height: | Size: 393 KiB |
|
After Width: | Height: | Size: 176 KiB |
|
After Width: | Height: | Size: 654 KiB |
|
After Width: | Height: | Size: 365 KiB |
|
After Width: | Height: | Size: 290 KiB |
|
After Width: | Height: | Size: 415 KiB |
|
After Width: | Height: | Size: 608 KiB |
|
After Width: | Height: | Size: 499 KiB |
|
After Width: | Height: | Size: 596 KiB |
|
After Width: | Height: | Size: 745 KiB |
|
After Width: | Height: | Size: 349 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
@@ -5,13 +5,16 @@
|
||||
<meta charset="utf-8">
|
||||
<title>ECharts Example</title>
|
||||
<!-- 引入ECharts -->
|
||||
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
|
||||
<script src="../js/echarts.min.js"></script>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 图表容器 -->
|
||||
<div id="main" style="width: 1000px;height:500px;"></div>
|
||||
<div class="container">
|
||||
<div id="main" style="height: 1000px; width: 1000px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
@@ -19,25 +22,41 @@
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
var option = {
|
||||
title: {
|
||||
text: {{data.title | tojson}},
|
||||
left: 'center',
|
||||
top: 'top',
|
||||
textStyle: {
|
||||
color: '#333',
|
||||
fontSize: 24
|
||||
}
|
||||
},
|
||||
graphic: {
|
||||
type: 'image',
|
||||
id: 'background',
|
||||
left: 0,
|
||||
top: 0,
|
||||
z: -10,
|
||||
bounding: 'raw',
|
||||
origin: [0, 0],
|
||||
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01]
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: {
|
||||
{
|
||||
data.category_data | tojson
|
||||
}
|
||||
}
|
||||
data: {{data.category_data | tojson}}
|
||||
},
|
||||
series: [{
|
||||
data: {
|
||||
{
|
||||
data.data | tojson
|
||||
}
|
||||
},
|
||||
data: {{data.data | tojson}},
|
||||
type: 'bar',
|
||||
label: {
|
||||
show: true, // 显示标签
|
||||
position: 'right', // 数字显示在柱子上方
|
||||
formatter: '{c}' // 显示数值
|
||||
},
|
||||
itemStyle: {
|
||||
// 为每个柱子设置随机颜色
|
||||
color: function () {
|
||||
@@ -56,4 +75,34 @@
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
<style>
|
||||
.container {
|
||||
position: relative;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.container::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: url({{data.background_image|tojson}});
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
background-size: cover;
|
||||
filter: blur(5px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
#main {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
/* 其他内容样式 */
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -5,7 +5,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="https://cdn.bootcss.com/echarts/4.2.1/echarts.min.js"></script>
|
||||
<script src="../js/echarts.min.js"></script>
|
||||
<title>test</title>
|
||||
<!-- <link rel="stylesheet" href="./res/font-awesome/css/font-awesome.min.css"> -->
|
||||
<link rel="stylesheet" href="main.css">
|
||||
|
||||
@@ -1,130 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-cn">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
|
||||
<title>test</title>
|
||||
<!-- <link rel="stylesheet" href="./res/font-awesome/css/font-awesome.min.css"> -->
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="main">
|
||||
<div class="main-content">
|
||||
<div class="top-date">2024/08/14......
|
||||
<img src="./res/img/sun.png" alt="sun" class="weather-img" />
|
||||
<span style="margin-left: 180px;">24℃</span>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="user-info-ava">
|
||||
<img src="./res/img/test.jpg" alt="test" class="ava-img" />
|
||||
<div class="nickname">勇 者</div>
|
||||
</div>
|
||||
<div class="user-info-data">
|
||||
<div>
|
||||
<span style="font-size: 35px;">姓名:</span>
|
||||
<span>副驾驶啦啦啦</span>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<span style="font-size: 35px;">种族:</span>
|
||||
<span>人类</span>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<span style="font-size: 35px;">性别:</span>
|
||||
<span>男</span>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<span style="font-size: 35px;">生日:</span>
|
||||
<span>2021/10/01</span>
|
||||
</div>
|
||||
<div style="margin-top: 15px;">
|
||||
<span style="font-size: 35px;">UID:</span>
|
||||
<span>0021</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-des">
|
||||
<p>个人简介:</p>
|
||||
<div style="line-height: 60px;">
|
||||
这是人类勇者的传奇在这片古老而神秘的土地上，
|
||||
每当黑暗的力量威胁到和平与正义之时总会有一位英雄挺身而出。
|
||||
他们不仅拥有超凡的力量更重要的是更重要的是更重要的是
|
||||
</div>
|
||||
<img src="./res/img/1.png" class="des-img" />
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 50px;"></div>
|
||||
<div class="main-content">
|
||||
<div class="menu">
|
||||
<div class="menu-item" style="background-color: #E8BC89;">信息</div>
|
||||
<div class="menu-item" style="background-color: #EDCCC3;">仓库</div>
|
||||
<div class="menu-item" style="background-color: #F0DAC6;">卡组</div>
|
||||
<div class="menu-item" style="background-color: #F7E5E4;">设置</div>
|
||||
</div>
|
||||
<div class="tag-img">
|
||||
<div class="tag-img-content">
|
||||
<div class="tag-img-test"></div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="./res/img/2.png" class="main-img" />
|
||||
<div class="sign-data">
|
||||
<p class="base-title">好感度等级: 5级</p>
|
||||
<div>
|
||||
<span class="sign-level">路人</span>
|
||||
<span class="sign-level">陌生</span>
|
||||
<span class="sign-level">初识</span>
|
||||
<span class="sign-level select">普通</span>
|
||||
<span class="sign-level">熟悉</span>
|
||||
<span class="sign-level">信赖</span>
|
||||
<span class="sign-level">相知</span>
|
||||
<span class="sign-level">厚谊</span>
|
||||
<span class="sign-level">亲密</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="test-content" style="margin-top: 30px">
|
||||
<img src="./res/img/level.png" class="test-icon" />
|
||||
权限等级: 9
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-item">
|
||||
<div class="test-content" style="width: 50%;">
|
||||
<img src="./res/img/gold.png" class="test-icon" />
|
||||
金币数量: 999
|
||||
</div>
|
||||
<div class="test-content">
|
||||
<img src="./res/img/prop.png" class="test-icon" />
|
||||
道具数量: 933
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-item">
|
||||
<div class="test-content" style="width: 50%;">
|
||||
<img src="./res/img/call.png" class="test-icon" />
|
||||
调用次数: 6443
|
||||
</div>
|
||||
<div class="test-content">
|
||||
<img src="./res/img/say.png" class="test-icon" />
|
||||
发言统计: 233
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="line"></div> -->
|
||||
<div class="text-chart">
|
||||
<div class="test-title">
|
||||
<img src="./res/img/xian.png" class="test-icon" />
|
||||
发言趋势图
|
||||
</div>
|
||||
<div id="chart" class="chart"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script type="text/javascript" src="main.js">
|
||||
</script>
|
||||
|
||||
</html>
|
||||