<!DOCTYPE html>
<html lang="en">
<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">
<title>Document</title>
<link rel="stylesheet" href="../css/viwe.css">
<body>
<header>
<h1>新锂程数据大屏</h1>
<div class="showTime">
<script>
var t = null;
t = setTimeout(time, 1000); //開始运行
function time() {
clearTimeout(t); //清除定时器
dt = new Date();
var y = dt.getFullYear();
var mt = dt.getMonth() + 1;
var day = dt.getDate();
var h = dt.getHours(); //获取时
var m = dt.getMinutes(); //获取分
var s = dt.getSeconds(); //获取秒
document.querySelector(".showTime").innerHTML =
"当前时间：" +
y +
"年" +
mt +
"月" +
day +
"-" +
h +
"时" +
m +
"分" +
s +
"秒";
t = setTimeout(time, 1000); //设定定时器，循环运行
}
</script>
</div>
</header>
<div class="centent">
<div class="left">
<div class="left-top">
<div class="bar"></div>
<div class="left-bor-left"></div>
<div class="left-bor-rigth"></div>
<div class="left-bor-bott-left"></div>
<div class="left-bor-bott-rigth"></div>
</div>
<div class="left-center">
<div class="line"></div>
<div class="left-bor-left"></div>
<div class="left-bor-rigth"></div>
<div class="left-bor-bott-left"></div>
<div class="left-bor-bott-rigth"></div>
</div>
<div class="left-bott">
<div class="pink"></div>
<div class="left-bor-left"></div>
<div class="left-bor-rigth"></div>
<div class="left-bor-bott-left"></div>
<div class="left-bor-bott-rigth"></div>
</div>
</div>
<div class="center">
<div class="center-top">
<div class="center-text">
<ul class="ul-text">
<div class="left-bor-left"></div>
<div class="left-bor-rigth"></div>
<div class="left-bor-bott-left"></div>
<div class="left-bor-bott-rigth"></div>
<li class="li-noe">7%</li>
<li class="li-tow">30%</li>
</ul>
</div>
<div class="center-math">
<ul class="center-math">
<li class="center-math-left">产品扩展百分比</li>
<li class="center-math-rigth">市场百分比</li>
</ul>
</div>
</div>
<div class="center-bott">
<div class="map"></div>
<div class="map2"></div>
<div class="map3"></div>
<div class="map3"></div>
<!-- <div class="map4"></div> -->
</div>
</div>
<div class="rigth">
<div class="rigth-top">
<div class="rigthre"></div>
<div class="left-bor-left"></div>
<div class="left-bor-rigth"></div>
<div class="left-bor-bott-left"></div>
<div class="left-bor-bott-rigth"></div>
</div>
<div class="rigth-center">
<div class="rigthline"></div>
<div class="left-bor-left"></div>
<div class="left-bor-rigth"></div>
<div class="left-bor-bott-left"></div>
<div class="left-bor-bott-rigth"></div>
</div>
<div class="rigth-bott">
<div class="rigthbott"></div>
<div class="left-bor-left"></div>
<div class="left-bor-rigth"></div>
<div class="left-bor-bott-left"></div>
<div class="left-bor-bott-rigth"></div>
</div>
</div>
</div>
<script type="text/javascript" src="../js/echarts.min.js"></script>
<script type="text/javascript" src="../js/index.js"></script>
</body>
</html>css文件内容如下
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
@font-face {
font-family: electronicFont;
src: url(../font/DS-DIGIT.TTF);
}
html,body{ overflow-y:scroll;}
html,body{ overflow:scroll; min-height:101%;}
html{ overflow:-moz-scrollbars-vertical;}
/* 通配符基础设置 */
header {
position: absolute;
width: 100%;
height: 35PX;
background-image: url('../images/headerbg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
background-repeat: repeat-y;
background-position: center;
}
/* header头部顶框设置 */
h1 {
position: relative;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 400px;
font-size: 20px;
text-align: center;
color: aliceblue;
margin-top: 2px;
}
/* h1 title设置字体样式使用相对定位 */
.showTime {
position: absolute;
font-family: electronicFont, Tahoma, Geneva, Verdana, sans-serif;
font-size: 15px;
font-weight: 700px;
margin-right: 30px;
top: 1px;
right: 15px;
color: aliceblue;
}
/* showtime时间显示样式 */
.centent {
position: relative;
height: calc(100vh - 25px);
top: 35px;
width: 100%;
padding: 0;
margin: 0;
background-image: url('../images/bg.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
display: flex;
min-width: 200px;
}
/* 主体布局背景 */
.left {
flex: 3;
width: 25%;
border: #fff solid 0.2;
color: #fff;
text-align: center;
display: flex;
position: relative;
flex-direction: column;
}
/* 使用弹性布局left分3分和右边一样 */
.center {
flex: 5;
border: #02a6b5 solid 0.2;
color: #fff;
text-align: center;
display: flex;
position: relative;
flex-direction: column;
}
/* 主体地图部分五份 */
.rigth {
flex: 3;
width: 25%;
border: #fff solid 0.2;
color: #fff;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
}
/* 右边主体布局 */
.left-top,
.left-center,
.left-bott {
flex: 30.3333%;
position: relative;
display: inline-block;
padding: 2px;
margin: 5px;
color: #fff;
border: #fff solid 0.2;
background: url('../images/partbg1.png') no-repeat 100%;
}
/* 左边分成等边三份 */
.rigth-top,
.rigth-center,
.rigth-bott {
flex: 30.3333%;
position: relative;
padding: 5px;
min-width:0;
margin: 5px;
color: #fff;
border: #fff solid 0.2;
background: url('../images/partbg1.png') no-repeat 100%;
}
/* 右边分成等边三分 */
.left-bor-left {
display: inline-block;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 20px;
width: 20px;
border-top: solid #02a6b5;
border-left: solid #02a6b5;
}
.left-bor-rigth {
display: inline-block;
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
height: 20px;
width: 20px;
border-top: solid #02a6b5;
border-right: solid #02a6b5;
}
.left-bor-bott-left {
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
height: 20px;
width: 20px;
border-bottom: solid #02a6b5;
border-left: solid #02a6b5;
}
.left-bor-bott-rigth {
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 0;
height: 20px;
width: 20px;
border-bottom: solid #02a6b5;
border-right: solid #02a6b5;
}
.center-top {
flex: 2;
position: relative;
background-color: rgba(101, 132, 225, 0.1);
padding: 10px;
margin: 5px;
display: inline-block;
}
.center-bott {
flex: 9;
/* background: url('../images/centerbg3.png') no-repeat;
background-size: 80% 80%;
border-radius: 15px; */
}
.bar {
height: 190px;
width: 100%;
padding: 5px;
background-size: 100% 100%;
}
.center-text {
border: 1 solid rgba(25, 186, 226, 0.1);
height: 70%;
width: 100%;
}
.ul-text{
display: flex;
color: #ffeb7b;
margin-top: 13px;
font-family: electronicFont;
}
.li-noe {
flex: 1;
position: relative;
line-height: 1rem;
font-size: 3.875rem;
border-right: 1px solid #fff;
height: 30px;
}
.li-tow {
flex:1;
line-height: 1rem;
font-size: 3.875rem;
}
.center-math {
display: flex;
color: azure;
}
.center-math-left {
flex:1;
line-height: 1rem;
}
.center-math-rigth {
flex:1;
line-height: 1rem;
height: 50%;
width: 50%;
}
.center-math {
border: 1 solid rgba(25, 186, 226, 0.1);
height: 30%;
width: 100%;
}
.map {
position: relative;
height: 60%;
width: 50%;
top: 50%;
left: 50%;
background: url(../images/map.png) no-repeat;
transform: translate(-50%, -50%);
opacity: 0.3;
background-size: 100% 100%;
opacity: 0.3;
animation: rotase1 15s linear infinite;
}
.map2 {
position: absolute;
height: 60%;
width: 60%;
top: 60%;
left: 50%;
background: url(../images/lbx.png) no-repeat;
transform: translate(-50%, -50%);
opacity: 0.8;
background-size: 100% 100%;
animation: rotase2 15s linear infinite;
animation: rotase1 15s linear infinite;
}
.map3 {
position: absolute;
height: 60%;
width: 60%;
top: 60%;
left: 50%;
background: url(../images/jt.png) no-repeat;
transform: translate(-50%, -50%);
opacity: 0.9;
background-size: 100% 100%;
animation: rotase2 10s linear infinite;
}
.map4 {
position: absolute;
height: 30%;
width: 30%;
top: 60%;
left: 50%;
background: url(../images/jt.png) no-repeat;
transform: translate(-50%, -50%);
opacity: 0.9;
background-size: 100% 100%;
animation: rotase1 10s linear infinite;
}
.line {
height: 190px;
width: 80%;
padding: 5px;
background-size: 100% 100%;
}
.pink {
height: 190px;
width: 80%;
padding: 5px;
background-size: 100% 100%;
}
.rigthline {
height: 190px;
width: 100%;
padding: 5px;
background-size: 100% 100%;
}
.rigthre {
height: 190px;
width: 100%;
padding: 5px;
background-size: 100% 100%;
}
.rigthbott {
height: 190px;
width: 100%;
padding: 5px;
background-size: 100% 100%;
}
@keyframes rotase1 {
form {
transform: translate(-50%, -50%)
rotate(0deg);
}
to {
transform: translate(-50%, -50%)
rotate(360deg);
}
}
@keyframes rotase2 {
form {
transform: translate(-50%, -50%)
rotate(0deg);
}
to {
transform: translate(-50%, -50%)
rotate(-360deg);
}
}js内容如下
(function rigthline() {
// 1实例化对象
var myChart = echarts.init(document.querySelector(".rigthline"));
// 2. 指定配置项和数据
var xAxisData = ['旅游行业', '电竞行业', '游戏行业', '影视行业', '电商行业', '医疗行业', '金融行业'];
var yAxisData = [200, 300, 300, 900, 1500, 1200, 600];
// 基于准备好的dom，初始化echarts实例
var option = {
title: {
text: '行业分析',
left: 'center',
textStyle: { color: '#fff' },
top: '4%',
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '2%',
right: '4%',
top: '20%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: xAxisData,
axisTick: {
alignWithLabel: true
},
axisLabel: { //x轴文字颜色
color: '#fff'
},
axisLine: { //x轴线的颜色
lineStyle: {
color: ['#fff'],
width: 1,
type: 'solid',
opacity: 0.1
}
}
}],
yAxis: [{
type: 'value',
axisLabel: { //y轴文字颜色
color: '#fff'
},
axisLine: { //y轴线的颜色
lineStyle: {
color: ['#fff'],
width: 1,
type: 'solid',
opacity: 0.1
}
},
splitLine: { //网格样式
show: true,
lineStyle: {
color: 'rgba(255,255,255,0.1)',
width: 1,
type: 'dashed'
}
}
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '50%',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: '#248ff7'
}, {
offset: 1,
color: '#6851f1'
}]),
barBorderRadius: 11,
}
},
data: yAxisData
}]
};
myChart.setOption(option, true);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
myChart.resize();
});
})();
(function line() {
myChart2 = echarts.init(document.querySelector('.line'));
var option = {
title: {
text: '人员变化',
left: 'left',
textStyle: {color: '#fff'},
top:'4%',
},
grid: {
left: '2%',
right: '4%',
top:'45%',
bottom: '3%',
containLabel: true
},
legend: {
data: ['新增粉丝', '新增游客'],
textStyle: {color: '#fff'},
right: '4%',
top:'3%',
bottom: '5%',
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月','8月','9月','10月','11月','12月'],
axisLabel: { //x轴文字颜色
color: '#fff'
},
axisLine: { //x轴线的颜色
lineStyle:{
color: ['#fff'],
width: 1,
type: 'solid',
opacity: 0.1
}
}
},
yAxis: {
type: 'value',
axisLabel: { //x轴文字颜色
color: '#fff'
},
axisLine: { //x轴线的颜色
lineStyle:{
color: ['#fff'],
width: 1,
type: 'solid',
opacity: 0.1
}
},
splitLine: { //网格样式
show: true,
lineStyle:{
color: 'rgba(255,255,255,0.1)',
width: 1,
type: 'dashed'
}
}
},
color:['#01dee1',"#ed3f35"], //曲线颜色
series: [ {
name: '新增粉丝',
type: 'line',
data: [47, 50,100, 140, 95, 220, 201,240,230,125,245,202,125],
smooth: true,//平滑曲线
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
},{
name: '新增游客',
type: 'line',
data: [149, 138, 160, 130, 180, 28, 90,60,49,54,28,45],
smooth: true, //平滑曲线
markPoint: {
data: [
{type: 'max', name: '最大值'},
{type: 'min', name: '最小值'}
]
}
}]
};
myChart2.setOption(option, true);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
myChart2.resize();
});
})();
(function pink() {
var myChart3 = echarts.init(document.querySelector('.pink'));
var option = {
title: {
text: '年龄分析',
left: 'center',
textStyle: {color: '#fff',size:'3',align:"left"},
top:'1%',
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
grid: {
left: '3%',
right: '4%',
top:'35%',
bottom: '3%'
},
/*legend: {
orient: 'vertical',
left: 10,
data: ['0-12岁', '13-18岁','19-30岁','31-40岁','41-50岁','50岁以上']
},*/
series: [
{
name: '年龄占比',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: true,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
itemStyle: {
normal: {
label:{
show: true,
formatter: '{b} \n ({d}%)'
}
}
},
color:['#10606b','#0696ab','#06a0ab','#86c9f4','#4da8ec','#3a91d2','#005fa6','#315f97'],
data: [
{value: 999, name: '0-12岁'},
{value: 2000, name: '13-18岁'},
{value: 1548, name: '19-30岁'},
{value: 1548, name: '31-40岁'},
{value: 1548, name: '41-50岁'},
{value: 1548, name: '50岁以'}
]
}
]
};
myChart3.setOption(option,true); // 使用刚指定的配置项和数据显示图表。
// $(document).ready(function(){
// myChart3.resize();
// })
window.addEventListener("resize", function () {
myChart3.resize();
})
})();
(function bar() {
// 1实例化对象
var myChart5 = echarts.init(document.querySelector(".bar"));
// 2. 指定配置项和数据
var option5 = {
title: {
text: '公司盈利',
left: 'center',
textStyle: {color: '#fff',size:'3',align:"left"},
top:'1%',
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
axisLine: { //x轴线的颜色
lineStyle: {
color: ['#fff'],
width: 1,
type: 'solid',
opacity: 0.1
}
},
labelLine: {
show: false
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}
]
};
myChart5.setOption(option5, true);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
myChart5.resize();
});
})();
(function rigth() {
var option = {
color:['#1d9dff','#006cff','#60cda0','#ed8884','#8b78f6','#3a91d2','#06a0ab','#86c9f4'],
// title: {
// text: '玫瑰图-地区分布',
// left: 'center',
// top:'4%',
// textStyle: {
// color: '#fff'
// }
// },
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
left: 'center',
top: 'bottom',
data: ['北京', '天津', '上海', '深圳', '广州', '厦门', '珠海', '西安'],
textStyle: {
color: '#fff'
}
},
toolbox: {
show: true,
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {
show: true,
type: ['pie', 'funnel']
},
restore: {show: true},
saveAsImage: {show: true}
}
},
series: [
{
name: '半径模式',
type: 'pie',
radius: [15, 90],
center: ['50%', '50%'],
roseType: 'radius',
label: {
show: true
},
emphasis: {
label: {
show: true
}
},
data: [
{value: 10, name: '北京'},
{value: 15, name: '天津'},
{value: 15, name: '上海'},
{value: 25, name: '深圳'},
{value: 20, name: '广州'},
{value: 35, name: '厦门'},
{value: 30, name: '珠海'},
{value: 40, name: '西安'}
]
}
]
};
myChart6 = echarts.init(document.querySelector('.rigthre'));
myChart6.setOption(option, true);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
myChart6.resize();
});
})();
(function rigth() {
var cost = [69, 78, 60,34, 70]//本期比上期（大于1按1处理）
var totalCost = [ 100,100, 100, 100,100]//比例综合
var visits = [ 664,793, 610, 350,702]//本期占总的百分比*100
var grade = ['Node','VUE','Javascript','CSS3','HTML5' ]
var myColor = ['#21BF57','#56D0E3', '#1089E7', '#F8B448','#F57474', ];
var data = {
grade: grade,
cost: cost,
totalCost: totalCost,
visits: visits
};
var options = {
title: {
top: '4%',
left: 'center',
text: '柱形图-技能掌握',
textStyle: {
align: 'center',
color:'#fff'
}
},
grid: {
left: '130',
right: '100',
bottom: '20'
},
xAxis: {
show: false,
},
yAxis: {
type: 'category',
axisLabel: {
margin:30,
show: true,
color: '#4DCEF8',
fontSize: 14
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
data: data.grade
},
series: [{//外层边框
type: 'bar',
barGap: '-65%',
label: {
normal: {
show: true,
position: 'right',
color: '#fff',
fontSize: 14,
formatter:
function(param) {
return data.visits[param.dataIndex];
},
}
},
barWidth: '30%',
itemStyle: {
normal: {
borderColor: '#4DCEF8',
borderWidth: 2,
barBorderRadius: 15,
color: 'rgba(102, 102, 102,0)'
},
},
z: 1,
data: data.totalCost,
// data: da
}, {//柱形图占比
type: 'bar',
barGap: '-85%',
barWidth: '21%',
itemStyle: {
normal: {
barBorderRadius: 16,
color: function(params) {
var num = myColor.length;
return myColor[params.dataIndex % num]
},
}
},
max: 1,
label: {
normal: {
show: true,
position: 'inside',
formatter: '{c}%'
}
},
labelLine: {
show: true,
},
z: 2,
data: data.cost,
}]
}
var myChart8 = echarts.init(document.querySelector('.rigthbott'));
myChart8.setOption(options, true);
// 4. 让图表跟随屏幕自动的去适应
window.addEventListener("resize", function() {
myChart8.resize();
});
})();
如有bug,请指出，相互进步，互通有无，要字体和img请私聊。
1624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
