前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【1000套 毕设项目精品实战案例】
❤ 【 20套 VUE+Echarts 大数据可视化源码】
❤ 【150套 HTML+ Echarts大数据可视化源码 】
文章目录
前言一、Echart是什么二、ECharts入门教程三、作品演示四、代码实现1.HTML2.CSS3.JavaScript五、更多干货一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
5 分钟上手ECharts
三、作品演示
四、代码实现
1.HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="css/index.css"><link rel="stylesheet" href="fonts/icomoon.css"></head><body><div class="viewport"><div class="column"><div class="overview panel"><div class="inner"><div class="item"><h4>2,190</h4><span><i class="icon-dot" style="color: #006cff"></i>设备总数</span></div><div class="item"><h4>190</h4><span><i class="icon-dot" style="color: #6acca3"></i>季度新增</span></div><div class="item"><h4>3,001</h4><span><i class="icon-dot" style="color: #6acca3"></i>运营设备</span></div><div class="item"><h4>108</h4><span><i class="icon-dot" style="color: #ed3f35"></i>异常设备</span></div></div></div><div class="monitor panel"><div class="inner"><div class="tabs"><a href="javascript:;" data-index="0" class="active">故障设备监控</a><a href="javascript:;" data-index="1">异常设备监控</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">0701</span><span class="col">11北京市昌平西路金燕龙写字楼</span><span class="col">1000001</span><span class="icon-dot"></span></div><div class="row"><span class="col">0601</span><span class="col">北京市昌平区城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0704</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000003</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建路金燕龙写字楼</span><span class="col">1000004</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000005</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000006</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建西路金燕龙写字楼</span><span class="col">1000007</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000008</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000009</span><span class="icon-dot"></span></div><div class="row"><span class="col">0710</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">0701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000001</span><span class="icon-dot"></span></div><div class="row"><span class="col">0701</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0703</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0704</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0705</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0706</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0707</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0708</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0709</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">0710</span><span class="col">北京市昌平区建材城西路金燕龙写字楼</span><span class="col">1000002</span><span class="icon-dot"></span></div></div></div></div></div></div><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></div><div class="column"><div class="map"><h3><span class="icon-cube"></span> 设备数据统计</h3><div class="chart"><div class="geo"></div></div></div><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></div><div class="column"><div class="order panel"><div class="inner"><div class="filter"><a href="javascript:;" data-key="day365" class="active">365天</a><a href="javascript:;" data-key="day90">90天</a><a href="javascript:;" data-key="day30">30天</a><a href="javascript:;" data-key="day1">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><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><div class="wrap"><div class="channel panel"><div class="inner"><h3>渠道分布</h3><div class="data"><div class="item"><h4>39 <small>%</small></h4><span><i class="icon-plane"></i>机场</span></div><div class="item"><h4>28 <small>%</small></h4><span><i class="icon-bag"></i>商场</span></div></div><div class="data"><div class="item"><h4>20 <small>%</small></h4><span><i class="icon-train"></i>地铁</span></div><div class="item"><h4>13 <small>%</small></h4><span><i class="icon-bus"></i>火车站</span></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><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"></ul></div></div></div></div></div></div><script src="/jquery/jquery-1.10.2.js"></script><script src="/jquery/echarts-4.2.1.min.js"></script><script src="js/index.js"></script><script src="js/china.js"></script><script src="js/mymap.js"></script></body></html>
2.CSS
body {line-height: 1.15;font-size: .5rem;margin: 0;padding: 0;background-color: #0d1944}* {margin: 0;padding: 0;font-weight: 400}ul {list-style: none}a {text-decoration: none}.viewport {min-width: 1024px;max-width: 1920px;min-height: 780px;margin: 0 auto;background: url(../images/logo.png) no-repeat 0 0/contain;display: flex;padding: 3.667rem .833rem 0}.column {flex: 3;position: relative}.column:nth-child(2) {flex: 4;margin: 1.333rem .833rem 0}.panel {box-sizing: border-box;border: 2px solid red;border-image: url(../images/border.png) 51 38 21 132;border-width: 2.125rem 1.583rem .875rem 5.5rem;position: relative;margin-bottom: .833rem}.panel .inner {position: absolute;top: -2.125rem;right: -1.583rem;bottom: -.875rem;left: -5.5rem;padding: 1rem 1.5rem}.panel h3 {font-size: .833rem;color: #fff}.overview {height: 4.583rem}.overview .inner {display: flex;justify-content: space-between}.overview h4 {font-size: 1.167rem;padding-left: .2rem;color: #fff;margin-bottom: .333rem}.overview span {font-size: .667rem;color: #4c9bfd}.monitor {height: 20rem}.monitor .inner {padding: 1rem 0;display: flex;flex-direction: column}.monitor .tabs {padding: 0 1.5rem;margin-bottom: .75rem}.monitor .tabs a {color: #1950c4;font-size: .75rem;padding: 0 1.125rem}.monitor .tabs a:first-child {border-right: .083rem solid #00f2f1;padding-left: 0}.monitor .tabs a.active {color: #fff}.monitor .content {flex: 1;display: none;position: relative}.monitor .head {background: rgba(255, 255, 255, .1);font-size: .583rem;padding: .5rem 1.5rem;color: #68d8fe;display: flex;justify-content: space-between;line-height: 1.05}.monitor .col:nth-child(1) {width: 3.2rem}.monitor .col:nth-child(2) {width: 8.4rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}.monitor .col:nth-child(3) {width: 3.2rem}.monitor .marquee-view {position: absolute;top: 1.6rem;bottom: 0;width: 100%;overflow: hidden}.monitor .row {line-height: 1.05;padding: .5rem 1.5rem;color: #61a8ff;font-size: .5rem;position: relative;display: flex;justify-content: space-between}.monitor .row:hover {color: #68d8ff;background: rgba(255, 255, 255, .1)}.monitor .row:hover .icon-dot {opacity: 1}.monitor .icon-dot {position: absolute;left: .64rem;opacity: 0}.monitor .marquee-view {position: absolute;top: 1.6rem;bottom: 0;width: 100%;overflow: hidden}.monitor .row {line-height: 1.05;padding: .5rem 1.5rem;color: #61a8ff;font-size: .5rem;position: relative;display: flex;justify-content: space-between}.monitor .row:hover {color: #68d8ff;background: rgba(255, 255, 255, .1)}.monitor .row:hover .icon-dot {opacity: 1}.monitor .icon-dot {position: absolute;left: .64rem;opacity: 0}@keyframes scroll-top {0% {}100% {transform: translateY(-50%)}}.monitor .marquee {animation: scroll-top 15s linear infinite}.monitor .marquee:hover {animation-play-state: paused}.point {height: 14.167rem}.point .chart {display: flex;margin-top: 1rem;justify-content: space-between}.point .pie {width: 13rem;height: 10rem;margin-left: -.4rem}.point .data {display: flex;flex-direction: column;justify-content: space-between;width: 7rem;padding: 1.5rem 1.25rem;box-sizing: border-box;background-image: url(../images/rect.png);background-size: cover}.point h4 {margin-bottom: .5rem;font-size: 1.167rem;color: #fff}.point span {display: block;color: #4c9bfd;font-size: .667rem}.map {height: 24.1rem;margin-bottom: .833rem;display: flex;flex-direction: column}.map h3 {line-height: 1;padding: .667rem 0;margin: 0;font-size: .833rem;color: #fff}.map .icon-cube {color: #68d8fe}.map .chart {flex: 1;background-color: rgba(255, 255, 255, .05)}.map .geo {width: 100%;height: 100%}.users {height: 14.167rem;display: flex}.users .chart {display: flex;margin-top: 1rem}.users .bar {width: 24.5rem;height: 10rem}.users .data {display: flex;flex-direction: column;justify-content: space-between;width: 7rem;padding: 1.5rem 1.25rem;box-sizing: border-box;background-image: url(../images/rect.png);background-size: cover}.users h4 {margin-bottom: .5rem;font-size: 1.167rem;color: #fff}.users span {display: block;color: #4c9bfd;font-size: .667rem}.order {height: 6.167rem}.order .filter {display: flex}.order .filter a {display: block;height: .75rem;line-height: 1;padding: 0 .75rem;color: #1950c4;font-size: .75rem;border-right: .083rem 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: .833rem}.order .data {display: flex;margin-top: .833rem}.order .item {width: 50%}.order h4 {font-size: 1.167rem;color: #fff;margin-bottom: .417rem}.order span {display: block;color: #4c9bfd;font-size: .667rem}.sales {height: 10.333rem}.sales .caption {display: flex;line-height: 1}.sales h3 {height: .75rem;padding-right: .75rem;border-right: .083rem solid #00f2f1}.sales a {padding: .167rem;font-size: .667rem;margin: -.125rem 0 0 .875rem;border-radius: .125rem;color: #0bace6}.sales a.active {background-color: #4c9bfd;color: #fff}.sales .inner {display: flex;flex-direction: column}.sales .chart {flex: 1;padding-top: .6rem;position: relative}.sales .label {position: absolute;left: 1.75rem;top: .75rem;color: #4996f5;font-size: .583rem}.sales .line {width: 100%;height: 100%}.wrap {display: flex}.channel,.quarter {flex: 1;height: 9.667rem}.channel {margin-right: .833rem}.channel .data {overflow: hidden}.channel .item {margin-top: .85rem}.channel .item:first-child {float: left}.channel .item:last-child {float: right}.channel h4 {color: #fff;font-size: 1.333rem;margin-bottom: .2rem}.channel small {font-size: 50%}.channel span {display: block;color: #4c9bfd;font-size: .583rem}.quarter .inner {display: flex;flex-direction: column;margin: 0 -.25rem}.quarter .chart {flex: 1;padding-top: .75rem}.quarter .box {position: relative}.quarter .label {transform: translate(-50%, -30%);color: #fff;font-size: 1.25rem;position: absolute;left: 50%;top: 50%}.quarter .label small {font-size: 50%}.quarter .gauge {height: 3.5rem}.quarter .data {display: flex;justify-content: space-between}.quarter .item {width: 50%}.quarter h4 {color: #fff;font-size: 1rem;margin-bottom: .4rem}.quarter span {display: block;width: 100%;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;color: #4c9bfd;font-size: .583rem}.top {height: 11.8rem}.top .inner {display: flex}.top .all {display: flex;flex-direction: column;width: 7rem;color: #4c9bfd;font-size: .6rem;vertical-align: middle}.top .all ul {padding-left: .5rem;margin-top: .5rem;flex: 1;display: flex;flex-direction: column;justify-content: space-around}.top .all li {overflow: hidden}.top .all [class^=icon-] {font-size: 1.5rem;vertical-align: middle;margin-right: .5rem}.top .province {flex: 1;display: flex;flex-direction: column;color: #fff}.top .province i {padding: 0 .5rem;margin-top: .208rem;float: right;font-style: normal;font-size: .583rem;color: #0bace6}.top .province s {display: inline-block;transform: scale(.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: .6rem}.top .province ul {flex: 1;line-height: 1;margin-bottom: .25rem}.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: .583rem}.top .province ul.sup li {color: #4995f4;padding: .5rem}.top .province ul.sup li.active {color: #a3c6f2;background-color: rgba(10, 67, 188, .2)}.top .province ul.sub {display: flex;flex-direction: column;justify-content: space-around;font-size: .5rem;background-color: rgba(10, 67, 188, .2)}.top .province ul.sub li {color: #52ffff;padding: .417rem .6rem}.clock {position: absolute;top: -1.5rem;right: 1.667rem;font-size: .833rem;color: #0bace6}.clock i {margin-right: 5px;font-size: .833rem}@media screen and (max-width:1600px) {.top span {transform: scale(.9)}.top .province ul.sup li {padding: .4rem .5rem}.top .province ul.sub li {padding: .23rem .5rem}.quarter span {transform: scale(.9)}}
3.JavaScript
(function() {var setFont = function() {var html = document.documentElement;var width = html.clientWidth;if (width < 1024) {width = 1024;}if (width > 1920) {width = 1920;}var fontSize = width / 80 + 'px';html.style.fontSize = fontSize;}setFont();window.onresize = function() {setFont();}})();(function() {$('.monitor').on('click', '.tabs a', function() {$(this).addClass('active').siblings().removeClass('active');var index = $(this).attr('data-index');$('.content').eq(index).show().siblings('.content').hide();});$('.monitor .marquee').each(function() {var rows = $(this).children().clone();$(this).append(rows);});})();(function() {var myChart = echarts.init(document.querySelector('.pie'));var option = {tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c} ({d}%)'},series: [{name: '面积模式',type: 'pie',radius: ['10%', '70%'],center: ['50%', '50%'],roseType: 'area',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: '湖北'}],labelLine: {length: 8,length2: 10,},}],color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],label: {fontSize: 10},};myChart.setOption(option);})();(function() {var item = {name: '',value: 1200,itemStyle: {color: '#254065'},emphasis: {itemStyle: {color: '#254065'}},tooltip: {extraCssText: 'opacity:0'}}var option = {tooltip: {trigger: 'item',axisPointer: {type: 'line'}},grid: {top: '6%',right: '3%',bottom: '3%',left: '0%',containLabel: true,show: true,borderColor: 'rgba(0, 240, 255, 0.3)'},xAxis: [{type: 'category',data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],axisTick: {alignWithLabel: true,alignWithLabel: false,show: false},axisLabel: {color: '#4c9bfd'}}],yAxis: [{type: 'value',axisTick: {show: false},axisLabel: {color: '#4c9bfd'},splitLine: {lineStyle: {color: 'rgba(0, 240, 255, 0.3)'}}}],series: [{name: '直接访问',type: 'bar',barWidth: '60%',data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240],itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: 'red'}, {offset: 1,color: 'blue'}])}}]};var myChart = echarts.init(document.querySelector('.bar'));myChart.setOption(option);})();(function() {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 .data h4:eq(0)');var h4amount = $('.order .data h4:eq(1)');$('.order').on('click', '.filter a', function() {$(this).addClass('active').siblings().removeClass('active');var key = $(this).attr('data-key');var val = data[key];h4orders.html(val.orders);h4amount.html(val.amount);});var index = 0;window.setInterval(function() {index++;if (index > 3) {index = 0;}$('.order .filter a').eq(index).click();}, 1000);})();(function() {var option = {xAxis: {type: 'category',data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],axisTick: {show: false},axisLabel: {color: '#4c9bfd'},axisLine: {show: false},boundaryGap: false},yAxis: {type: 'value',axisTick: {show: false},axisLabel: {color: '#4c9bfd'},splitLine: {lineStyle: {color: '#012f4a'}}},series: [{name: '预期销售额',data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],type: 'line',smooth: true,itemStyle: {color: '#00f2f1'}}, {name: '实际销售额',data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],type: 'line',smooth: true,itemStyle: {color: '#ed3f35'}}],grid: {show: true,top: '20%',left: '3%',right: '4%',bottom: '3%',borderColor: '#012f4a',containLabel: true},legend: {textStyle: {color: '#4c9bfd'},right: '10%'},};var myChart = echarts.init(document.querySelector('.line'))myChart.setOption(option);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]]}$('.sales').on('click', '.caption a', function() {$(this).addClass('active').siblings('a').removeClass('active');var arr = data[$(this).attr('data-type')];option.series[0].data = arr[0];option.series[1].data = arr[1];myChart.setOption(option);});var index = 0;var dsq = window.setInterval(function() {index++;if (index > 3) {index = 0;}$('.sales .caption a').eq(index).click();}, 1000);$('.line').mouseenter(function() {window.clearInterval(dsq);});$('.line').mouseleave(function() {dsq = window.setInterval(function() {index++;if (index > 3) {index = 0;}$('.sales .caption a').eq(index).click();}, 1000);});})();(function() {var option = {series: [{type: 'pie',radius: ['130%', '150%'],center: ['48%', '80%'],label: {show: false,},startAngle: 180,hoverOffset: 0,data: [{value: 100}, {value: 100,}, {value: 200,itemStyle: {color: 'transparent'}}]}]};var myChart = echarts.init(document.querySelector('.gauge'));myChart.setOption(option);})();(function() {var data = [{name: '可爱多',num: '9,086'}, {name: '娃哈哈',num: '8,341'}, {name: '喜之郎',num: '7,407'}, {name: '八喜',num: '6,080'}, {name: '小洋人',num: '6,724'}, {name: '好多鱼',num: '2,170'}, ];$('.province').on('mouseenter', '.sup li', function() {$(this).addClass('active').siblings().removeClass('active');var randomDate = data.sort(function() {return 0.5 - Math.random()});var html = '';randomDate.forEach(function(val) {html += `<li><span>${val.name}</span><span>${val.num}<s class="icon-up"></s></span></li>`;});$('.province .sub').html(html);});$('.province .sup li').eq(0).mouseenter();var index = 0;window.setInterval(function() {index++;if (index > 4) {index = 0;}$('.province .sup li').eq(index).mouseenter();}, 1000);})();
五、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
