赞
踩
<!-- 概览区域模块制作 --> <div class="panel overview"> <div class="inner"> <ul> <li> <h4>2190</h4> <span> <i class="icon-dot"></i> 设备总数 </span> </li> <li class="item"> <h4>190</h4> <span> <i class="icon-dot" style="color: #6acca3"></i> 季度新增 </span> </li> <li> <h4>3,001</h4> <span> <i class="icon-dot" style="color: #6acca3"></i> 运营设备 </span> </li> <li> <h4>108</h4> <span> <i class="icon-dot" style="color: #ed3f35"></i> 异常设备 </span> </li> </ul> </div> </div>
/*清除元素默认的内外边距 */ * { margin: 0; padding: 0; box-sizing: border-box; } /*让所有斜体 不倾斜*/ em, i { font-style: normal; } /*去掉列表前面的小点*/ li { list-style: none; } /*图片没有边框 去掉图片底侧的空白缝隙*/ img { border: 0; /*ie6*/ vertical-align: middle; } /*让button 按钮 变成小手*/ button { cursor: pointer; } /*取消链接的下划线*/ a { color: #666; text-decoration: none; } a:hover { color: #e33333; } h4 { font-weight: 400; } body { background: url(../images/bg.jpg) no-repeat 0 0 / cover; /* background-size: cover; */ } /* // 实现rem适配 */ @media screen and (max-width: 1024px) { html { font-size: 42.66px !important; } } @media screen and (min-width: 1920px) { html { font-size: 80px !important; } } .viewport { display: flex; min-width: 1024px; max-width: 1920px; margin: 0 auto; padding: 1.625rem 0.25rem 0; background: url(../images/logo.png) no-repeat 0 0 / contain; min-height: 780px; } .viewport .column { flex: 3; /* background-color: pink; */ } .viewport .column:nth-child(2) { flex: 4; margin: 0.4rem 0.25rem 0; } /* 公共面板样式 */ .panel { position: relative; border: 15px solid transparent; border-width: .6375rem 0.475rem 0.25rem 1.65rem; border-image-source: url(../images/border.png); border-image-slice: 51 38 20 132; margin-bottom: 0.25rem; } .inner { position: absolute; top: -0.6375rem; left: -1.65rem; right: -0.475rem; bottom: -0.25rem; padding: 0.3rem 0.45rem; /* background-color: red; */ } .panel h3 { font-size: 0.25rem; color: #fff; font-weight: 400; }
/* 概览区域模块制作 */ .overview { height: 1.375rem; } .overview ul { display: flex; justify-content: space-between; } .overview ul li h4 { font-size: .35rem; color:#fff; margin: 0 0 .1rem .06rem; } .overview ul li span { font-size: .2rem; color:#4c9bfd; }
<!-- 监控区域模块制作 --> <div class="panel monitor"> <div class="inner"> <div class="tabs"> <a href="javascript:;" class="active">故障设备监控</a> <a href="javascript:;" >异常设备监控</a> </div> <div class="content" style="display:block"> <div class="head"> <span class="col">故障时间</span> <span class="col">设备地址</span> <span class="col">异常代码</span> </div> <div class="marquee-view"> <div class="marquee"> <div class="row"> <span class="col">20180701</span> <span class="col">11北京市昌平西路金燕龙写字楼</span> <span class="col">1000001</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190601</span> <span class="col">北京市昌平区城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190704</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000003</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20180701</span> <span class="col">北京市昌平区建路金燕龙写字楼</span> <span class="col">1000004</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000005</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000006</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建西路金燕龙写字楼</span> <span class="col">1000007</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000008</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000009</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190710</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000010</span> <span class="icon-dot"></span> </div> </div> </div> </div> <div class="content"> <div class="head"> <span class="col">异常时间</span> <span class="col">设备地址</span> <span class="col">异常代码</span> </div> <div class="marquee-view"> <div class="marquee"> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000001</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190701</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190703</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190704</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190705</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190706</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190707</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190708</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190709</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> <div class="row"> <span class="col">20190710</span> <span class="col">北京市昌平区建材城西路金燕龙写字楼</span> <span class="col">1000002</span> <span class="icon-dot"></span> </div> </div> </div> </div> </div> </div>
/* 监控区域模块制作 */ .monitor { height: 6rem; } .monitor .inner { padding: 0.3rem 0; display: flex; flex-direction: column; } .monitor .tabs { padding: 0 0.45rem; margin-bottom: 0.225rem; display: flex; } .monitor .tabs a { color: #1950c4; font-size: 0.225rem; padding: 0 0.3375rem; } .monitor .tabs a:first-child { padding-left: 0; border-right: 0.025rem solid #00f2f1; } .monitor .tabs a.active { color: #fff; } .monitor .content { flex: 1; position: relative; display: none; } .monitor .head { display: flex; justify-content: space-between; line-height: 1.05; background-color: rgba(255, 255, 255, 0.1); padding: 0.15rem 0.45rem; color: #68d8fe; font-size: 0.175rem; } .monitor .marquee-view { position: absolute; top: 0.5rem; bottom: 0; width: 100%; overflow: hidden; } .monitor .row { display: flex; justify-content: space-between; line-height: 1.05; font-size: 0.15rem; color: #61a8ff; padding: 0.15rem 0.45rem; } .monitor .row .icon-dot { position: absolute; left: 0.2rem; opacity: 0; } .monitor .row:hover { background-color: rgba(255, 255, 255, 0.1); color: #68d8fe; } .monitor .row:hover .icon-dot { opacity: 1; } .monitor .col:first-child { width: 1rem; } .monitor .col:nth-child(2) { width: 2.5rem; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .monitor .col:nth-child(3) { width: 1rem; } .marquee-view .marquee { animation:move 15s linear infinite; } @keyframes move { 0% { } 100%{ transform:translateY(-50%); } } .marquee-view .marquee:hover { animation-play-state:paused; }
// 监控区域模块制作 (function(){ $(".monitor .tabs").on("click","a",function(){ $(this) .addClass("active") .siblings("a") .removeClass("active"); // console.log($(this).index()) // 选取对应索引号的content $(".monitor .content") .eq($(this).index()) .show() .siblings(".content") .hide(); }); $(".marquee-view .marquee").each(function(){ // console.log($(this)) var rows = $(this) .children() .clone(); $(this).append(rows); }); })();
<!-- 点位模块制作 --> <div class="point panel"> <div class="inner"> <h3>点位分布统计</h3> <div class="chart"> <div class="pie"></div> <div class="data"> <div class="item"> <h4>320,11</h4> <span> <i class="icon-dot" style="color: #ed3f35"></i> 点位总数 </span> </div> <div class="item"> <h4>418</h4> <span> <i class="icon-dot" style="color: #eacf19"></i> 本月新增 </span> </div> </div> </div> </div> </div>
/* 点位模块制作 */ .point { height: 4.25rem; } .point .chart { display: flex; margin-top: 0.3rem; justify-content: space-between; } .point .pie { width: 3.9rem; height: 3rem; margin-left: -0.125rem; /* background-color: pink; */ } .point .data { display: flex; flex-direction: column; justify-content: space-between; width: 2.1rem; padding: .45rem .375rem; box-sizing: border-box; background-image: url(../images/rect.png); background-size: cover; } .point h4 { margin-bottom: 0.15rem; font-size: .35rem; color: #fff; } .point span { display: block; color: #4c9bfd; font-size: .2rem; }
//点位分布统计模块 (function(){ //实例化对象 var myChart = echarts.init(document. querySelector(".pie")); // 指定配置项和对象 var option = { tooltip: { trigger: "item", formatter: "{a} <br/>{b} : {c} ({d}%)" }, // 注意颜色写的位置 color: [ "#006cff", "#60cda0", "#ed8884", "#ff9f7f", "#0096ff", "#9fe6b8", "#32c5e9", "#1d9dff" ], series: [ { name: "点位统计", type: "pie", // 如果radius是百分比则必须加引号 radius: ["10%", "70%"], center: ["50%", "50%"], roseType: "radius", data: [ { value: 20, name: "云南" }, { value: 26, name: "北京" }, { value: 24, name: "山东" }, { value: 25, name: "河北" }, { value: 20, name: "江苏" }, { value: 25, name: "浙江" }, { value: 30, name: "四川" }, { value: 42, name: "湖北" } ], // 修饰饼形图文字相关的样式 label对象 label: { fontSize: 10 }, // 修饰引导线样式 labelLine: { // 连接到图形的线长度 length: 6, // 连接到文字的线长度 length2: 8 } } ] }; // 配置项和数据给我们的实例化对象 myChart.setOption(option); // 当我们的浏览器缩放的时候,图表也等比例缩放 window.addEventListener('resize',function(){ // 让我们的图表调用resize这个方法 myChart.resize(); }) })();
<!-- 用户模块 --> <div class="users panel"> <div class="inner"> <h3>全国用户总量统计</h3> <div class="chart"> <div class="bar"></div> <div class="data"> <div class="item"> <h4>120,899</h4> <span> <i class="icon-dot" style="color: #ed3f35"></i> 用户总量 </span> </div> <div class="item"> <h4>248</h4> <span> <i class="icon-dot" style="color: #eacf19"></i> 本月新增 </span> </div> </div> </div> </div> </div>
/* 用户模块 */ .users { height: 4.25rem; display: flex; } .users .chart { display: flex; margin-top: .3rem; } .users .bar { width: 7.35rem; height: 3rem; /* background-color: pink; */ } .users .data { display: flex; flex-direction: column; justify-content: space-between; width: 2.1rem; padding: .45rem .375rem; box-sizing: border-box; background-image: url(../images/rect.png); background-size: cover; } .users h4 { margin-bottom: .15rem; font-size: .35rem; color: #fff; } .users span { display: block; color: #4c9bfd; font-size: 0.2rem; }
(function() { var item = { name:'', value:1200, // 修改当前柱子的样式 itemStyle: { color:"#254065" }, // 鼠标放到柱子上面,不会高亮显示 emphasis: { itemStyle: { color:"#254065" } }, // 鼠标经过柱子不显示提示框组件 tooltip: { extraCssText:"opacity:0" } }; // 1.实例化对象 var myChart = echarts.init(document.querySelector(".bar")); // 2.指定配置和数据 var option = { // 修改线性渐变色方式 1 color: new echarts.graphic.LinearGradient( // (x1,y2) 点到点 (x2,y2) 之间进行渐变 0, 0, 0, 1, [ { offset: 0, color: '#00fffb' }, // 0 起始颜色 { offset: 1, color: '#0061ce' } // 1 结束颜色 ] ), // 工具提示 tooltip: { // 触发类型 经过轴触发axis 经过轴触发item trigger: 'item', // 轴触发提示才有效 // axisPointer: { // // 默认为直线,可选为:'line' 线效果 | 'shadow' 阴影效果 // type: 'shadow' // } }, // 图表边界控制 grid: { // 距离 上右下左 的距离 left: '0%', right: '3%', bottom: '3%', top:'3%', // 是否包含文本 containLabel: true, show:true, borderColor:'rgba(0,240,255,0.3)' }, // 控制x轴 xAxis: [ { // 使用类目,必须有data属性 type: "category", // 使用 data 中的数据设为刻度文字 // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], data: [ "上海", "广州", "北京", "深圳", "合肥", "", "......", "", "杭州", "厦门", "济南", "成都", "重庆" ], // 刻度设置 axisTick: { // true意思:图形在刻度中间 // false意思:图形在刻度之间 alignWithLabel: false, // 把X轴的刻度隐藏 show:false }, axisLabel: { //代表显示所有x轴标签显示 interval:0, color:"#4c9bfd" }, // x轴这条线的颜色样式 axisLine: { lineStyle:{ color:'rgba(0,240,255,0.3)' } } } ], // 控制y轴 yAxis: [ { // 使用数据的值设为刻度文字 type: 'value', axisTick: { // true意思:图形在刻度中间 // false意思:图形在刻度之间 alignWithLabel: false, show:false }, axisLabel: { color:"#4c9bfd" }, // x轴这条线的颜色样式 axisLine: { lineStyle:{ color:'rgba(0,240,255,0.3)' } }, // y轴的分割线修改颜色 splitLine:{ lineStyle: { color:'rgba(0,240,255,0.3)', } } } ], // 控制x轴 series: [ { // 图表数据名称 name: '用户统计', // 图表类型 type: 'bar', // 柱子宽度 barWidth: '60%', // 数据 // data:[100,200,300,400] data: [ 2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240 ], } ] }; // 3.把配置给实例对象 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize() }) })();
<!-- 订单 --> <div class="order panel"> <div class="inner"> <!-- 筛选 --> <div class="filter"> <a href="javascript:;" class="active">365天</a> <a href="javascript:;" >90天</a> <a href="javascript:;" >30天</a> <a href="javascript:;" >24小时</a> </div> <!-- 数据 --> <div class="data"> <div class="item"> <h4>20,301,987</h4> <span> <i class="icon-dot" style="color: #ed3f35;"></i> 订单量 </span> </div> <div class="item"> <h4>99834</h4> <span> <i class="icon-dot" style="color: #eacf19;"></i> 销售额(万元) </span> </div> </div> </div> </div>
.order { height: 1.875rem; } .order .filter { display: flex; } .order .filter a { display: block; height: 0.225rem; line-height: 1; padding: 0 0.225rem; color: #1950c4; font-size: 0.225rem; border-right: 0.025rem solid #00f2f1; } .order .filter a:first-child { padding-left: 0; } .order .filter a:last-child { border-right: none; } .order .filter a.active { color: #fff; font-size: 0.25rem; } .order .data { display: flex; margin-top: 0.25rem; } .order .item { width: 50%; } .order h4 { font-size: 0.35rem; color: #fff; margin-bottom: 0.125rem; } .order span { display: block; color: #4c9bfd; font-size: 0.2rem; }
// 订单功能 (function(){ // 1. 准备数据 var data = { day365: { orders: '20,301,987', amount: '99834' }, day90: { orders: '301,987', amount: '9834' }, day30: { orders: '1,987', amount: '3834' }, day1: { orders: '987', amount: '834' } } // 获取显示 订单数量 容器 var $h4Orders = $('.order h4:eq(0)') // 获取显示 金额数量 容器 var $h4Amount = $('.order h4:eq(1)') $('.order').on('click','.filter a',function(){ // 2. 点击切换激活样式 $(this).addClass('active').siblings().removeClass('active') // 3. 点击切换数据 var currdata = data[this.dataset.key] $h4Orders.html(currdata.orders) $h4Amount.html(currdata.amount) }) // 4. 开启定时器切换数据 var index = 0 var $allTab = $('.order .filter a') setInterval(function(){ index ++ if (index >= 4) index = 0 $allTab.eq(index).click() },5000) })();
<!-- 销售额 --> <div class="sales panel"> <div class="inner"> <div class="caption"> <h3>销售额统计</h3> <a href="javascript:;" class="active" data-type="year">年</a> <a href="javascript:;" data-type="quarter">季</a> <a href="javascript:;" data-type="month">月</a> <a href="javascript:;" data-type="week">周</a> </div> <div class="chart"> <div class="label">单位:万</div> <div class="line"></div> </div> </div> </div>
.sales { height: 3.1rem; } .sales .caption { display: flex; line-height: 1; } .sales h3 { height: 0.225rem; padding-right: 0.225rem; border-right: 0.025rem solid #00f2f1; } .sales a { padding: 0.05rem; font-size: 0.2rem; margin: -0.0375rem 0 0 0.2625rem; border-radius: 0.0375rem; color: #0bace6; } .sales a.active { background-color: #4c9bfd; color: #fff; } .sales .inner { display: flex; flex-direction: column; } .sales .chart { flex: 1; padding-top: 0.1875rem; position: relative; } .sales .label { position: absolute; left: 0.525rem; top: 0.225rem; color: #4996f5; font-size: 0.175rem; } .sales .line { width: 100%; height: 100%; /* background-color: pink; */ }
//销售统计模块 (function(){ //准备数据 var data = { year: [ [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120], [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79] ], quarter: [ [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38], [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34] ], month: [ [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36], [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98] ], week: [ [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53], [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24] ] } // 1.实例化对象 var myChart =echarts.init(document.querySelector(".line")); // 2. 指定配置和数据 var option = { color:['#00f2f1','#ed3f35'], tooltip: { //通过坐标轴来触发 trigger: "axis" }, legend: { //距离容器10% right:"19%", //修饰图例颜色 textStyle: { color:"#4c9bfd", }, // 如果series里面设置了name,此时图例组件中的data可以省略 // data: ["预期销售额", "实际销售额"] }, grid: { top:"20%", left: "3%", right: "4%", bottom: "3%", show:true, borderColor:"#012f4a", containLabel: true }, xAxis: { type: "category", //去除轴内间距 boundaryGap: false, data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], // 去除刻度 axisTick: { show:false, }, //修饰刻度标签颜色 axisLabel: { interval:0, color:"#4c9bfd", }, // 去除X轴坐标颜色 axisLine: { show:false, } }, yAxis: { type: "value", // 去除刻度 axisTick: { show:false, }, //修饰刻度标签颜色 axisLabel: { interval:0, color:"#4c9bfd", }, // 去除Y轴分割线的颜色 splitLine: { lineStyle:{ color:"012f4a" } } }, series: [ { name: "预期销售额", type: "line", stack: "总量", //是否让线条圆滑显示 smooth:true, data: data.year[0] }, { name: "实际销售额", type: "line", stack: "总量", smooth:true, data: data.year[1] } ] }; // 3.将配置和数据给实例化对象 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize() }) //4.tab切换效果制作 //2.点击切换效果 $(".sales .caption").on("click","a",function(){ //点击当前a 高亮显示 调用active index = $(this).index()-1; $(this) .addClass("active") .siblings("a") .removeClass("active") //拿到当前A的 自定义属性值 // console.log(this.dataset.type); //根据拿到的值,去找数据 // console.log(data.year) // console.log(data["year"]) // console.log(data[this.dataset.type]) var arr = data[this.dataset.type]; // console.log(arr); //根据拿到的数据,重新渲染series里面的data值 option.series[0].data = arr[0]; option.series[1].data = arr[1]; // 重新把配置好的数据给实例化对象 myChart.setOption(option); }); // 开启定时器每个3S,自动让a触发点击事件即可 var as = $(".sales .caption a"); var index = 0; var timer = setInterval(function() { index++; if(index>=4) index=0; as.eq(index).click(); },1000); // 鼠标经过sales,关闭定时器,离开开启定时器 $('.sales').hover(function() { clearInterval(timer); },function() { clearInterval(timer); timer = setInterval(function() { index++; if(index>=4) index=0; as.eq(index).click(); },1000); }) })();
<!-- 渠道 季度 --> <div class="wrap"> <div class="channel panel"> <div class="inner"> <h3>渠道分布</h3> <div class="data"> <div class="radar"></div> </div> </div> </div> <div class="quarter panel"> <div class="inner"> <h3>一季度销售进度</h3> <div class="chart"> <div class="box"> <div class="gauge"></div> <div class="label">75<small> %</small></div> </div> <div class="data"> <div class="item"> <h4>1,321</h4> <span> <i class="icon-dot" style="color: #6acca3"></i> 销售额(万元) </span> </div> <div class="item"> <h4>150%</h4> <span> <i class="icon-dot" style="color: #ed3f35"></i> 同比增长 </span> </div> </div> </div> </div> </div> </div>
/* 渠道区块 */ .wrap { display: flex; } .channel, .quarter { flex: 1; height: 2.9rem; } .channel { margin-right: 0.25rem; } .channel .data { overflow: hidden; } .channel .data .radar { height: 2.1rem; width: 100%; /* background-color: pink; */ } .channel h4 { color: #fff; font-size: 0.4rem; margin-bottom: 0.0625rem; } .channel small { font-size: 50%; } .channel span { display: block; color: #4c9bfd; font-size: 0.175rem; } /* 季度区块 */ .quarter .inner { display: flex; flex-direction: column; margin: 0 -0.075rem; } .quarter .chart { flex: 1; padding-top: 0.225rem; } .quarter .box { position: relative; } .quarter .label { transform: translate(-50%, -30%); color: #fff; font-size: 0.375rem; position: absolute; left: 50%; top: 50%; } .quarter .label small { font-size: 50%; } .quarter .gauge { height: 1.05rem; } .quarter .data { display: flex; justify-content: space-between; } .quarter .item { width: 50%; } .quarter h4 { color: #fff; font-size: 0.3rem; margin-bottom: 0.125rem; } .quarter span { display: block; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; color: #4c9bfd; font-size: 0.175rem; }
//渠道分布模块 (function() { var myChart = echarts.init(document.querySelector('.radar')); // 2.指定配置 // var dataBJ = [[155, 39, 156, 0.46, 88, 6, 100]]; // var lineStyle = { // normal: { // width: 1, // opacity: 0.5 // } // }; var option = { // backgroundColor: "#161627", tooltip: { show:true, position:["20%","5%"] }, radar: { indicator: [ { name: '机场', max: 100 }, { name: '商场', max: 100 }, { name: '火车站', max: 100 }, { name: '汽车站', max: 100 }, { name: '地铁', max: 100 } ], //修改雷达图的大小 radius:"60%", shape: "circle", //指示器轴的分割段数(分割的圆圈个数) splitNumber: 4, name: { //修饰雷达图文字的颜色 textStyle: { color: "#4c9bfd" } }, // 分割圆圈线条的样式 splitLine: { lineStyle: { color:"rgba(255,255,255,0.5)" } }, splitArea: { show: false }, //坐标轴的线,修改为白色半透明 axisLine: { lineStyle: { color: "rgba(255,255,255,0.5)" } } }, series: [ { name: "北京", type: "radar", //填充区域的线条颜色 lineStyle: { normal: { color:"#fff", width: 1, opacity: 0.5 } }, data: [[155, 39, 156, 0.46, 88, 6, 100]], //设置图形标记(小圆点) symbol: "circle", // 设置小圆点大小 symbolSize:5, //设置小圆点颜色 itemStyle: { color: "#fff" }, //让小圆点显示数据 label: { show:true, fontSize:10 }, //修饰区域填充的背景颜色 areaStyle: { color:"rgba(238,197,102,0.6)", // opacity: 0.1 } } ] }; // 3.把配置和数据给对象 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize() }) })(); //半圆形做法:把一个饼图分成三段,下面一段颜色设为透明即可 // 销售模块 饼形图 半圆形 设置方式 (function() { // 1. 实例化对象 var myChart = echarts.init(document.querySelector(".gauge")); // 2. 指定数据和配置 var option = { series: [ { name: "销售进度", type: "pie", //放大图形,第一个参数是内部圆的半径,第二个参数是外部圆的半径 radius: ["130%", "150%"], //移动下位置,套住50%的文字 center:["48%","80%"], //是否启用防止标签重叠策略 // avoidLabelOverlap: false, labelLine: { normal: { show: false } }, //饼形图的起始角度为180,不是旋转角度 startAngle:180, //鼠标经过不需要放大偏移图形 hoverOffset:0, data: [ { value: 100, itemStyle:{ // 修改线性渐变色方式 1 color: new echarts.graphic.LinearGradient( // (x1,y2) 点到点 (x2,y2) 之间进行渐变 0, 0, 0, 1, [ { offset: 0, color: '#00fffb' }, // 0 起始颜色 { offset: 1, color: '#0061ce' } // 1 结束颜色 ] ), } }, { value: 100, itemStyle:{ color:"#12274d" } }, { value: 200, itemStyle:{ color:"transparent" } } ] } ] }; // 3. 把数据和配置给实例对象 myChart.setOption(option); window.addEventListener("resize",function(){ myChart.resize() }) })();
<!-- 排行榜 --> <div class="top panel"> <div class="inner"> <div class="all"> <h3>全国热榜</h3> <ul> <li> <i class="icon-cup1" style="color: #d93f36;"></i> 可爱多 </li> <li> <i class="icon-cup2" style="color: #68d8fe;"></i> 娃哈啥 </li> <li> <i class="icon-cup3" style="color: #4c9bfd;"></i> 喜之郎 </li> </ul> </div> <div class="province"> <h3>各省热销 <i class="date">// 近30日 //</i></h3> <div class="data"> <ul class="sup"> <!-- <li> <span>北京</span> <span>25,179 <s class="icon-up"></s></span> </li> <li> <span>河北</span> <span>23,252 <s class="icon-down"></s></span> </li> <li> <span>上海</span> <span>20,760 <s class="icon-up"></s></span> </li> <li> <span>江苏</span> <span>23,252 <s class="icon-down"></s></span> </li> <li> <span>山东</span> <span>20,760 <s class="icon-up"></s></span> </li> --> </ul> <ul class="sub"> <!-- <li><span></span><span> <s class="icon-up"></s></span></li> --> </ul> </div> </div> </div> </div>
/* 排行榜 */ .top { height: 3.5rem; } .top .inner { display: flex; } .top .all { display: flex; flex-direction: column; width: 2.1rem; color: #4c9bfd; font-size: 0.175rem; vertical-align: middle; } .top .all ul { padding-left: 0.15rem; margin-top: 0.15rem; flex: 1; display: flex; flex-direction: column; justify-content: space-around; } .top .all li { overflow: hidden; } .top .all [class^="icon-"] { font-size: 0.45rem; vertical-align: middle; margin-right: 0.15rem; } .top .province { flex: 1; display: flex; flex-direction: column; color: #fff; } .top .province i { padding: 0 0.15rem; margin-top: 0.0625rem; float: right; font-style: normal; font-size: 0.175rem; color: #0bace6; } .top .province s { display: inline-block; transform: scale(0.8); text-decoration: none; } .top .province .icon-up { color: #dc3c33; } .top .province .icon-down { color: #36be90; } .top .province .data { flex: 1; display: flex; margin-top: 0.175rem; } .top .province ul { flex: 1; line-height: 1; margin-bottom: 0.175rem; } .top .province ul li { display: flex; justify-content: space-between; } .top .province ul span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .top .province ul.sup { font-size: 0.175rem; } .top .province ul.sup li { color: #4995f4; padding: 0.15rem; } .top .province ul.sup li.active { color: #a3c6f2; background-color: rgba(10, 67, 188, 0.2); } .top .province ul.sub { display: flex; flex-direction: column; justify-content: space-around; font-size: 0.15rem; background-color: rgba(10, 67, 188, 0.2); } .top .province ul.sub li { color: #52ffff; padding: 0.125rem 0.175rem; } .clock { position: absolute; top: -0.45rem; right: 0.5rem; font-size: 0.25rem; color: #0bace6; } .clock i { margin-right: 5px; font-size: 0.25rem; } @media screen and (max-width: 1600px) { .top span { transform: scale(0.9); } .top .province ul.sup li { padding: 0.125rem 0.15rem; } .top .province ul.sub li { padding: 0.0625rem 0.15rem; } .quarter span { transform: scale(0.9); } }
//全国热榜模块 (function() { // 准备数据 var hotData = [ { city: '北京', // 城市 sales: '25, 179', // 销售额 flag: true, // 上升还是下降 brands: [ // 品牌种类数据 { name: '可爱多', num: '9,086', flag: true }, { name: '娃哈哈', num: '8,341', flag: true }, { name: '喜之郎', num: '7,407', flag: false }, { name: '八喜', num: '6,080', flag: false }, { name: '小洋人', num: '6,724', flag: false }, { name: '好多鱼', num: '2,170', flag: true }, ] }, { city: '河北', sales: '23,252', flag: false, brands: [ { name: '可爱多', num: '3,457', flag: false }, { name: '娃哈哈', num: '2,124', flag: true }, { name: '喜之郎', num: '8,907', flag: false }, { name: '八喜', num: '6,080', flag: true }, { name: '小洋人', num: '1,724', flag: false }, { name: '好多鱼', num: '1,170', flag: false }, ] }, { city: '上海', sales: '20,760', flag: true, brands: [ { name: '可爱多', num: '2,345', flag: true }, { name: '娃哈哈', num: '7,109', flag: true }, { name: '喜之郎', num: '3,701', flag: false }, { name: '八喜', num: '6,080', flag: false }, { name: '小洋人', num: '2,724', flag: false }, { name: '好多鱼', num: '2,998', flag: true }, ] }, { city: '江苏', sales: '23,252', flag: false, brands: [ { name: '可爱多', num: '2,156', flag: false }, { name: '娃哈哈', num: '2,456', flag: true }, { name: '喜之郎', num: '9,737', flag: true }, { name: '八喜', num: '2,080', flag: true }, { name: '小洋人', num: '8,724', flag: true }, { name: '好多鱼', num: '1,770', flag: false }, ] }, { city: '山东', sales: '20,760', flag: true, brands: [ { name: '可爱多', num: '9,567', flag: true }, { name: '娃哈哈', num: '2,345', flag: false }, { name: '喜之郎', num: '9,037', flag: false }, { name: '八喜', num: '1,080', flag: true }, { name: '小洋人', num: '4,724', flag: false }, { name: '好多鱼', num: '9,999', flag: true }, ] } ] // 2.根据数据渲染各省热销sup模块内容 // 遍历hotData对象 var supHTML = "" $.each(hotData,function(index,item) { // console.log(item); supHTML += `<li> <span>${item.city}</span> <span>${item.sales}<s class=${item.flag? "icon-up" : "icon-down"}></s></span> </li>`; }); $(".sup").html(supHTML); // 3.当鼠标进入tab的时候 // 鼠标经过当前的li 要高亮显示(用到事件委托) $(".province .sup").on("mouseenter","li",function() { index = $(this).index(); render($(this)); }); //声明一个函数,里面设置sup当前li高亮,还有对应的品牌对象渲染 function render(that) { that .addClass("active") .siblings() .removeClass(); // 拿到当前城市的品牌对象 // console.log($(this).index()); // 可以通过hotData[$(this).index()] 得到当前的城市 // console.log(hotData[$(this).index()]); // 我们可以通过hotData[$(this).index()].brands 拿到的是城市对象的品牌种类 // console.log(hotData[$(this).index()].brands); // 开始遍历品牌数组 var subHTML = ""; $.each(hotData[that.index()].brands,function(index,item){ // 是对应城市的每一个品牌对象 // console.log(item); subHTML += `<li><span>${item.name}</span><span> ${item.num}<s class= ${item.flag ? "icon-up" : "icon-down"} ></s></span></li>`; }); // 把生成的6个小li字符串给 sub dom盒子 $(".sub").html(subHTML); } //默认把第一个li处于鼠标经过状态 var lis =$(".province .sup li"); lis.eq(0).mouseenter(); //开启定时器 var index = 0; var timer = setInterval(function(){ index++; if(index >=5) index = 0; // lis.eq(index).mouseenter(); render(lis.eq(index)); },2000); $(".province .sup").hover( //鼠标经过事件 function(){ clearInterval(timer); }, // 鼠标离开事件 function(){ clearInterval(timer); timer = setInterval(function(){ index++; if(index >=5) index = 0; // lis.eq(index).mouseenter(); render(lis.eq(index)); },2000); } ); })();
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。