基于Echarts的可视化项目

整体的效果

在这里插入图片描述

概览区域

在这里插入图片描述

 <!-- 概览区域模块制作 --><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 = {// 修改线性渐变色方式 1color: new echarts.graphic.LinearGradient(// (x1,y2) 点到点 (x2,y2) 之间进行渐变0, 0, 0, 1,[{ offset: 0, color: '#00fffb' }, // 0 起始颜色{ offset: 1, color: '#0061ce' }  // 1 结束颜色]),// 工具提示tooltip: {// 触发类型  经过轴触发axis  经过轴触发itemtrigger: '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 = 0var $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 高亮显示 调用activeindex = $(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:{// 修改线性渐变色方式 1color: 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);});
})();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/684047.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud-搭建Nacos配置中心

一、Nacos 功能介绍 Nacos&#xff08;Dynamic Naming and Configuration Service&#xff09;是阿里巴巴开源的一个分布式服务注册、配置管理&#xff0c;以及服务健康管理平台。在微服务架构中&#xff0c;配置管理是至关重要的一环&#xff0c;Nacos 提供了可靠、动态的配置…

问题:如果要编辑建好的建筑和空间,需要在分级按钮( )和细分操作按钮楼层下,才能选中建筑物和空间; #微信#媒体#其他

问题&#xff1a;如果要编辑建好的建筑和空间&#xff0c;需要在分级按钮&#xff08; &#xff09;和细分操作按钮楼层下&#xff0c;才能选中建筑物和空间&#xff1b; A、楼层 B、规划图 C、全景 D、建筑物 参考答案如图所示

<网络安全>《33 网络信息安全基础(4)网络安全工程师进阶体系(一)》

1 图谱 1 基础入门 1.1 网络安全导论 网络安全行业简介&#xff1a; 行业前景 历史 重要事件 网络安全意识与法律法规 安全意识 法律法规 案例 网络安全管理概述 安全运营、运维、模型 等保测评 等保简介、等保规定、流程和规范 1.2 渗透测试基础 渗透测试概述 - 流程、分…

jmeter-07jmeter与数据库关联

文章目录 一、JDBC驱动下载二、连接数据库三、写对应的SQL四、进行断言处理方法一:使用beanshell进行断言方法二:使用json进行断言四、为什么数据库查询的结果赋值给了**sql_name**,但是在断言的时候使用的是**sql_name_1**呢?一、JDBC驱动下载 JDBC驱动下载链接 1)5.x.x…

公需课考试怎么搜题找答案? #学习方法#学习方法

这些软件以其强大的搜索引擎和智能化的算法&#xff0c;为广大大学生提供了便捷、高效的解题方式。下面&#xff0c;让我们一起来了解几款备受大学生欢迎的搜题软件吧&#xff01; 1.粉鹿搜题 这是一个公众号 在线搜题刷题平台&#xff0c;支持语言、文字、拍照多种搜索方式…

VitePress-16- 配置- head 的配置网页icon与插入一个script标签

作用说明 head 配置项&#xff0c;可以在页面 HTML 的 <head> 标签中呈现的其他元素。 用户添加的标签在结束 head 标签之前呈现&#xff0c;在 VitePress 标签之后。说白了&#xff0c;就是自定义一些 head 标签中的元素&#xff0c;例如 &#xff1a;页面的icon等。 由…

ubuntu22.04@laptop OpenCV Get Started: 009_image_thresholding

ubuntu22.04laptop OpenCV Get Started: 009_image_thresholding 1. 源由2. image_thresholding应用Demo2.1 C应用Demo2.2 Python应用Demo 3. 重点分析3.1 Binary Thresholding ( THRESH_BINARY )3.2 Inverse-Binary Thresholding ( THRESH_BINARY_INV )3.3 Truncate Threshold…

(15)Hive调优——数据倾斜的解决指南

目录 前言 一、什么是数据倾斜 二、发生数据倾斜的表现 2.1 MapReduce任务 2.2 Spark任务 三、如何定位发生数据倾斜的代码 四、发生数据倾斜的原因 3.1 key分布不均匀 3.1.1 某些key存在大量相同值 3.1.2 存在大量异常值或空值 3.2 业务数据本身的特性 3.3 SQL语句…

扶贫|精准扶贫管理系统|基于Springboot的精准扶贫管理系统设计与实现(源码+数据库+文档)

精准扶贫管理系统目录 目录 基于Springboot的精准扶贫管理系统设计与实现 一、前言 二、系统功能设计 三、系统实现 1、管理员模块的实现 &#xff08;1&#xff09;用户信息管理 &#xff08;2&#xff09;贫困户信息管理 &#xff08;3&#xff09;新闻类型管理 &a…

GPT-4影响高度创新思维的领域(一)

GPT-4的应用范围不再局限于对现有信息的检索、整理和复述&#xff0c;而是进一步拓展到了诸如文学创作、科学假设生成、教育辅导、商业策略建议等需要高度创新思维的领域。这种独立思考和创新能力赋予了GPT-4作为虚拟助手时更加丰富多元的角色定位&#xff0c;使其成为一种强大…

备战蓝桥杯---图论之最短路dijkstra算法

目录 先分个类吧&#xff1a; 1.对于有向无环图&#xff0c;我们直接拓扑排序&#xff0c;和AOE网类似&#xff0c;把取max改成min即可。 2.边权全部相等&#xff0c;直接BFS即可 3.单源点最短路 从一个点出发&#xff0c;到达其他顶点的最短路长度。 Dijkstra算法&#x…

二叉树相关OJ题

创作不易&#xff0c;感谢三连&#xff01;&#xff01; 一、选择题 1、某二叉树共有 399 个结点&#xff0c;其中有 199 个度为 2 的结点&#xff0c;则该二叉树中的叶子结点数为&#xff08; &#xff09; A.不存在这样的二叉树 B.200 C.198 D.199解析&#xff1a;选B&…

WebSocket | 基于TCP的全双工通信网络协议

文章目录 1、介绍2、示例2.1、分析2.2、代码开发2.3、功能测试 ​&#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#xff0c;擅长web应用开发、数据结构和算法&#xff0c;初步涉猎Python人工智能开…

Android14之Android Rust模块编译语法(一百八十七)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

问题:从完整的问题解决过程来看,( )是首要环节。A.理解问题 B.提出假设C.发现问题 D.检验假设 #学习方法#学习方法

问题&#xff1a;从完整的问题解决过程来看&#xff0c;&#xff08; &#xff09;是首要环节。A&#xff0e;理解问题 B&#xff0e;提出假设C&#xff0e;发现问题 D&#xff0e;检验假设 A.理解问题 B.提出假设 C&#xff0e;发现问题 参考答案如图所示

Python setattr函数

在Python编程中&#xff0c;setattr()函数是一个有用且灵活的内置函数&#xff0c;用于设置对象的属性值。它可以在运行时动态地设置对象的属性&#xff0c;无论是新建对象还是已有对象。本文将深入探讨setattr()函数的用法、语法、示例代码&#xff0c;并探讨其在实际编程中的…

MySQL数据库基础(三):Linux系统下的MySQL安装与使用

文章目录 Linux系统下的MySQL安装与使用 一、MySQL部署安装 1. 卸载自带的MySQL8 2. 删除自带配置文件 3. 下载MySQL源 4. 安装MySQL源 5. 使用yum安装MySQL 6. 获取默认密码 7. 登录MySQL 8. 修改密码 二、登陆MySQL数据库 1、本地&#xff08;针对本地MySQL&…

【DDD】学习笔记-对象图与聚合

类之间的关系 在理解领域驱动设计的聚合&#xff08;Aggregate&#xff09;之前&#xff0c;我们需要先理清面向对象设计中对象之间的关系。正如生活中我们不可能做到“鸡犬之声相闻&#xff0c;老死不相往来”一般&#xff0c;对象之间必然存在关系&#xff0c;如此才可以通力…

C++入门篇(5)——类和对象(2)

目录 1.类的6个默认成员函数 2.构造函数 2.2 概念 2.3 特性 3.析构函数 3.1 概念 3.2 特性 1.类的6个默认成员函数 如果一个类一个成员都没有&#xff0c;那么这个类就是空类。但空类并非什么都没有&#xff0c;编译器会对任何一个类都生成六个默认成员函数。 2.构造…

Git 初学

目录 一、需求的产生 二、版本控制系统理解 1. 认识版本控制系统 2. 版本控制系统分类 &#xff08;1&#xff09;集中式版本控制系统 缺点&#xff1a; &#xff08;2&#xff09;分布式版本控制系统 三、初识 git 四、git 的使用 例&#xff1a;将 “ OLED文件夹 ”…