-
基于Echarts实现可视化数据大屏服务大数据可视化监管平台
前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【150套 HTML+ Echarts大数据可视化源码 】
一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、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">0span> <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">0span> <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">0span> <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">0span> <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">0span> <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">0span> <p>占位公开p> div> <div class="main_top_left_t_c_r_right"> <span class="main_top_left_c_l_n">0span> <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">0p> div> <div class="main_top_middle_num_list"> <img src="./images/center_num.png"> <p class="main_top_middle_num_list4">0p> div> <div class="main_top_middle_num_list"> <img src="./images/center_num.png"> <p class="main_top_middle_num_list3">0p> div> <div class="main_top_middle_num_list"> <img src="./images/center_num.png"> <p class="main_top_middle_num_list2">0p> div> <div class="main_top_middle_num_list"> <img src="./images/center_num.png"> <p class="main_top_middle_num_list1">0p> 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">0span> <p>今日公开p> div> <div class="main_top_left_top_con_right"> <span class="weekData">0span> <p>本周公开p> div> <div class="main_top_left_top_con_list"> <span class="monthData">0span> <p>本月公开p> div> <div class="main_top_left_top_con_list"> <span class="someThing">0span> <p>办事指南p> div> <div class="main_top_left_top_con_list"> <span class="policyData">0span> <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">0span> 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">0span> div> <div class="main_middle_list"> <img src="./images/main_middle.png"> <div class="main_list_title main_list_title3">XXXXdiv> <span class="main_list_title_num main_list_title_num3">0span> div> <div class="main_middle_list"> <img src="./images/main_middle.png"> <div class="main_list_title main_list_title4">XXXXdiv> <span class="main_list_title_num main_list_title_num4">0span> div> <div class="main_middle_list"> <img src="./images/main_middle.png"> <div class="main_list_title main_list_title5">XXXXdiv> <span class="main_list_title_num main_list_title_num5">0span> 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">如需商用请联系：863512936div> <div class="main_bottom_t_list_time main_bottom_t_list_time1">2020/05/20div> div> li> <li> <div class="main_bottom_t_l_main_list"> <div class="main_bottom_t_list_title main_bottom_t_list_title2">如需商用请联系：863512936div> <div class="main_bottom_t_list_time main_bottom_t_list_time2">2020/05/20div> div> li> <li> <div class="main_bottom_t_l_main_list"> <div class="main_bottom_t_list_title main_bottom_t_list_title3">更多模板请联系：863512936div> <div class="main_bottom_t_list_time main_bottom_t_list_time3">2020/05/20div> div> li> <li> <div class="main_bottom_t_l_main_list"> <div class="main_bottom_t_list_title main_bottom_t_list_title4">如需商用请联系：863512936div> <div class="main_bottom_t_list_time main_bottom_t_list_time4">2020/05/20div> 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">政策XXdiv> <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">更多模板请联系：863512936div> <div class="main_bottom_t_list_time main_bottom_polity_time1">2020/05/20div> div> li> <li> <div class="main_bottom_t_l_main_list"> <div class="main_bottom_t_list_title main_bottom_polity_title2">如需商用请联系：863512936div> <div class="main_bottom_t_list_time main_bottom_polity_time1">2020/05/20div> div> li> <li> <div class="main_bottom_t_l_main_list"> <div class="main_bottom_t_list_title main_bottom_polity_title3">如需商用请联系：863512936div> <div class="main_bottom_t_list_time main_bottom_polity_time1">2020/05/20div> div> li> <li> <div class="main_bottom_t_l_main_list"> <div class="main_bottom_t_list_title main_bottom_polity_title4">如需商用请联系：863512936div> <div class="main_bottom_t_list_time main_bottom_polity_time1">2020/05/20div> 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, index) { 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, b) { 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}
{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}
{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}
{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}
{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>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
- 640
- 641
- 642
- 643
- 644
- 645
- 646
- 647
- 648
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 662
- 663
- 664
- 665
- 666
- 667
- 668
- 669
- 670
- 671
- 672
- 673
- 674
- 675
- 676
- 677
- 678
- 679
- 680
- 681
- 682
- 683
- 684
- 685
- 686
- 687
- 688
- 689
- 690
- 691
- 692
- 693
- 694
- 695
- 696
- 697
- 698
- 699
- 700
- 701
- 702
- 703
- 704
- 705
- 706
- 707
- 708
- 709
- 710
- 711
- 712
- 713
- 714
- 715
- 716
- 717
- 718
- 719
- 720
- 721
- 722
- 723
- 724
- 725
- 726
- 727
- 728
- 729
- 730
- 731
- 732
- 733
- 734
- 735
- 736
- 737
- 738
- 739
- 740
- 741
- 742
- 743
- 744
- 745
- 746
- 747
- 748
- 749
- 750
- 751
- 752
- 753
- 754
- 755
- 756
- 757
- 758
- 759
- 760
- 761
- 762
- 763
- 764
- 765
- 766
- 767
- 768
- 769
- 770
- 771
- 772
- 773
- 774
- 775
- 776
- 777
- 778
- 779
- 780
- 781
- 782
- 783
- 784
- 785
- 786
- 787
- 788
- 789
- 790
- 791
- 792
- 793
- 794
- 795
- 796
- 797
- 798
- 799
- 800
- 801
- 802
- 803
- 804
- 805
- 806
- 807
- 808
- 809
- 810
- 811
- 812
- 813
- 814
- 815
- 816
- 817
- 818
- 819
- 820
- 821
- 822
- 823
- 824
- 825
- 826
- 827
- 828
- 829
- 830
- 831
- 832
- 833
- 834
- 835
- 836
- 837
- 838
- 839
- 840
- 841
- 842
- 843
- 844
- 845
- 846
- 847
- 848
- 849
- 850
- 851
- 852
- 853
- 854
- 855
- 856
- 857
- 858
- 859
- 860
- 861
- 862
- 863
- 864
- 865
- 866
- 867
- 868
- 869
- 870
- 871
- 872
- 873
- 874
- 875
- 876
- 877
- 878
- 879
- 880
- 881
- 882
- 883
- 884
- 885
- 886
- 887
- 888
- 889
- 890
- 891
- 892
- 893
- 894
- 895
- 896
- 897
- 898
- 899
- 900
- 901
- 902
- 903
- 904
- 905
- 906
- 907
- 908
- 909
- 910
- 911
- 912
- 913
- 914
- 915
- 916
- 917
- 918
- 919
- 920
- 921
- 922
- 923
- 924
- 925
- 926
- 927
- 928
- 929
- 930
- 931
- 932
- 933
- 934
- 935
- 936
- 937
- 938
- 939
- 940
- 941
- 942
- 943
- 944
- 945
- 946
- 947
- 948
- 949
- 950
- 951
- 952
- 953
- 954
- 955
- 956
- 957
- 958
- 959
- 960
- 961
- 962
- 963
- 964
- 965
- 966
- 967
- 968
- 969
- 970
- 971
- 972
- 973
- 974
- 975
- 976
- 977
- 978
- 979
- 980
- 981
- 982
- 983
- 984
- 985
- 986
- 987
- 988
- 989
- 990
- 991
- 992
- 993
- 994
- 995
- 996
- 997
- 998
- 999
- 1000
- 1001
- 1002
- 1003
- 1004
- 1005
- 1006
- 1007
- 1008
- 1009
- 1010
- 1011
- 1012
- 1013
- 1014
- 1015
- 1016
- 1017
- 1018
- 1019
- 1020
- 1021
- 1022
- 1023
- 1024
- 1025
- 1026
- 1027
- 1028
- 1029
- 1030
- 1031
- 1032
- 1033
- 1034
- 1035
- 1036
- 1037
- 1038
- 1039
- 1040
- 1041
- 1042
- 1043
- 1044
- 1045
- 1046
- 1047
- 1048
- 1049
- 1050
- 1051
- 1052
- 1053
- 1054
- 1055
- 1056
- 1057
- 1058
- 1059
- 1060
- 1061
- 1062
- 1063
- 1064
- 1065
- 1066
- 1067
- 1068
- 1069
- 1070
- 1071
- 1072
- 1073
- 1074
- 1075
- 1076
- 1077
- 1078
- 1079
- 1080
- 1081
- 1082
- 1083
- 1084
- 1085
- 1086
- 1087
- 1088
- 1089
- 1090
- 1091
- 1092
- 1093
- 1094
- 1095
- 1096
- 1097
- 1098
- 1099
- 1100
- 1101
- 1102
- 1103
- 1104
- 1105
- 1106
- 1107
- 1108
- 1109
- 1110
- 1111
- 1112
- 1113
- 1114
- 1115
- 1116
- 1117
- 1118
- 1119
- 1120
- 1121
- 1122
- 1123
- 1124
- 1125
- 1126
- 1127
- 1128
- 1129
- 1130
- 1131
- 1132
- 1133
- 1134
- 1135
- 1136
- 1137
- 1138
- 1139
- 1140
- 1141
- 1142
- 1143
- 1144
- 1145
- 1146
- 1147
- 1148
- 1149
- 1150
- 1151
- 1152
- 1153
- 1154
- 1155
- 1156
- 1157
- 1158
- 1159
- 1160
- 1161
- 1162
- 1163
- 1164
- 1165
- 1166
- 1167
- 1168
- 1169
- 1170
- 1171
- 1172
- 1173
- 1174
- 1175
- 1176
- 1177
- 1178
- 1179
- 1180
- 1181
- 1182
- 1183
- 1184
- 1185
- 1186
- 1187
- 1188
- 1189
- 1190
- 1191
- 1192
- 1193
- 1194
- 1195
- 1196
- 1197
- 1198
- 1199
- 1200
- 1201
- 1202
- 1203
- 1204
- 1205
- 1206
- 1207
- 1208
- 1209
- 1210
- 1211
- 1212
- 1213
- 1214
- 1215
- 1216
- 1217
- 1218
- 1219
- 1220
- 1221
- 1222
- 1223
- 1224
- 1225
- 1226
- 1227
- 1228
- 1229
- 1230
- 1231
- 1232
- 1233
- 1234
- 1235
- 1236
- 1237
- 1238
- 1239
- 1240
- 1241
- 1242
- 1243
- 1244
- 1245
- 1246
- 1247
- 1248
- 1249
- 1250
- 1251
- 1252
- 1253
- 1254
- 1255
- 1256
- 1257
- 1258
- 1259
- 1260
- 1261
- 1262
- 1263
- 1264
- 1265
- 1266
- 1267
- 1268
- 1269
- 1270
- 1271
- 1272
- 1273
- 1274
- 1275
- 1276
- 1277
- 1278
- 1279
- 1280
- 1281
- 1282
- 1283
- 1284
- 1285
- 1286
- 1287
- 1288
- 1289
- 1290
- 1291
- 1292
- 1293
- 1294
- 1295
- 1296
- 1297
- 1298
- 1299
- 1300
- 1301
- 1302
- 1303
- 1304
- 1305
- 1306
- 1307
- 1308
- 1309
- 1310
- 1311
- 1312
- 1313
- 1314
- 1315
- 1316
- 1317
- 1318
- 1319
- 1320
- 1321
- 1322
- 1323
- 1324
- 1325
- 1326
- 1327
- 1328
- 1329
- 1330
- 1331
- 1332
- 1333
- 1334
- 1335
- 1336
- 1337
- 1338
- 1339
- 1340
- 1341
- 1342
- 1343
- 1344
- 1345
- 1346
- 1347
- 1348
- 1349
- 1350
- 1351
- 1352
- 1353
- 1354
- 1355
- 1356
- 1357
- 1358
- 1359
- 1360
- 1361
- 1362
- 1363
- 1364
- 1365
- 1366
- 1367
- 1368
- 1369
- 1370
- 1371
- 1372
- 1373
- 1374
- 1375
- 1376
- 1377
- 1378
- 1379
- 1380
- 1381
- 1382
- 1383
- 1384
- 1385
- 1386
- 1387
- 1388
- 1389
- 1390
- 1391
- 1392
- 1393
- 1394
- 1395
- 1396
- 1397
- 1398
- 1399
- 1400
- 1401
- 1402
- 1403
- 1404
- 1405
- 1406
- 1407
- 1408
- 1409
- 1410
- 1411
- 1412
- 1413
- 1414
- 1415
- 1416
- 1417
- 1418
- 1419
- 1420
- 1421
- 1422
- 1423
- 1424
- 1425
- 1426
- 1427
- 1428
- 1429
- 1430
- 1431
- 1432
- 1433
- 1434
- 1435
- 1436
- 1437
- 1438
- 1439
- 1440
- 1441
- 1442
- 1443
- 1444
- 1445
- 1446
- 1447
- 1448
- 1449
- 1450
- 1451
- 1452
- 1453
- 1454
- 1455
- 1456
- 1457
- 1458
- 1459
- 1460
- 1461
- 1462
- 1463
- 1464
- 1465
- 1466
- 1467
- 1468
- 1469
- 1470
- 1471
- 1472
- 1473
- 1474
- 1475
- 1476
- 1477
- 1478
- 1479
- 1480
- 1481
- 1482
- 1483
- 1484
- 1485
- 1486
- 1487
- 1488
- 1489
- 1490
- 1491
- 1492
- 1493
- 1494
- 1495
- 1496
- 1497
- 1498
- 1499
- 1500
- 1501
- 1502
- 1503
- 1504
- 1505
- 1506
- 1507
- 1508
- 1509
- 1510
- 1511
- 1512
- 1513
- 1514
- 1515
- 1516
- 1517
- 1518
- 1519
- 1520
- 1521
- 1522
- 1523
- 1524
- 1525
- 1526
- 1527
- 1528
- 1529
- 1530
- 1531
- 1532
- 1533
- 1534
- 1535
- 1536
- 1537
- 1538
- 1539
- 1540
- 1541
- 1542
- 1543
- 1544
- 1545
- 1546
- 1547
- 1548
- 1549
- 1550
- 1551
- 1552
- 1553
- 1554
- 1555
- 1556
- 1557
- 1558
- 1559
- 1560
- 1561
- 1562
- 1563
- 1564
- 1565
- 1566
- 1567
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% }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
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();- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
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, i) { 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, t) { return Math.min(Math.max(e, a), t) } function isInArray(e, a) { return a.indexOf(e) > -1 } var pJS = function(e, a) { 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, t) { 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, a) { 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, a) { 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, a) { 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, a) { 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, c) { 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, a) { 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, s) { 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, n) { 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, a) { 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, a) { "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, t) { 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
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
- 134
- 135
- 136
- 137
- 138
- 139
- 140
- 141
- 142
- 143
- 144
- 145
- 146
- 147
- 148
- 149
- 150
- 151
- 152
- 153
- 154
- 155
- 156
- 157
- 158
- 159
- 160
- 161
- 162
- 163
- 164
- 165
- 166
- 167
- 168
- 169
- 170
- 171
- 172
- 173
- 174
- 175
- 176
- 177
- 178
- 179
- 180
- 181
- 182
- 183
- 184
- 185
- 186
- 187
- 188
- 189
- 190
- 191
- 192
- 193
- 194
- 195
- 196
- 197
- 198
- 199
- 200
- 201
- 202
- 203
- 204
- 205
- 206
- 207
- 208
- 209
- 210
- 211
- 212
- 213
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
五、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，
请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！2.
【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
-
相关阅读:
Unity-huatuo热更新调研
JS中的箭头函数
白嫖游戏指南，Epic喜加二：《INDUSTRIA》《LISA: Definitive Edition》
LeetCode 6150. 根据模式串构造最小数字 DFS全排列+贪心
Java虚拟机反射机制与动态代理
学习记忆——图像篇——记忆古诗词
随笔记：计算机基础及进制计数法
ThreadLocal之强、弱、软、虚引用
香橙派4和树莓派4B构建K8S集群实践之七： Jenkins
Django面试题——CSRF和CORS的区别
- 原文地址：https://blog.csdn.net/bigwhiteshark/article/details/126343743
- 最新文章
-
沪漂五周年了：我越来越迷茫了
Agentic Skill Routing 实战：别再把所有 Skill 塞进 AI Agent 上下文
MySQL-Seconds_behind_master的精度误差
[MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
AI的至暗历史：从万众期待到被政府撤资，AI的两次死亡徘徊
Agent OS ：五种驯服不确定性的范式
PortSwigger SQL注入LAB11
数据库即时编译JIT
[Begin]AI Learn Data Day 0
深度学习进阶（二十七）现代 LLM 的核心架构设计其二：SwiGLU