前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
文章目录
- 前言
- 一、Echart是什么
- 二、ECharts入门教程
- 三、作品演示
- 四、代码实现
- 1.HTML
- 2.CSS
- 3.JavaScript
- 4.Echarts
- 五、更多干货
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
5 分钟上手ECharts
三、作品演示
四、代码实现
1.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>可视化-数据中心</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/reset.css">
</head>
<body>
<div id="particles-js" class="main">
<div class="main_con">
<div class="main_top">
<div class="main_top_left">
<div class="main_top_left_top">
<img src="./images/main_top_left.png" />
<div class="main_top_left_top_title">XX公开数据展示</div>
<div class="main_top_left_top_con">
<div class="main_top_left_top_con_list">
<span class="main_top_left_c_l_n main_top_left_c_l_n1">0</span>
<p>党务公开</p>
</div>
<div class="main_top_left_top_con_list">
<span class="main_top_left_c_l_n main_top_left_c_l_n2">0</span>
<p>政务公开</p>
</div>
<div class="main_top_left_top_con_list">
<span class="main_top_left_c_l_n main_top_left_c_l_n3">0</span>
<p>财务公开</p>
</div>
<div class="main_top_left_top_con_left">
<div class="main_top_left_t_c_l_left">
<span class="main_top_left_c_l_n main_top_left_c_l_n4">0</span>
<p>村务公开</p>
</div>
<div class="main_top_left_t_c_l_right">
<span class="main_top_left_c_l_n main_top_left_c_l_n5">0</span>
<p>居务公开</p>
</div>
</div>
<div class="main_top_left_top_con_right main_top_left_top_con_right2">
<div class="main_top_left_t_c_r_left">
<span class="main_top_left_c_l_n">0</span>
<p>占位公开</p>
</div>
<div class="main_top_left_t_c_r_right">
<span class="main_top_left_c_l_n">0</span>
<p>占位公开</p>
</div>
</div>
</div>
</div>
<div class="main_top_left_top main_top_left_bottom">
<img src="./images/main_top_left.png" />
<div class="main_top_left_top_title">XX信息员添加数据展示</div>
<div id="baseId" class="main_top_left_top_con"></div>
</div>
</div>
<div class="main_top_middle">
<div class="main_top_middle_top_title">
<img class="title_bg" src="./images/title_bg.png"> XXXXXX服务大数据可视化监管平台
<a class="title_web" href="" target="blank">管理系统</a>
<a class="title_admin" href="" target="blank">web网页</a>
</div>
<div class="main_top_middle_num_title">XX公开数量</div>
<div class="main_top_middle_num">
<div class="main_top_middle_num_list">
<img src="./images/center_num.png">
<p class="main_top_middle_num_list5">0</p>
</div>
<div class="main_top_middle_num_list">
<img src="./images/center_num.png">
<p class="main_top_middle_num_list4">0</p>
</div>
<div class="main_top_middle_num_list">
<img src="./images/center_num.png">
<p class="main_top_middle_num_list3">0</p>
</div>
<div class="main_top_middle_num_list">
<img src="./images/center_num.png">
<p class="main_top_middle_num_list2">0</p>
</div>
<div class="main_top_middle_num_list">
<img src="./images/center_num.png">
<p class="main_top_middle_num_list1">0</p>
</div>
</div>
<div class="main_top_middle_bottom">
<div class="main_top_middle_bottom_echarts">
<img src="./images/main_top_bottom.png">
<div class="main_top_echarts_con">
<div class="main_top_echarts_con_title">XX公开数量占比</div>
<div id="threeTasksId" class="main_top_echarts_pie"></div>
</div>
</div>
<div class="main_top_middle_bottom_echarts main_top_middle_bottom_echarts_right">
<img src="./images/main_top_bottom.png">
<div class="main_top_echarts_con">
<div class="main_top_echarts_con_title">XX公开数量占比</div>
<div id="publicityId" class="main_top_echarts_pie"></div>
</div>
</div>
</div>
</div>
<div class="main_top_left main_top_right">
<div class="main_top_left_top">
<img src="./images/main_top_left.png" />
<div class="main_top_left_top_title">XX数据展示</div>
<div class="main_top_left_top_con">
<div class="main_top_left_top_con_left">
<span class="daysData">0</span>
<p>今日公开</p>
</div>
<div class="main_top_left_top_con_right">
<span class="weekData">0</span>
<p>本周公开</p>
</div>
<div class="main_top_left_top_con_list">
<span class="monthData">0</span>
<p>本月公开</p>
</div>
<div class="main_top_left_top_con_list">
<span class="someThing">0</span>
<p>办事指南</p>
</div>
<div class="main_top_left_top_con_list">
<span class="policyData">0</span>
<p>政策解读</p>
</div>
</div>
</div>
<div class="main_top_left_top main_top_left_bottom">
<img src="./images/main_top_left.png" />
<div class="main_top_left_top_title">XXXX数量类型占比</div>
<div id="questionId" class="main_top_left_top_con">
</div>
</div>
</div>
</div>
<div class="main_middle">
<div class="main_middle_list">
<img src="./images/main_middle.png">
<div class="main_list_title main_list_title1">XXX镇</div>
<span class="main_list_title_num main_list_title_num1">0</span>
</div>
<div class="main_middle_list">
<img src="./images/main_middle.png">
<div class="main_list_title main_list_title2">XX镇</div>
<span class="main_list_title_num main_list_title_num2">0</span>
</div>
<div class="main_middle_list">
<img src="./images/main_middle.png">
<div class="main_list_title main_list_title3">XXXX</div>
<span class="main_list_title_num main_list_title_num3">0</span>
</div>
<div class="main_middle_list">
<img src="./images/main_middle.png">
<div class="main_list_title main_list_title4">XXXX</div>
<span class="main_list_title_num main_list_title_num4">0</span>
</div>
<div class="main_middle_list">
<img src="./images/main_middle.png">
<div class="main_list_title main_list_title5">XXXX</div>
<span class="main_list_title_num main_list_title_num5">0</span>
</div>
</div>
<div class="main_bottom">
<div class="main_bottom_top">
<div class="main_bottom_top_list">
<img src="./images/main_bottopm_top1.png">
<div class="main_bottom_t_l_title">XX指南</div>
<div class="main_bottom_t_l_con">
<div class="main_bottom_t_l_main">
<ul>
<li>
<div class="main_bottom_t_l_main_list">
<div class="main_bottom_t_list_title main_bottom_t_list_title1">如需商用请联系：863512936</div>
<div class="main_bottom_t_list_time main_bottom_t_list_time1">2020/05/20</div>
</div>
</li>
<li>
<div class="main_bottom_t_l_main_list">
<div class="main_bottom_t_list_title main_bottom_t_list_title2">如需商用请联系：863512936</div>
<div class="main_bottom_t_list_time main_bottom_t_list_time2">2020/05/20</div>
</div>
</li>
<li>
<div class="main_bottom_t_l_main_list">
<div class="main_bottom_t_list_title main_bottom_t_list_title3">更多模板请联系：863512936</div>
<div class="main_bottom_t_list_time main_bottom_t_list_time3">2020/05/20</div>
</div>
</li>
<li>
<div class="main_bottom_t_l_main_list">
<div class="main_bottom_t_list_title main_bottom_t_list_title4">如需商用请联系：863512936</div>
<div class="main_bottom_t_list_time main_bottom_t_list_time4">2020/05/20</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="main_bottom_top_list">
<img src="./images/main_bottopm_top2.png">
<div class="main_bottom_t_l_title">XXXX公开占比</div>
<div id="departmentId" class="main_bottom_t_l_chart"></div>
</div>
<div class="main_bottom_top_list">
<img src="./images/main_bottopm_top1.png">
<div class="main_bottom_t_l_title">政策XX</div>
<div class="main_bottom_t_l_con">
<div class="main_bottom_t_l_main2">
<ul>
<li>
<div class="main_bottom_t_l_main_list">
<div class="main_bottom_t_list_title main_bottom_polity_title1">更多模板请联系：863512936</div>
<div class="main_bottom_t_list_time main_bottom_polity_time1">2020/05/20</div>
</div>
</li>
<li>
<div class="main_bottom_t_l_main_list">
<div class="main_bottom_t_list_title main_bottom_polity_title2">如需商用请联系：863512936</div>
<div class="main_bottom_t_list_time main_bottom_polity_time1">2020/05/20</div>
</div>
</li>
<li>
<div class="main_bottom_t_l_main_list">
<div class="main_bottom_t_list_title main_bottom_polity_title3">如需商用请联系：863512936</div>
<div class="main_bottom_t_list_time main_bottom_polity_time1">2020/05/20</div>
</div>
</li>
<li>
<div class="main_bottom_t_l_main_list">
<div class="main_bottom_t_list_title main_bottom_polity_title4">如需商用请联系：863512936</div>
<div class="main_bottom_t_list_time main_bottom_polity_time1">2020/05/20</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main_bottom_bottom">
<div class="main_bottom_b_left">
<img src="./images/main_bottom_bottom.png">
<div class="main_bottom_b_title">主要关注XXXX占比</div>
<div id="coverageId" class="main_bottom_b_con"></div>
</div>
<div class="main_bottom_b_middle1">
<img src="./images/main_bootm_middle.png">
<div class="main_bottom_b_title">关注XXXX占比</div>
<div id="contentId" class="main_bottom_b_con main_bottom_b_con2"></div>
</div>
<div class="main_bottom_b_middle2">
<img src="./images/main_bootm_middle.png">
<div class="main_bottom_b_title">XXXX发布量</div>
<div id="publicNumId" class="main_bottom_b_con main_bottom_b_con2"></div>
</div>
<div class="main_bottom_b_right">
<img src="./images/main_bottom_bottom.png">
<div class="main_bottom_b_title">XXX公开数量</div>
<div id="yearsNumId" class="main_bottom_b_con"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script type="text/javascript" src="js/dataScoll.js"></script>
<script type="text/javascript" src="js/digitalScroll.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="js/particles.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script>$(function() {
function apiFn() {
this.hostname = ""
}
apiFn.prototype = {
Init: function() {
this.findCount()
this.otherDataFn()
this.baseInfo()
this.questionFn()
this.publicityFn()
this.threeTasksFn()
this.departmentFn()
this.guideFn()
this.policyFn()
this.coverageFn()
this.yearsNumFn()
this.contentFn()
this.publicNumFn()
setInterval(function() {
numInit()
}, 6000)
},
findCount: function() {
},
// 其他数据展示
otherDataFn: function() {
$(".daysData").addClass("counter-value").text("304")
$(".weekData").addClass("counter-value").text("2044")
$(".monthData").addClass("counter-value").text("909")
$(".someThing").addClass("counter-value").text("980")
$(".policyData").addClass("counter-value").text("200")
},
// 基础信息
baseInfo: function() {
var baseChart = echarts.init(document.getElementById('baseId'));
var charts = [{
name: "测试1",
num: 200
},
{
name: "测试2",
num: 300
},
{
name: "测试3",
num: 400
},
{
name: "测试4",
num: 500
},
{
name: "测试5",
num: 300
},
]
var color = ['rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249', 'rgba(100,255,249']
let lineY = []
for (var i = 0; i < charts.length; i++) {
var x = i
if (x > color.length - 1) {
x = color.length - 1
}
var data = {
name: charts[i].name,
color: color[x] + ')',
value: charts[i].num,
itemStyle: {
normal: {
show: true,
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: color[x] + ', 0.3)'
}, {
offset: 1,
color: color[x] + ', 1)'
}], false),
barBorderRadius: 10
},
emphasis: {
shadowBlur: 15,
shadowColor: 'rgba(0, 0, 0, 0.1)'
}
}
}
lineY.push(data)
}
var option = {
title: {
show: false
},
grid: {
// borderWidth: 1,
top: '10%',
left: '30%',
right: '20%',
bottom: '3%'
},
color: color,
yAxis: [{
type: 'category',
inverse: true,
axisTick: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
show: false,
inside: false
},
data: charts.name
}, {
type: 'category',
inverse: true,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: true,
inside: false,
textStyle: {
color: '#38E1E1',
fontSize: '8',
},
formatter: function(val,) {
return `${charts[index].num}`
}
},
splitArea: {
show: false
},
splitLine: {
show: false
},
data: charts
}],
xAxis: {
// type: 'value',
axisTick: {
show: false
},
axisLine: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
series: [{
name: '',
type: 'bar',
zlevel: 2,
barWidth: '5px',
data: lineY,
animationDuration: 1500,
label: {
normal: {
color: 'white',
show: true,
position: [-65, -2],
textStyle: {
fontSize: 8
},
formatter: function(a,) {
return a.name
}
}
}
}],
animationEasing: 'cubicOut'
}
baseChart.setOption(option)
setInterval(function() {
baseChart.clear()
baseChart.setOption(option)
}, 40000)
},
// 问题反馈类型占比
questionFn: function() {
var numArr = [{
name: '测试11',
value: 300
},
{
name: '测试22',
value: 500
},
{
name: '测试33',
value: 400
},
{
name: '测试44',
value: 350
},
{
name: '测试55',
value: 363
},
{
name: '测试66',
value: 800
},
]
// for(var i = 0; i < data.list.length; i++) {
// numArr.push({name: data.list[i].name,value: data.list[i].num})
// }
var datas = numArr
var questionChart = echarts.init(document.getElementById('questionId'));
var option = {
title: {
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
color: ['#2E8CFF', '#FD9133', '#37D2D4', '#19CA88', '#858FF8'],
legend: {
itemWidth: 11, // 标志图形的长度
itemHeight: 11, // 标志图形的宽度
orient: 'vertical',
// left: 'right',
top: '15%',
x: '50%',
data: datas,
textStyle: { //图例文字的样式
color: '#fff',
fontSize: 8
},
},
series: [{
name: '问题反馈',
type: 'pie',
radius: '75%',
center: ['20%', '50%'],
animationDuration: 2500,
data: datas,
label: {
normal: {
position: 'inner',
show: false
}
}
}]
};
questionChart.setOption(option)
setInterval(function() {
questionChart.clear()
questionChart.setOption(option)
}, 8000)
},
// 党务公开
publicityFn: function() {
var dataArr = [{
name: '测试11',
value: 300
},
{
name: '测试22',
value: 500
},
{
name: '测试33',
value: 400
},
{
name: '测试44',
value: 350
},
{
name: '测试55',
value: 363
},
{
name: '测试66',
value: 800
},
]
// for(var i = 0; i < res.list.length; i++) {
// dataArr.push({name: res.list[i].name, value: res.list[i].num})
// }
var publicitChart = echarts.init(document.getElementById('publicityId'));
var data = dataArr
var option = {
color: ['#38EB70', '#F7E16C', '#0EFCFF', '#FD9133', '#4D92F2'],
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
itemWidth: 12, // 标志图形的长度
itemHeight: 12, // 标志图形的宽度
orient: 'vertical',
// left: 'right',
top: '5%',
bottom: '50%',
x: '45%',
textStyle: {
color: '#fff',
fontSize: 8,
},
data: data,
},
series: [
// 主要展示层的
{
radius: ['70%', '90%'],
center: ['25%', '50%'],
type: 'pie',
label: {
normal: {
position: 'inner',
show: false
}
},
name: "XX公开数量",
data: data,
},
// 边框的设置
{
radius: ['50%', '55%'],
center: ['25%', '50%'],
type: 'pie',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
labelLine: {
normal: {
show: false
},
emphasis: {
show: false
}
},
animation: false,
tooltip: {
show: false
},
data: [{
value: 1,
itemStyle: {
color: "rgba(250,250,250,0.3)",
},
}],
}
]
};
publicitChart.setOption(option)
setInterval(function() {
publicitChart.clear()
publicitChart.setOption(option)
}, 6000)
},
// 三务公开数量
threeTasksFn: function() {
let names = "666666";
if (6 - names.length > 0) {
for (g = 0; g < 6 - names.length; g++) {
$(".main_top_middle_num_list" + (6 - g)).text('0')
}
}
for (var j = 0; j < names.length; j++) {
$(".main_top_middle_num_list" + (names.length - j)).text(names.substr(j, 1))
}
var dataArr = [{
name: '测试11',
value: 300
},
{
name: '测试22',
value: 500
},
{
name: '测试33',
value: 400
},
{
name: '测试44',
value: 350
},
{
name: '测试55',
value: 363
},
{
name: '测试66',
value: 800
},
]
for (var i = 1; i < dataArr.length; i++) {
$(".main_top_left_c_l_n" + i).addClass("counter-value").text(dataArr[i].value)
}
var threeTasksChart = echarts.init(document.getElementById('threeTasksId'));
var data = dataArr
var option = {
color: ['#38EB70', '#2E8CFF', '#0EFCFF', '#858FF8', '#FD9133', '#F7E270'],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
itemWidth: 15, // 标志图形的长度
itemHeight: 15, // 标志图形的宽度
orient: 'vertical',
// left: 'right',
top: '10%',
bottom: '50%',
x: '50%',
textStyle: {
color: '#fff',
fontSize: 8,
},
data: data
},
series: {
name: '三务公开数量',
type: 'pie',
animationDuration: 1500,
radius: ['70%', '90%'],
center: ['25%', '50%'],
roseType: 'radius',
label: {
normal: {
position: 'inner',
show: false
}
},
data: data
}
};
threeTasksChart.setOption(option)
setInterval(function() {
threeTasksChart.clear()
threeTasksChart.setOption(option)
}, 4000)
},
// 各部门苏木镇嘎查村公开占比
departmentFn: function() {
var dataArr = [{
name: '测试11',
value: 300
},
{
name: '测试22',
value: 500
},
{
name: '测试33',
value: 400
},
{
name: '测试44',
value: 350
},
{
name: '测试55',
value: 363
},
]
// 中间滚动数据展示
for (var j = 0; j < dataArr.length; j++) {
$(".main_list_title_num" + (j + 1)).addClass("counter-value").text(dataArr[j].value)
$(".main_list_title" + (j + 1)).text(dataArr[j].name)
}
var departmentChart = echarts.init(document.getElementById('departmentId'));
var data = dataArr
var option = {
color: ['#FD9133', '#47F6A2', '#37D2D4', '#3493FF'],
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
itemWidth: 15, // 标志图形的长度
itemHeight: 15, // 标志图形的宽度
orient: 'vertical',
// left: 'right',
top: '30%',
bottom: '50%',
x: '5%',
textStyle: {
color: '#fff',
fontSize: 8,
},
data: data,
},
series: [{
name: 'XXXX公开占比',
type: 'pie',
radius: ['50%', '70%'],
center: ['78%', '52%'],
labelLine: {
normal: {
length: 12,
lineStyle: {
type: 'solid',
color: '#0EFCFF'
}
}
},
label: {
normal: {
formatter: (params) => {
return params.name
},
borderWidth: 0,
borderRadius: 4,
padding: [0, 0],
height: 20,
fontSize: 8,
align: 'center',
color: '#0EFCFF',
}
},
data: data
},
{
color: '#0EFCFF',
type: 'pie',
radius: ['55', '56'],
center: ['78%', '52%'],
data: [100],
label: {
show: false
}
},
{
type: 'pie',
radius: ['25', '26'],
center: ['78%', '52%'],
data: [100],
label: {
show: false
}
}
]
};
departmentChart.setOption(option)
setInterval(function() {
departmentChart.clear()
departmentChart.setOption(option)
}, 12000)
},
// 办事指南
guideFn: function() {
$(".main_bottom_t_l_main").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 1000,
speed: 500
});
},
// 政策解读
policyFn: function() {
$(".main_bottom_t_l_main2").jCarouselLite({
vertical: true,
hoverPause: true,
visible: 4,
auto: 1000,
speed: 500
});
},
// 主要关注内容区域占比
coverageFn: function() {
var resArr = [{
name: '测试11',
value: 300
},
{
name: '测试22',
value: 500
},
{
name: '测试33',
value: 400
},
{
name: '测试44',
value: 350
},
{
name: '测试55',
value: 363
},
{
name: '测试66',
value: 800
},
]
var indicatorArr = []
var numArr = []
for (var i = 0; i < resArr.length; i++) {
indicatorArr.push({
name: resArr[i].name,
max: 900
})
numArr.push(resArr[i].value)
}
var data = [{
value: numArr,
}]
var coverageChart = echarts.init(document.getElementById('coverageId'));
var option = {
legend: {
show: true,
icon: "circle",
bottom: 30,
center: 0,
itemWidth: 14,
itemHeight: 14,
itemGap: 21,
orient: "horizontal",
data: ['a', 'b'],
textStyle: {
fontSize: '70%',
color: '#0EFCFF'
},
},
radar: {
// shape: 'circle',
radius: '70%',
triggerEvent: true,
// type: 'default',
name: {
textStyle: {
color: '#39DCF4',
fontSize: '10',
// borderRadius: 3,
padding: [10, 10]
}
},
nameGap: '2',
indicator: indicatorArr,
splitArea: {
areaStyle: {
color: 'rgba(255,255,255,0)'
}
},
axisLine: { //指向外圈文本的分隔线样式
lineStyle: {
color: 'rgba(255,255,255,.2)'
}
},
splitLine: {
lineStyle: {
width: 1,
color: 'rgba(255,255,255,.2)'
}
},
},
series: [{
name: 'XXX区域占比',
type: 'radar',
animationDuration: 2000,
areaStyle: {
normal: {
color: {
type: 'linear',
opacity: 1,
x: 0,
y: 0,
x2: 0,
y2: 1,
color: '#2EEFAD'
}
}
},
symbolSize: 0,
lineStyle: {
normal: {
// color: 'rgba(252,211,3, 1)',
width: 0
}
},
data: data
}]
};
coverageChart.setOption(option)
setInterval(function() {
coverageChart.clear()
coverageChart.setOption(option)
}, 10000)
},
// 本年公开数量
yearsNumFn: function() {
var resArr = [{
name: '测试11',
value: 30
},
{
name: '测试22',
value: 50
},
{
name: '测试33',
value: 40
},
{
name: '测试44',
value: 35
},
{
name: '测试55',
value: 36
},
{
name: '测试66',
value: 80
},
]
var nameArr = []
var caiArr = []
var cunArr = []
var danArr = []
var junArr = []
var zhenArr = []
for (var i = 0; i < resArr.length; i++) {
nameArr.push(resArr[i].name)
caiArr.push(resArr[i].value)
cunArr.push(resArr[i].value)
danArr.push(resArr[i].value)
junArr.push(resArr[i].value)
zhenArr.push(resArr[i].value)
}
var yearsNumChart = echarts.init(document.getElementById('yearsNumId'));
var spNum = 5,
_max = 100;
var y_data = nameArr.reverse();
var _datamax = [100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
_data1 = caiArr.reverse(),
_data2 = cunArr.reverse(),
_data3 = danArr.reverse();
_data4 = junArr.reverse();
_data5 = zhenArr.reverse();
var fomatter_fn = function(v) {
return (v.value / _max * 100).toFixed(0)
}
var _label = {
normal: {
show: true,
position: 'inside',
formatter: fomatter_fn,
textStyle: {
color: '#fff',
fontSize: 8
}
}
};
var option = {
grid: {
containLabel: true,
left: 0,
top: 0,
right: 0,
bottom: 0
},
tooltip: {
show: true,
backgroundColor: '#fff',
borderColor: '#ddd',
borderWidth: 1,
textStyle: {
color: '#3c3c3c',
fontSize: 16
},
extraCssText: 'box-shadow: 0 0 5px rgba(0, 0, 0, 0.1)'
},
xAxis: {
splitNumber: spNum,
interval: _max / spNum,
max: _max,
axisLabel: {
show: false,
formatter: function(v) {
var _v = (v / _max * 100).toFixed(0);
return _v == 0 ? _v : _v + '%';
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
},
yAxis: [{
data: y_data,
axisLabel: {
fontSize: 8,
color: 'rgba(255,255,255,.7)'
},
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
show: false
}
}, {
show: false,
data: y_data,
axisLine: {
show: false
}
}],
series: [{
type: 'bar',
name: '财务',
stack: '2',
label: _label,
legendHoverLink: false,
barWidth: 7,
itemStyle: {
normal: {
color: '#FD9133'
},
emphasis: {
color: '#FD9133'
}
},
data: _data1
}, {
type: 'bar',
name: '村务',
stack: '2',
legendHoverLink: false,
barWidth: 20,
label: _label,
itemStyle: {
normal: {
color: '#2E8CFF'
},
emphasis: {
color: '#2E8CFF'
}
},
data: _data2
}, {
type: 'bar',
stack: '2',
name: '党务',
legendHoverLink: false,
barWidth: 20,
label: _label,
itemStyle: {
normal: {
color: '#37D2D4'
},
emphasis: {
color: '#37D2D4'
}
},
data: _data3
}, {
type: 'bar',
stack: '2',
name: '居务',
legendHoverLink: false,
barWidth: 20,
label: _label,
itemStyle: {
normal: {
color: '#19CA88'
},
emphasis: {
color: '#19CA88'
}
},
data: _data4
}, {
type: 'bar',
stack: '2',
name: '政务',
legendHoverLink: false,
barWidth: 20,
label: _label,
itemStyle: {
normal: {
color: '#0EFCFF'
},
emphasis: {
color: '#0EFCFF'
}
},
data: _data5
}]
};
yearsNumChart.setOption(option)
setInterval(function() {
yearsNumChart.clear()
yearsNumChart.setOption(option)
}, 120000)
},
// 关注内容区域占比
contentFn: function() {
var resArr = [{
name: '测试11',
value: 30
},
{
name: '测试22',
value: 50
},
{
name: '测试55',
value: 33
},
{
name: '测试66',
value: 80
},
]
var nameArr = []
var caiArr = []
var cunArr = []
var danArr = []
var junArr = []
var zhenArr = []
for (var i = 0; i < resArr.length; i++) {
nameArr.push(resArr[i].name)
caiArr.push(resArr[i].value)
cunArr.push(resArr[i].value)
danArr.push(resArr[i].value)
junArr.push(resArr[i].value)
zhenArr.push(resArr[i].value)
}
var contentChart = echarts.init(document.getElementById('contentId'));
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
x: '35%',
y: '0%',
data: ["财务", "村务", "党务", "居务", "政务"],
textStyle: {
color: "#fff",
fontSize: 8
},
itemWidth: 10,
itemHeight: 10,
},
calculable: true,
xAxis: [{
type: 'category',
data: nameArr,
axisLabel: {
interval: 0,
textStyle: {
fontSize: 8,
color: 'rgba(255,255,255,.7)',
}
},
"axisTick": { //y轴刻度线
"show": false
},
"axisLine": { //y轴
"show": false,
},
}],
yAxis: [{
type: 'value',
scale: true,
name: '单位：%',
nameTextStyle: {
color: 'rgba(255,255,255,.7)',
fontSize: 8
},
max: 100,
min: 0,
boundaryGap: [0.2, 0.2],
"axisTick": { //y轴刻度线
"show": false
},
"axisLine": { //y轴
"show": false,
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,.8)',
fontSize: 8
// opacity: 0.1,
}
},
splitLine: { //决定是否显示坐标中网格
show: true,
lineStyle: {
color: ['#fff'],
opacity: 0.2
}
},
},
{
type: 'value',
scale: true,
show: false,
// name: "销量额(万元)",
nameTextStyle: {
color: 'rgba(255,255,255,.2)',
},
max: 1,
min: 0,
boundaryGap: [0.2, 0.2],
"axisTick": { //y轴刻度线
"show": false
},
"axisLine": { //y轴
"show": false,
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,.2)',
// opacity: 0.1,
}
},
splitLine: { //决定是否显示坐标中网格
show: true,
lineStyle: {
color: ['#fff'],
opacity: 0.2
}
},
}
],
color: ['#0EFCFF', '#FD9133'],
grid: {
left: '5%',
right: '1%',
top: '25%',
bottom: '15%'
// containLabel: true
},
series: [{
barWidth: '10%',
name: '财务',
type: 'bar',
data: caiArr,
},
{
animationDuration: 2500,
barWidth: '20%',
name: '村务',
type: 'bar',
data: cunArr,
},
{
animationDuration: 2500,
barWidth: '20%',
name: '党务',
type: 'bar',
data: danArr,
},
{
animationDuration: 2500,
barWidth: '20%',
name: '居务',
type: 'bar',
data: junArr,
},
{
animationDuration: 2500,
barWidth: '20%',
name: '政务',
type: 'bar',
data: zhenArr,
}
]
};
contentChart.setOption(option)
setInterval(function() {
contentChart.clear()
contentChart.setOption(option)
}, 90000)
},
// 巡察
publicNumFn: function() {
var resArr = [{
name: '测试11',
value: 300
},
{
name: '测试22',
value: 500
},
{
name: '测试33',
value: 400
},
{
name: '测试44',
value: 350
},
{
name: '测试55',
value: 363
},
{
name: '测试66',
value: 800
},
]
var xunArr = []
var jingArr = []
var dateArr = []
for (var i = 0; i < resArr.length; i++) {
xunArr.push(resArr[i].value)
jingArr.push(resArr[i].value)
dateArr.push(resArr[i].name)
}
var publicNumChart = echarts.init(document.getElementById('publicNumId'));
var option = {
tooltip: {
trigger: 'axis'
},
legend: {
x: '35%',
y: '0%',
data: ['巡察', '警示'],
textStyle: {
color: "#fff",
fontSize: 8
},
itemWidth: 10,
itemHeight: 10,
},
calculable: true,
xAxis: [{
type: 'category',
data: dateArr,
axisLabel: {
interval: 0,
textStyle: {
fontSize: 8,
color: 'rgba(255,255,255,.7)',
}
},
"axisTick": { //y轴刻度线
"show": false
},
"axisLine": { //y轴
"show": false,
},
}],
yAxis: [{
type: 'value',
scale: true,
name: '单位：%',
nameTextStyle: {
color: 'rgba(255,255,255,.7)',
fontSize: 8
},
max: 1000,
min: 0,
boundaryGap: [0.2, 0.2],
"axisTick": { //y轴刻度线
"show": false
},
"axisLine": { //y轴
"show": false,
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,.8)',
fontSize: 8
// opacity: 0.1,
}
},
splitLine: { //决定是否显示坐标中网格
show: true,
lineStyle: {
color: ['#fff'],
opacity: 0.2
}
},
},
{
type: 'value',
scale: true,
show: false,
// name: "销量额(万元)",
nameTextStyle: {
color: 'rgba(255,255,255,.2)',
},
max: 1,
min: 0,
boundaryGap: [0.2, 0.2],
"axisTick": { //y轴刻度线
"show": false
},
"axisLine": { //y轴
"show": false,
},
axisLabel: {
textStyle: {
color: 'rgba(255,255,255,.2)',
// opacity: 0.1,
}
},
splitLine: { //决定是否显示坐标中网格
show: true,
lineStyle: {
color: ['#fff'],
opacity: 0.2
}
},
}
],
color: ['#2E8CFF', '#38EB70'],
grid: {
left: '5%',
right: '1%',
top: '25%',
bottom: '15%'
// containLabel: true
},
series: [{
animationDuration: 2500,
barWidth: '20%',
name: '巡察',
type: 'bar',
data: xunArr,
},
{
barWidth: '20%',
name: '警示',
type: 'bar',
data: jingArr,
}
],
animationEasing: 'cubicOut'
};
publicNumChart.setOption(option)
setInterval(function() {
publicNumChart.clear()
publicNumChart.setOption(option)
}, 60000)
}
}
var start = new apiFn()
start.Init()
})</script>
2.CSS
.main_con {
position: absolute;
width: 97%;
height: 95%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto
}
.main_top {
width: 100%;
height: 37%
}
.main_top_left {
float: left;
width: 17.3%;
height: 100%
}
.main_top_left_top {
position: relative;
width: 100%;
height: 46%
}
.main_top_left_bottom {
margin-top: 4%
}
.main_top_left_bottom_num {
width: 100%
}
.main_top_left_bottom_num span {
float: left;
display: block;
font-size: .65vw
}
.main_top_left_bottom_num_list {
float: left;
width: 8%;
height: 1.4vw;
line-height: 1.4vw;
margin-left: .2vw;
text-indent: .4vw;
font-size: .8vw;
color: #fff;
margin-top: .2vw;
background: #37d2d4
}
.main_top_left_bottom_bar {
float: left;
width: 100%;
height: .6vw;
line-height: 0;
margin-top: .6vw
}
.main_top_left_bottom_bar span {
position: relative;
float: left;
display: block;
font-size: .65vw;
top: -.15vw;
-webkit-transform-origin-x: 0;
transform: scale(.7);
-webkit-transform: scale(.7)
}
.main_top_left_bottom_bar .bar_num {
color: #0efcff;
margin-left: 3%;
-webkit-transform-origin-x: 0;
transform: scale(.7);
-webkit-transform: scale(.7)
}
.bar_father {
float: left;
position: relative;
width: 75%;
background: rgba(31, 103, 163, .2);
height: 100%;
margin-left: 3%;
border-radius: 90px
}
.bar_child {
position: absolute;
left: 0;
width: 0%;
height: 100%;
border-radius: 90px;
transition: all 2s;
background-image: linear-gradient(90deg, #3E94CD 0%, #56D4F1 49%, #38E1E1 99%)
}
.main_top_left_top img {
position: absolute;
width: 100%;
height: 100%
}
.main_top_left_top_title {
text-align: center;
color: #0efcff;
font-size: .75vw;
padding-top: .2vw
}
.main_top_left_top_con {
width: 92%;
height: 71%;
margin: auto;
margin-top: 3%;
color: #fff;
font-size: .7vw
}
.main_top_left_top_con span {
display: inline-block;
margin-top: .4vw;
text-indent: 0
}
.main_top_left_top_con_left {
float: left;
height: 48%;
width: 49%;
text-align: center;
margin-top: 1.5%
}
.main_top_left_t_c_l_left,
.main_top_left_t_c_l_right,
.main_top_left_t_c_r_right,
.main_top_left_t_c_r_left {
float: left;
width: 48%;
height: 100%;
text-align: center;
background: #fd9133;
font-size: .7vw
}
.main_top_left_t_c_l_right,
.main_top_left_t_c_r_right {
background: #f6d10e;
margin-left: 4%
}
.main_top_left_t_c_r_right {
background: #f6580e
}
.main_top_left_t_c_r_left {
background: #2e8cff
}
.main_top_left_top_con_left .main_top_left_c_l_n {
transform: scale(.8);
-webkit-transform: scale(.8)
}
.main_top_left_top_con_left p {
transform: scale(.8);
-webkit-transform: scale(.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.main_top_left_top_con_right {
float: right;
height: 48%;
width: 49%;
text-align: center;
margin-top: 1.5%
}
.main_top_left_top_con_right .main_top_left_c_l_n {
transform: scale(.8);
-webkit-transform: scale(.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.main_top_left_top_con_right p {
transform: scale(.8);
-webkit-transform: scale(.8);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.main_top_left_top_con_right2 p {
margin-top: -7%
}
.main_top_left_top_con_list {
float: left;
height: 48%;
width: 32%;
text-align: center;
margin-left: 2%
}
.main_top_left_top_con_list .main_top_left_c_l_n {
transform: scale(.8);
-webkit-transform: scale(.8)
}
.main_top_left_top_con_list p {
transform: scale(.8);
-webkit-transform: scale(.8)
}
.main_top_left_top_con_list:nth-child(1) {
background: #37d2d4;
margin-left: 0
}
.main_top_left_top_con_list:nth-child(2) {
background: #19ca88
}
.main_top_left_top_con_list:nth-child(3) {
background: #858ff8
}
.main_top_middle {
float: left;
width: 63%;
height: 100%;
margin-left: 1.2%
}
.main_top_middle_top_title {
position: relative;
width: 100%;
text-align: center;
font-size: 1.7vw;
font-weight: 700;
color: #0efcff;
height: 14%
}
.main_top_middle_top_title .title_bg {
position: absolute;
left: 7%;
top: -20%;
width: 86%;
height: 140%
}
.title_web {
position: absolute;
right: -.8%;
top: 0;
padding: .5% 2%;
font-size: .7vw;
color: #0efcff;
border: 1px solid #0efcff;
-webkit-transform-origin-x: 0;
transform: scale(.9);
-webkit-transform: scale(.9)
}
.title_admin {
position: absolute;
left: 0;
top: 0;
padding: .5% 2%;
font-size: .7vw;
color: #0efcff;
border: 1px solid #0efcff;
-webkit-transform-origin-x: 0;
transform: scale(.9);
-webkit-transform: scale(.9)
}
.main_top_middle_num_title {
float: left;
color: #0efcff;
font-size: 1.5vw;
margin-left: 13%;
line-height: 4.5vw;
width: 18%;
margin-top: .5vw
}
.main_top_middle_num {
float: left;
width: 55%;
height: 23%;
margin: .7% auto;
margin-top: 1.5%
}
.main_top_middle_num_list {
position: relative;
float: left;
height: 100%;
width: 12%;
margin-left: 2.6%;
font-size: 2vw;
font-weight: 700;
color: #0efcff;
line-height: 240%
}
.main_top_middle_num_list p {
text-align: center
}
.main_top_middle_num_list:nth-child(1) {
margin-left: 0
}
.main_top_middle_num_list img {
position: absolute;
width: 100%;
height: 100%
}
.main_top_middle_bottom {
float: left;
width: 100%;
height: 49.8%;
margin-top: .5%
}
.main_top_middle_bottom_echarts {
position: relative;
float: left;
width: 49%;
height: 100%
}
.main_top_middle_bottom_echarts_right {
float: right
}
.main_top_middle_bottom_echarts img {
position: absolute;
width: 100%;
height: 100%
}
.main_top_echarts_con {
width: 92%;
height: 82%;
margin: 2% auto
}
.main_top_echarts_con_title {
font-size: .8vw;
color: #0efcff
}
.main_top_echarts_pie {
width: 100%;
height: 90%
}
.main_top_right {
float: right
}
.main_top_right .main_top_left_top_con_left {
float: left;
height: 48%;
width: 49%;
background: #37d2d4
}
.main_top_right .main_top_left_top_con_right {
float: right;
height: 48%;
width: 49%;
background: #19ca88
}
.main_top_right .main_top_left_top_con_list {
float: left;
height: 48%;
width: 32%;
margin-left: 2%;
margin-top: 1.5%
}
.main_top_right .main_top_left_top_con_list:nth-child(3) {
background: #858ff8;
margin-left: 0
}
.main_top_right .main_top_left_top_con_list:nth-child(4) {
background: #2e8cff
}
.main_top_right .main_top_left_top_con_list:nth-child(5) {
background: #fd9133
}
.main_middle {
height: 7.1%;
width: 100%
}
.main_middle_list {
position: relative;
float: left;
width: 18.5%;
height: 100%;
background: rgba(11, 76, 151, .1);
margin-left: 1.875%;
box-shadow: 1px 2px 10px 1px rgba(14, 252, 255, .53), inset 5px 4px 100px 1px rgba(14, 252, 255, .34)
}
.main_middle_list img {
position: absolute;
width: 100%;
height: 100%
}
.main_middle_list:nth-child(1) {
margin-left: 0
}
.main_list_title {
font-size: .75vw;
color: #0efcff;
text-indent: .8vw;
padding-top: .5vw
}
.main_middle_list span {
display: inline-block;
width: 100%;
font-size: 1.4vw;
font-weight: 700;
color: #fff;
text-align: center;
letter-spacing: .2vw;
margin-top: -.5vw
}
.main_bottom {
height: 55.9%;
width: 100%
}
.main_bottom_top {
float: left;
width: 100%;
height: 36.5%;
margin-top: 1.5%
}
.main_bottom_top_list {
position: relative;
float: left;
width: 32%;
height: 100%;
margin-left: 2%
}
.main_bottom_top_list:nth-child(1) {
margin-left: 0
}
.main_bottom_top_list img {
position: absolute;
width: 100%;
height: 100%
}
.main_bottom_t_l_title {
z-index: 80;
position: relative;
width: 100%;
padding-top: 1.6vw;
font-size: .8vw;
color: #fff;
text-indent: 3.2vw
}
.main_bottom_t_l_chart {
z-index: 77;
position: relative;
width: 90%;
height: 84%;
margin: auto;
margin-top: -5%
}
.main_bottom_t_l_con {
z-index: 77;
position: relative;
width: 92%;
height: 60%;
margin: auto;
margin-top: 3%
}
.main_bottom_t_l_main,
.main_bottom_t_l_main2 {
width: 100%
}
.main_bottom_t_l_main_list {
font-size: .7vw;
line-height: 1.6vw;
height: 1.6vw;
color: #fff
}
.main_bottom_t_l_main2 .main_bottom_t_l_main_list {
font-size: .7vw;
line-height: 1.6vw;
height: 1.6vw;
color: #fff
}
.main_bottom_t_list_title {
float: left;
width: 70%;
height: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis
}
.main_bottom_t_list_time {
float: left;
width: 30%;
height: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right
}
.main_bottom_bottom {
float: left;
width: 100%;
height: 54%;
margin-top: 1%
}
.main_bottom_b_left,
.main_bottom_b_right {
position: relative;
float: left;
width: 17.3%;
height: 100%
}
.main_bottom_b_left img {
position: absolute;
width: 100%;
height: 100%
}
.main_bottom_b_middle1,
.main_bottom_b_middle2 {
position: relative;
float: left;
width: 30%;
height: 100%;
margin-left: 1.8%
}
.main_bottom_b_right {
margin-left: 1.8%
}
.main_bottom_b_right img {
position: absolute;
width: 100%;
height: 100%
}
.main_bottom_b_middle1 img {
position: absolute;
width: 100%;
height: 100%
}
.main_bottom_b_middle2 img {
position: absolute;
width: 100%;
height: 100%
}
.main_bottom_b_title {
font-size: .8vw;
text-align: center;
color: #0efcff;
padding-top: .3vw
}
.main_bottom_b_con {
width: 90%;
height: 75%;
margin: auto;
margin-top: 8%
}
.main_bottom_b_con2 {
height: 70%
}
3.JavaScript
function numInit() {
$('.counter-value').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2500,
easing: 'swing',
step: function(now) {
$(this).text(now.toFixed(0));
}
});
});
}
function numInit1() {
$('.counter-value1').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2500,
easing: 'swing',
step: function(now) {
$(this).text(now.toFixed(1));
}
});
});
}
function numInit2() {
$('.counter-value2').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2500,
easing: 'swing',
step: function(now) {
$(this).text(now.toFixed(2));
}
});
});
}
numInit();
numInit1();
numInit2();
4.Echarts
/* -----------------------------------------------
/* Author : Vincent Garreau - vincentgarreau.com
/* MIT license: http://opensource.org/licenses/MIT
/* Demo / Generator : vincentgarreau.com/particles.js
/* GitHub : github.com/VincentGarreau/particles.js
/* How to use? : Check the GitHub README
/* v2.0.0
/* ----------------------------------------------- */
function hexToRgb(e) {
var a = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
e = e.replace(a, function(e, a, t,) {
return a + a + t + t + i + i
});
var t = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);
return t ? {
r: parseInt(t[1], 16),
g: parseInt(t[2], 16),
b: parseInt(t[3], 16)
} : null
}
function clamp(e, a,) {
return Math.min(Math.max(e, a), t)
}
function isInArray(e,) {
return a.indexOf(e) > -1
}
var pJS = function(e,) {
var t = document.querySelector("#" + e + " > .particles-js-canvas-el");
this.pJS = {
canvas: {
el: t,
w: t.offsetWidth,
h: t.offsetHeight
},
particles: {
number: {
value: 400,
density: {
enable: !0,
value_area: 800
}
},
color: {
value: "#fff"
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#ff0000"
},
polygon: {
nb_sides: 5
},
image: {
src: "",
width: 100,
height: 100
}
},
opacity: {
value: 1,
random: !1,
anim: {
enable: !1,
speed: 2,
opacity_min: 0,
sync: !1
}
},
size: {
value: 20,
random: !1,
anim: {
enable: !1,
speed: 20,
size_min: 0,
sync: !1
}
},
line_linked: {
enable: !0,
distance: 100,
color: "#fff",
opacity: 1,
width: 1
},
move: {
enable: !0,
speed: 2,
direction: "none",
random: !1,
straight: !1,
out_mode: "out",
bounce: !1,
attract: {
enable: !1,
rotateX: 3e3,
rotateY: 3e3
}
},
array: []
},
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: !0,
mode: "grab"
},
onclick: {
enable: !0,
mode: "push"
},
resize: !0
},
modes: {
grab: {
distance: 100,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 200,
size: 80,
duration: .4
},
repulse: {
distance: 200,
duration: .4
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
},
mouse: {}
},
retina_detect: !1,
fn: {
interact: {},
modes: {},
vendors: {}
},
tmp: {}
};
var i = this.pJS;
a && Object.deepExtend(i, a), i.tmp.obj = {
size_value: i.particles.size.value,
size_anim_speed: i.particles.size.anim.speed,
move_speed: i.particles.move.speed,
line_linked_distance: i.particles.line_linked.distance,
line_linked_width: i.particles.line_linked.width,
mode_grab_distance: i.interactivity.modes.grab.distance,
mode_bubble_distance: i.interactivity.modes.bubble.distance,
mode_bubble_size: i.interactivity.modes.bubble.size,
mode_repulse_distance: i.interactivity.modes.repulse.distance
}, i.fn.retinaInit = function() {
i.retina_detect && window.devicePixelRatio > 1 ? (i.canvas.pxratio = window.devicePixelRatio, i.tmp.retina = !0) : (i.canvas.pxratio = 1, i.tmp.retina = !1), i.canvas.w = i.canvas.el.offsetWidth * i.canvas.pxratio, i.canvas.h = i.canvas.el.offsetHeight * i.canvas.pxratio, i.particles.size.value = i.tmp.obj.size_value * i.canvas.pxratio, i.particles.size.anim.speed = i.tmp.obj.size_anim_speed * i.canvas.pxratio, i.particles.move.speed = i.tmp.obj.move_speed * i.canvas.pxratio, i.particles.line_linked.distance = i.tmp.obj.line_linked_distance * i.canvas.pxratio, i.interactivity.modes.grab.distance = i.tmp.obj.mode_grab_distance * i.canvas.pxratio, i.interactivity.modes.bubble.distance = i.tmp.obj.mode_bubble_distance * i.canvas.pxratio, i.particles.line_linked.width = i.tmp.obj.line_linked_width * i.canvas.pxratio, i.interactivity.modes.bubble.size = i.tmp.obj.mode_bubble_size * i.canvas.pxratio, i.interactivity.modes.repulse.distance = i.tmp.obj.mode_repulse_distance * i.canvas.pxratio
}, i.fn.canvasInit = function() {
i.canvas.ctx = i.canvas.el.getContext("2d")
}, i.fn.canvasSize = function() {
i.canvas.el.width = i.canvas.w, i.canvas.el.height = i.canvas.h, i && i.interactivity.events.resize && window.addEventListener("resize", function() {
i.canvas.w = i.canvas.el.offsetWidth, i.canvas.h = i.canvas.el.offsetHeight, i.tmp.retina && (i.canvas.w *= i.canvas.pxratio, i.canvas.h *= i.canvas.pxratio), i.canvas.el.width = i.canvas.w, i.canvas.el.height = i.canvas.h, i.particles.move.enable || (i.fn.particlesEmpty(), i.fn.particlesCreate(), i.fn.particlesDraw(), i.fn.vendors.densityAutoParticles()), i.fn.vendors.densityAutoParticles()
})
}, i.fn.canvasPaint = function() {
i.canvas.ctx.fillRect(0, 0, i.canvas.w, i.canvas.h)
}, i.fn.canvasClear = function() {
i.canvas.ctx.clearRect(0, 0, i.canvas.w, i.canvas.h)
}, i.fn.particle = function(e, a,) {
if (this.radius = (i.particles.size.random ? Math.random() : 1) * i.particles.size.value, i.particles.size.anim.enable && (this.size_status = !1, this.vs = i.particles.size.anim.speed / 100, i.particles.size.anim.sync || (this.vs = this.vs * Math.random())), this.x = t ? t.x : Math.random() * i.canvas.w, this.y = t ? t.y : Math.random() * i.canvas.h, this.x > i.canvas.w - 2 * this.radius ? this.x = this.x - this.radius : this.x < 2 * this.radius && (this.x = this.x + this.radius), this.y > i.canvas.h - 2 * this.radius ? this.y = this.y - this.radius : this.y < 2 * this.radius && (this.y = this.y + this.radius), i.particles.move.bounce && i.fn.vendors.checkOverlap(this, t), this.color = {}, "object" == typeof e.value)
if (e.value instanceof Array) {
var s = e.value[Math.floor(Math.random() * i.particles.color.value.length)];
this.color.rgb = hexToRgb(s)
} else void 0 != e.value.r && void 0 != e.value.g && void 0 != e.value.b && (this.color.rgb = {
r: e.value.r,
g: e.value.g,
b: e.value.b
}), void 0 != e.value.h && void 0 != e.value.s && void 0 != e.value.l && (this.color.hsl = {
h: e.value.h,
s: e.value.s,
l: e.value.l
});
else "random" == e.value ? this.color.rgb = {
r: Math.floor(256 * Math.random()) + 0,
g: Math.floor(256 * Math.random()) + 0,
b: Math.floor(256 * Math.random()) + 0
} : "string" == typeof e.value && (this.color = e, this.color.rgb = hexToRgb(this.color.value));
this.opacity = (i.particles.opacity.random ? Math.random() : 1) * i.particles.opacity.value, i.particles.opacity.anim.enable && (this.opacity_status = !1, this.vo = i.particles.opacity.anim.speed / 100, i.particles.opacity.anim.sync || (this.vo = this.vo * Math.random()));
var n = {};
switch (i.particles.move.direction) {
case "top":
n = {
x: 0,
y: -1
};
break;
case "top-right":
n = {
x: .5,
y: -.5
};
break;
case "right":
n = {
x: 1,
y: -0
};
break;
case "bottom-right":
n = {
x: .5,
y: .5
};
break;
case "bottom":
n = {
x: 0,
y: 1
};
break;
case "bottom-left":
n = {
x: -.5,
y: 1
};
break;
case "left":
n = {
x: -1,
y: 0
};
break;
case "top-left":
n = {
x: -.5,
y: -.5
};
break;
default:
n = {
x: 0,
y: 0
}
}
i.particles.move.straight ? (this.vx = n.x, this.vy = n.y, i.particles.move.random && (this.vx = this.vx * Math.random(), this.vy = this.vy * Math.random())) : (this.vx = n.x + Math.random() - .5, this.vy = n.y + Math.random() - .5), this.vx_i = this.vx, this.vy_i = this.vy;
var r = i.particles.shape.type;
if ("object" == typeof r) {
if (r instanceof Array) {
var c = r[Math.floor(Math.random() * r.length)];
this.shape = c
}
} else this.shape = r;
if ("image" == this.shape) {
var o = i.particles.shape;
this.img = {
src: o.image.src,
ratio: o.image.width / o.image.height
}, this.img.ratio || (this.img.ratio = 1), "svg" == i.tmp.img_type && void 0 != i.tmp.source_svg && (i.fn.vendors.createSvgImg(this), i.tmp.pushing && (this.img.loaded = !1))
}
}, i.fn.particle.prototype.draw = function() {
function e() {
i.canvas.ctx.drawImage(r, a.x - t, a.y - t, 2 * t, 2 * t / a.img.ratio)
}
var a = this;
if (void 0 != a.radius_bubble) var t = a.radius_bubble;
else var t = a.radius;
if (void 0 != a.opacity_bubble) var s = a.opacity_bubble;
else var s = a.opacity;
if (a.color.rgb) var n = "rgba(" + a.color.rgb.r + "," + a.color.rgb.g + "," + a.color.rgb.b + "," + s + ")";
else var n = "hsla(" + a.color.hsl.h + "," + a.color.hsl.s + "%," + a.color.hsl.l + "%," + s + ")";
switch (i.canvas.ctx.fillStyle = n, i.canvas.ctx.beginPath(), a.shape) {
case "circle":
i.canvas.ctx.arc(a.x, a.y, t, 0, 2 * Math.PI, !1);
break;
case "edge":
i.canvas.ctx.rect(a.x - t, a.y - t, 2 * t, 2 * t);
break;
case "triangle":
i.fn.vendors.drawShape(i.canvas.ctx, a.x - t, a.y + t / 1.66, 2 * t, 3, 2);
break;
case "polygon":
i.fn.vendors.drawShape(i.canvas.ctx, a.x - t / (i.particles.shape.polygon.nb_sides / 3.5), a.y - t / .76, 2.66 * t / (i.particles.shape.polygon.nb_sides / 3), i.particles.shape.polygon.nb_sides, 1);
break;
case "star":
i.fn.vendors.drawShape(i.canvas.ctx, a.x - 2 * t / (i.particles.shape.polygon.nb_sides / 4), a.y - t / 1.52, 2 * t * 2.66 / (i.particles.shape.polygon.nb_sides / 3), i.particles.shape.polygon.nb_sides, 2);
break;
case "image":
if ("svg" == i.tmp.img_type) var r = a.img.obj;
else var r = i.tmp.img_obj;
r && e()
}
i.canvas.ctx.closePath(), i.particles.shape.stroke.width > 0 && (i.canvas.ctx.strokeStyle = i.particles.shape.stroke.color, i.canvas.ctx.lineWidth = i.particles.shape.stroke.width, i.canvas.ctx.stroke()), i.canvas.ctx.fill()
}, i.fn.particlesCreate = function() {
for (var e = 0; e < i.particles.number.value; e++) i.particles.array.push(new i.fn.particle(i.particles.color, i.particles.opacity.value))
}, i.fn.particlesUpdate = function() {
for (var e = 0; e < i.particles.array.length; e++) {
var a = i.particles.array[e];
if (i.particles.move.enable) {
var t = i.particles.move.speed / 2;
a.x += a.vx * t, a.y += a.vy * t
}
if (i.particles.opacity.anim.enable && (1 == a.opacity_status ? (a.opacity >= i.particles.opacity.value && (a.opacity_status = !1), a.opacity += a.vo) : (a.opacity <= i.particles.opacity.anim.opacity_min && (a.opacity_status = !0), a.opacity -= a.vo), a.opacity < 0 && (a.opacity = 0)), i.particles.size.anim.enable && (1 == a.size_status ? (a.radius >= i.particles.size.value && (a.size_status = !1), a.radius += a.vs) : (a.radius <= i.particles.size.anim.size_min && (a.size_status = !0), a.radius -= a.vs), a.radius < 0 && (a.radius = 0)), "bounce" == i.particles.move.out_mode) var s = {
x_left: a.radius,
x_right: i.canvas.w,
y_top: a.radius,
y_bottom: i.canvas.h
};
else var s = {
x_left: -a.radius,
x_right: i.canvas.w + a.radius,
y_top: -a.radius,
y_bottom: i.canvas.h + a.radius
};
switch (a.x - a.radius > i.canvas.w ? (a.x = s.x_left, a.y = Math.random() * i.canvas.h) : a.x + a.radius < 0 && (a.x = s.x_right, a.y = Math.random() * i.canvas.h), a.y - a.radius > i.canvas.h ? (a.y = s.y_top, a.x = Math.random() * i.canvas.w) : a.y + a.radius < 0 && (a.y = s.y_bottom, a.x = Math.random() * i.canvas.w), i.particles.move.out_mode) {
case "bounce":
a.x + a.radius > i.canvas.w ? a.vx = -a.vx : a.x - a.radius < 0 && (a.vx = -a.vx), a.y + a.radius > i.canvas.h ? a.vy = -a.vy : a.y - a.radius < 0 && (a.vy = -a.vy)
}
if (isInArray("grab", i.interactivity.events.onhover.mode) && i.fn.modes.grabParticle(a), (isInArray("bubble", i.interactivity.events.onhover.mode) || isInArray("bubble", i.interactivity.events.onclick.mode)) && i.fn.modes.bubbleParticle(a), (isInArray("repulse", i.interactivity.events.onhover.mode) || isInArray("repulse", i.interactivity.events.onclick.mode)) && i.fn.modes.repulseParticle(a), i.particles.line_linked.enable || i.particles.move.attract.enable)
for (var n = e + 1; n < i.particles.array.length; n++) {
var r = i.particles.array[n];
i.particles.line_linked.enable && i.fn.interact.linkParticles(a, r), i.particles.move.attract.enable && i.fn.interact.attractParticles(a, r), i.particles.move.bounce && i.fn.interact.bounceParticles(a, r)
}
}
}, i.fn.particlesDraw = function() {
i.canvas.ctx.clearRect(0, 0, i.canvas.w, i.canvas.h), i.fn.particlesUpdate();
for (var e = 0; e < i.particles.array.length; e++) {
var a = i.particles.array[e];
a.draw()
}
}, i.fn.particlesEmpty = function() {
i.particles.array = []
}, i.fn.particlesRefresh = function() {
cancelRequestAnimFrame(i.fn.checkAnimFrame), cancelRequestAnimFrame(i.fn.drawAnimFrame), i.tmp.source_svg = void 0, i.tmp.img_obj = void 0, i.tmp.count_svg = 0, i.fn.particlesEmpty(), i.fn.canvasClear(), i.fn.vendors.start()
}, i.fn.interact.linkParticles = function(e,) {
var t = e.x - a.x,
s = e.y - a.y,
n = Math.sqrt(t * t + s * s);
if (n <= i.particles.line_linked.distance) {
var r = i.particles.line_linked.opacity - n / (1 / i.particles.line_linked.opacity) / i.particles.line_linked.distance;
if (r > 0) {
var c = i.particles.line_linked.color_rgb_line;
i.canvas.ctx.strokeStyle = "rgba(" + c.r + "," + c.g + "," + c.b + "," + r + ")", i.canvas.ctx.lineWidth = i.particles.line_linked.width, i.canvas.ctx.beginPath(), i.canvas.ctx.moveTo(e.x, e.y), i.canvas.ctx.lineTo(a.x, a.y), i.canvas.ctx.stroke(), i.canvas.ctx.closePath()
}
}
}, i.fn.interact.attractParticles = function(e,) {
var t = e.x - a.x,
s = e.y - a.y,
n = Math.sqrt(t * t + s * s);
if (n <= i.particles.line_linked.distance) {
var r = t / (1e3 * i.particles.move.attract.rotateX),
c = s / (1e3 * i.particles.move.attract.rotateY);
e.vx -= r, e.vy -= c, a.vx += r, a.vy += c
}
}, i.fn.interact.bounceParticles = function(e,) {
var t = e.x - a.x,
i = e.y - a.y,
s = Math.sqrt(t * t + i * i),
n = e.radius + a.radius;
n >= s && (e.vx = -e.vx, e.vy = -e.vy, a.vx = -a.vx, a.vy = -a.vy)
}, i.fn.modes.pushParticles = function(e,) {
i.tmp.pushing = !0;
for (var t = 0; e > t; t++) i.particles.array.push(new i.fn.particle(i.particles.color, i.particles.opacity.value, {
x: a ? a.pos_x : Math.random() * i.canvas.w,
y: a ? a.pos_y : Math.random() * i.canvas.h
})), t == e - 1 && (i.particles.move.enable || i.fn.particlesDraw(), i.tmp.pushing = !1)
}, i.fn.modes.removeParticles = function(e) {
i.particles.array.splice(0, e), i.particles.move.enable || i.fn.particlesDraw()
}, i.fn.modes.bubbleParticle = function(e) {
function a() {
e.opacity_bubble = e.opacity, e.radius_bubble = e.radius
}
function t(a, t, s, n,) {
if (a != t)
if (i.tmp.bubble_duration_end) {
if (void 0 != s) {
var o = n - p * (n - a) / i.interactivity.modes.bubble.duration,
l = a - o;
d = a + l, "size" == c && (e.radius_bubble = d), "opacity" == c && (e.opacity_bubble = d)
}
} else if (r <= i.interactivity.modes.bubble.distance) {
if (void 0 != s) var v = s;
else var v = n;
if (v != a) {
var d = n - p * (n - a) / i.interactivity.modes.bubble.duration;
"size" == c && (e.radius_bubble = d), "opacity" == c && (e.opacity_bubble = d)
}
} else "size" == c && (e.radius_bubble = void 0), "opacity" == c && (e.opacity_bubble = void 0)
}
if (i.interactivity.events.onhover.enable && isInArray("bubble", i.interactivity.events.onhover.mode)) {
var s = e.x - i.interactivity.mouse.pos_x,
n = e.y - i.interactivity.mouse.pos_y,
r = Math.sqrt(s * s + n * n),
c = 1 - r / i.interactivity.modes.bubble.distance;
if (r <= i.interactivity.modes.bubble.distance) {
if (c >= 0 && "mousemove" == i.interactivity.status) {
if (i.interactivity.modes.bubble.size != i.particles.size.value)
if (i.interactivity.modes.bubble.size > i.particles.size.value) {
var o = e.radius + i.interactivity.modes.bubble.size * c;
o >= 0 && (e.radius_bubble = o)
} else {
var l = e.radius - i.interactivity.modes.bubble.size,
o = e.radius - l * c;
o > 0 ? e.radius_bubble = o : e.radius_bubble = 0
}
if (i.interactivity.modes.bubble.opacity != i.particles.opacity.value)
if (i.interactivity.modes.bubble.opacity > i.particles.opacity.value) {
var v = i.interactivity.modes.bubble.opacity * c;
v > e.opacity && v <= i.interactivity.modes.bubble.opacity && (e.opacity_bubble = v)
} else {
var v = e.opacity - (i.particles.opacity.value - i.interactivity.modes.bubble.opacity) * c;
v < e.opacity && v >= i.interactivity.modes.bubble.opacity && (e.opacity_bubble = v)
}
}
} else a();
"mouseleave" == i.interactivity.status && a()
} else if (i.interactivity.events.onclick.enable && isInArray("bubble", i.interactivity.events.onclick.mode)) {
if (i.tmp.bubble_clicking) {
var s = e.x - i.interactivity.mouse.click_pos_x,
n = e.y - i.interactivity.mouse.click_pos_y,
r = Math.sqrt(s * s + n * n),
p = ((new Date).getTime() - i.interactivity.mouse.click_time) / 1e3;
p > i.interactivity.modes.bubble.duration && (i.tmp.bubble_duration_end = !0), p > 2 * i.interactivity.modes.bubble.duration && (i.tmp.bubble_clicking = !1, i.tmp.bubble_duration_end = !1)
}
i.tmp.bubble_clicking && (t(i.interactivity.modes.bubble.size, i.particles.size.value, e.radius_bubble, e.radius, "size"), t(i.interactivity.modes.bubble.opacity, i.particles.opacity.value, e.opacity_bubble, e.opacity, "opacity"))
}
}, i.fn.modes.repulseParticle = function(e) {
function a() {
var a = Math.atan2(d, p);
if (e.vx = u * Math.cos(a), e.vy = u * Math.sin(a), "bounce" == i.particles.move.out_mode) {
var t = {
x: e.x + e.vx,
y: e.y + e.vy
};
t.x + e.radius > i.canvas.w ? e.vx = -e.vx : t.x - e.radius < 0 && (e.vx = -e.vx), t.y + e.radius > i.canvas.h ? e.vy = -e.vy : t.y - e.radius < 0 && (e.vy = -e.vy)
}
}
if (i.interactivity.events.onhover.enable && isInArray("repulse", i.interactivity.events.onhover.mode) && "mousemove" == i.interactivity.status) {
var t = e.x - i.interactivity.mouse.pos_x,
s = e.y - i.interactivity.mouse.pos_y,
n = Math.sqrt(t * t + s * s),
r = {
x: t / n,
y: s / n
},
c = i.interactivity.modes.repulse.distance,
o = 100,
l = clamp(1 / c * (-1 * Math.pow(n / c, 2) + 1) * c * o, 0, 50),
v = {
x: e.x + r.x * l,
y: e.y + r.y * l
};
"bounce" == i.particles.move.out_mode ? (v.x - e.radius > 0 && v.x + e.radius < i.canvas.w && (e.x = v.x), v.y - e.radius > 0 && v.y + e.radius < i.canvas.h && (e.y = v.y)) : (e.x = v.x, e.y = v.y)
} else if (i.interactivity.events.onclick.enable && isInArray("repulse", i.interactivity.events.onclick.mode))
if (i.tmp.repulse_finish || (i.tmp.repulse_count++, i.tmp.repulse_count == i.particles.array.length && (i.tmp.repulse_finish = !0)), i.tmp.repulse_clicking) {
var c = Math.pow(i.interactivity.modes.repulse.distance / 6, 3),
p = i.interactivity.mouse.click_pos_x - e.x,
d = i.interactivity.mouse.click_pos_y - e.y,
m = p * p + d * d,
u = -c / m * 1;
c >= m && a()
} else 0 == i.tmp.repulse_clicking && (e.vx = e.vx_i, e.vy = e.vy_i)
}, i.fn.modes.grabParticle = function(e) {
if (i.interactivity.events.onhover.enable && "mousemove" == i.interactivity.status) {
var a = e.x - i.interactivity.mouse.pos_x,
t = e.y - i.interactivity.mouse.pos_y,
s = Math.sqrt(a * a + t * t);
if (s <= i.interactivity.modes.grab.distance) {
var n = i.interactivity.modes.grab.line_linked.opacity - s / (1 / i.interactivity.modes.grab.line_linked.opacity) / i.interactivity.modes.grab.distance;
if (n > 0) {
var r = i.particles.line_linked.color_rgb_line;
i.canvas.ctx.strokeStyle = "rgba(" + r.r + "," + r.g + "," + r.b + "," + n + ")", i.canvas.ctx.lineWidth = i.particles.line_linked.width, i.canvas.ctx.beginPath(), i.canvas.ctx.moveTo(e.x, e.y), i.canvas.ctx.lineTo(i.interactivity.mouse.pos_x, i.interactivity.mouse.pos_y), i.canvas.ctx.stroke(), i.canvas.ctx.closePath()
}
}
}
}, i.fn.vendors.eventsListeners = function() {
"window" == i.interactivity.detect_on ? i.interactivity.el = window : i.interactivity.el = i.canvas.el, (i.interactivity.events.onhover.enable || i.interactivity.events.onclick.enable) && (i.interactivity.el.addEventListener("mousemove", function(e) {
if (i.interactivity.el == window) var a = e.clientX,
t = e.clientY;
else var a = e.offsetX || e.clientX,
t = e.offsetY || e.clientY;
i.interactivity.mouse.pos_x = a, i.interactivity.mouse.pos_y = t, i.tmp.retina && (i.interactivity.mouse.pos_x *= i.canvas.pxratio, i.interactivity.mouse.pos_y *= i.canvas.pxratio), i.interactivity.status = "mousemove"
}), i.interactivity.el.addEventListener("mouseleave", function(e) {
i.interactivity.mouse.pos_x = null, i.interactivity.mouse.pos_y = null, i.interactivity.status = "mouseleave"
})), i.interactivity.events.onclick.enable && i.interactivity.el.addEventListener("click", function() {
if (i.interactivity.mouse.click_pos_x = i.interactivity.mouse.pos_x, i.interactivity.mouse.click_pos_y = i.interactivity.mouse.pos_y, i.interactivity.mouse.click_time = (new Date).getTime(), i.interactivity.events.onclick.enable) switch (i.interactivity.events.onclick.mode) {
case "push":
i.particles.move.enable ? i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb, i.interactivity.mouse) : 1 == i.interactivity.modes.push.particles_nb ? i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb, i.interactivity.mouse) : i.interactivity.modes.push.particles_nb > 1 && i.fn.modes.pushParticles(i.interactivity.modes.push.particles_nb);
break;
case "remove":
i.fn.modes.removeParticles(i.interactivity.modes.remove.particles_nb);
break;
case "bubble":
i.tmp.bubble_clicking = !0;
break;
case "repulse":
i.tmp.repulse_clicking = !0, i.tmp.repulse_count = 0, i.tmp.repulse_finish = !1, setTimeout(function() {
i.tmp.repulse_clicking = !1
}, 1e3 * i.interactivity.modes.repulse.duration)
}
})
}, i.fn.vendors.densityAutoParticles = function() {
if (i.particles.number.density.enable) {
var e = i.canvas.el.width * i.canvas.el.height / 1e3;
i.tmp.retina && (e /= 2 * i.canvas.pxratio);
var a = e * i.particles.number.value / i.particles.number.density.value_area,
t = i.particles.array.length - a;
0 > t ? i.fn.modes.pushParticles(Math.abs(t)) : i.fn.modes.removeParticles(t)
}
}, i.fn.vendors.checkOverlap = function(e,) {
for (var t = 0; t < i.particles.array.length; t++) {
var s = i.particles.array[t],
n = e.x - s.x,
r = e.y - s.y,
c = Math.sqrt(n * n + r * r);
c <= e.radius + s.radius && (e.x = a ? a.x : Math.random() * i.canvas.w, e.y = a ? a.y : Math.random() * i.canvas.h, i.fn.vendors.checkOverlap(e))
}
}, i.fn.vendors.createSvgImg = function(e) {
var a = i.tmp.source_svg,
t = /#([0-9A-F]{3,6})/gi,
s = a.replace(t, function(a, t, i,) {
if (e.color.rgb) var n = "rgba(" + e.color.rgb.r + "," + e.color.rgb.g + "," + e.color.rgb.b + "," + e.opacity + ")";
else var n = "hsla(" + e.color.hsl.h + "," + e.color.hsl.s + "%," + e.color.hsl.l + "%," + e.opacity + ")";
return n
}),
n = new Blob([s], {
type: "image/svg+xml;charset=utf-8"
}),
r = window.URL || window.webkitURL || window,
c = r.createObjectURL(n),
o = new Image;
o.addEventListener("load", function() {
e.img.obj = o, e.img.loaded = !0, r.revokeObjectURL(c), i.tmp.count_svg++
}), o.src = c
}, i.fn.vendors.destroypJS = function() {
cancelAnimationFrame(i.fn.drawAnimFrame), t.remove(), pJSDom = null
}, i.fn.vendors.drawShape = function(e, a, t, i, s,) {
var r = s * n,
c = s / n,
o = 180 * (c - 2) / c,
l = Math.PI - Math.PI * o / 180;
e.save(), e.beginPath(), e.translate(a, t), e.moveTo(0, 0);
for (var v = 0; r > v; v++) e.lineTo(i, 0), e.translate(i, 0), e.rotate(l);
e.fill(), e.restore()
}, i.fn.vendors.exportImg = function() {
window.open(i.canvas.el.toDataURL("image/png"), "_blank")
}, i.fn.vendors.loadImg = function(e) {
if (i.tmp.img_error = void 0, "" != i.particles.shape.image.src)
if ("svg" == e) {
var a = new XMLHttpRequest;
a.open("GET", i.particles.shape.image.src), a.onreadystatechange = function(e) {
4 == a.readyState && (200 == a.status ? (i.tmp.source_svg = e.currentTarget.response, i.fn.vendors.checkBeforeDraw()) : (console.log("Error pJS - Image not found"), i.tmp.img_error = !0))
}, a.send()
} else {
var t = new Image;
t.addEventListener("load", function() {
i.tmp.img_obj = t, i.fn.vendors.checkBeforeDraw()
}), t.src = i.particles.shape.image.src
}
else console.log("Error pJS - No image.src"), i.tmp.img_error = !0
}, i.fn.vendors.draw = function() {
"image" == i.particles.shape.type ? "svg" == i.tmp.img_type ? i.tmp.count_svg >= i.particles.number.value ? (i.fn.particlesDraw(), i.particles.move.enable ? i.fn.drawAnimFrame = requestAnimFrame(i.fn.vendors.draw) : cancelRequestAnimFrame(i.fn.drawAnimFrame)) : i.tmp.img_error || (i.fn.drawAnimFrame = requestAnimFrame(i.fn.vendors.draw)) : void 0 != i.tmp.img_obj ? (i.fn.particlesDraw(), i.particles.move.enable ? i.fn.drawAnimFrame = requestAnimFrame(i.fn.vendors.draw) : cancelRequestAnimFrame(i.fn.drawAnimFrame)) : i.tmp.img_error || (i.fn.drawAnimFrame = requestAnimFrame(i.fn.vendors.draw)) : (i.fn.particlesDraw(), i.particles.move.enable ? i.fn.drawAnimFrame = requestAnimFrame(i.fn.vendors.draw) : cancelRequestAnimFrame(i.fn.drawAnimFrame))
}, i.fn.vendors.checkBeforeDraw = function() {
"image" == i.particles.shape.type ? "svg" == i.tmp.img_type && void 0 == i.tmp.source_svg ? i.tmp.checkAnimFrame = requestAnimFrame(check) : (cancelRequestAnimFrame(i.tmp.checkAnimFrame), i.tmp.img_error || (i.fn.vendors.init(), i.fn.vendors.draw())) : (i.fn.vendors.init(), i.fn.vendors.draw())
}, i.fn.vendors.init = function() {
i.fn.retinaInit(), i.fn.canvasInit(), i.fn.canvasSize(), i.fn.canvasPaint(), i.fn.particlesCreate(), i.fn.vendors.densityAutoParticles(), i.particles.line_linked.color_rgb_line = hexToRgb(i.particles.line_linked.color)
}, i.fn.vendors.start = function() {
isInArray("image", i.particles.shape.type) ? (i.tmp.img_type = i.particles.shape.image.src.substr(i.particles.shape.image.src.length - 3), i.fn.vendors.loadImg(i.tmp.img_type)) : i.fn.vendors.checkBeforeDraw()
}, i.fn.vendors.eventsListeners(), i.fn.vendors.start()
};
Object.deepExtend = function(e,) {
for (var t in a) a[t] && a[t].constructor && a[t].constructor === Object ? (e[t] = e[t] || {}, arguments.callee(e[t], a[t])) : e[t] = a[t];
return e
}, window.requestAnimFrame = function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(e) {
window.setTimeout(e, 1e3 / 60)
}
}(), window.cancelRequestAnimFrame = function() {
return window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || clearTimeout
}(), window.pJSDom = [], window.particlesJS = function(e,) {
"string" != typeof e && (a = e, e = "particles-js"), e || (e = "particles-js");
var t = document.getElementById(e),
i = "particles-js-canvas-el",
s = t.getElementsByClassName(i);
if (s.length)
for (; s.length > 0;) t.removeChild(s[0]);
var n = document.createElement("canvas");
n.className = i, n.style.width = "100%", n.style.height = "100%";
var r = document.getElementById(e).appendChild(n);
null != r && pJSDom.push(new pJS(e, a))
}, window.particlesJS.load = function(e, a,) {
var i = new XMLHttpRequest;
i.open("GET", a), i.onreadystatechange = function(a) {
if (4 == i.readyState)
if (200 == i.status) {
var s = JSON.parse(a.currentTarget.response);
window.particlesJS(e, s), t && t()
} else console.log("Error pJS - XMLHttpRequest status: " + i.status), console.log("Error pJS - File config not found")
}, i.send()
};
五、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.【关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习🔥
