前言
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。
本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
⚽精彩专栏推荐👇🏻👇🏻👇🏻
❤ 【作者主页——🔥获取更多优质源码】
❤ 【1000套 毕设项目精品实战案例】
❤ 【 20套 VUE+Echarts 大数据可视化源码】
❤ 【150套 HTML+ Echarts大数据可视化源码 】
文章目录
前言一、Echart是什么二、ECharts入门教程三、作品演示四、代码实现1.HTML2.CSS3.JavaScript4.Echarts五、更多干货一、Echart是什么
ECharts是一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
二、ECharts入门教程
5 分钟上手ECharts
三、作品演示
四、代码实现
1.HTML
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>地图数据可视化</title><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./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></body><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></html>
2.CSS
body {line-height: 1.15;font-size: .5rem;margin: 0;padding: 0;background-repeat: no-repeat;background-position: 0 0/cover;background-color: #101129}* {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}
3.JavaScript
(function() {var setFont = function() {var html = document.documentElement;var width = html.clientWidth;if (width < 1024) width = 1024if (width > 1920) width = 1920var fontSize = width / 80 + 'px';html.style.fontSize = fontSize;}setFont();window.onresize = function() {setFont();}})();(function() {$('.monitor').on('click', ' a', function() {$(this).addClass('active').siblings().removeClass('active');var index = $(this).index();$('.content').eq(index).show().siblings('.content').hide();});$('.monitor .marquee').each(function(index, dom) {var rows = $(dom).children().clone();$(dom).append(rows);});})();(function() {var myechart = echarts.init($('.pie')[0]);option = {tooltip: {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"},series: [{name: '地区',type: 'pie',radius: ['10%', '70%'],center: ['50%', '50%'],roseType: 'radius',data: [{value: 20,name: '云南'}, {value: 5,name: '北京'}, {value: 15,name: '山东'}, {value: 25,name: '河北'}, {value: 20,name: '江苏'}, {value: 35,name: '浙江'}, {value: 30,name: '四川'}, {value: 40,name: '湖北'}],label: {fontSize: 10},labelLine: {length: 8,length2: 10}}],color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']};myechart.setOption(option);})();(function() {var item = {name: '',value: 1200,itemStyle: {color: '#254065'},emphasis: {itemStyle: {color: '#254065'}},tooltip: {extraCssText: 'opacity:0'}};option = {tooltip: {trigger: 'item',axisPointer: {type: 'shadow'}},grid: {left: '0',right: '3%',bottom: '3%',top: '5%',containLabel: true,show: true,borderColor: 'rgba(0, 240, 255, 0.3)'},xAxis: [{type: 'category',data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],axisTick: {alignWithLabel: false,show: false},axisLabel: {color: '#4c9bfd'}}],yAxis: [{type: 'value',axisTick: {alignWithLabel: false,show: false},axisLabel: {color: '#4c9bfd'},splitLine: {lineStyle: {color: 'rgba(0, 240, 255, 0.3)'}},}],series: [{itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#00fffb'}, {offset: 1,color: '#0061ce'}])},name: '用户统计',type: 'bar',barWidth: '60%',data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]}]};var myechart = echarts.init($('.users .bar')[0]);myechart.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'}}$('.order').on('click', '.filter a', function() {$(this).addClass('active').siblings().removeClass('active');var key = $(this).attr('data-key');key = data[key];$('.order .item h4:eq(0)').text(key.orders);$('.order .item h4:eq(1)').text(key.amount);});var index = 0;var aclick = $('.order a');setInterval(function() {index++;if (index > 3) {index = 0;}aclick.eq(index).click();}, 3000);})();(function() {var option = {tooltip: {trigger: 'axis'},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'},axisLine: {show: false},boundaryGap: false},legend: {textStyle: {color: '#4c9bfd'},right: '10%'},grid: {show: true,top: '20%',left: '3%',right: '4%',bottom: '3%',borderColor: '#012f4a',containLabel: true},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'}}]};var myechart = echarts.init($('.line')[0]);myechart.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 key = $(this).attr('data-type');key = data[key];option.series[0].data = key[0];option.series[1].data = key[1];myechart.setOption(option);});var index = 0;var timer = setInterval(function() {index++;if (index > 4) {index = 0;};$('.sales .caption a').eq(index).click();}, 2000);})();(function() {var option = {series: [{type: 'pie',radius: ['130%', '150%'],center: ['50%', '80%'],label: {show: false,},startAngle: 180,hoverOffset: 0,data: [{value: 100,itemStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#00c9e0'}, {offset: 1,color: '#005fc1'}]}}}, {value: 100,itemStyle: {color: '#12274d'}}, {value: 200,itemStyle: {color: 'transparent'}}]}]};var myechart = echarts.init($('.gauge')[0]);myechart.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'}, ]$('.inner').on('mouseenter', '.sup li', function() {$(this).addClass('active').siblings().removeClass('active');var radomData = data.sort(function(a, b) {return 0.5 - Math.random()});var html = '';radomData.forEach(function(item) {html += `<li><span>${item.name}</span><span>${item.num} <s class="icon-up"></s></span></li>`;});$('.sub').html(html);});$('.province .sup li').eq(0).mouseenter();var index = 0;var timer = setInterval(() => {index++;if (index > 5) {index = 0;}$('.sup li').eq(index).mouseenter();}, 2000);})();
4.Echarts
var geoCoordMap = {'新疆玛纳斯基地': [86.22, 44.30],'九江': [116.00, 29.70],'新乡': [116.402217, 35.311657],' ': [79.92, 37.12],' ': [86.85, 47.70],'若羌县': [88.17, 39.02],'上海': [121.4648, 31.2891],'东莞': [113.8953, 22.901],'东营': [118.7073, 37.5513],'中山': [113.4229, 22.478],'临汾': [111.4783, 36.1615],'临沂': [118.3118, 35.2936],'丹东': [124.541, 40.4242],'丽水': [119.5642, 28.1854],'乌鲁木齐': [87.9236, 43.5883],'佛山': [112.8955, 23.1097],'保定': [115.0488, 39.0948],'兰州': [103.5901, 36.3043],'包头': [110.3467, 41.4899],'北京': [116.4551, 40.2539],'北海': [109.314, 21.6211],'南京': [118.8062, 31.9208],'南宁': [108.479, 23.1152],'南昌': [116.0046, 28.6633],'南通': [121.1023, 32.1625],'厦门': [118.1689, 24.6478],'台州': [121.1353, 28.6688],'合肥': [117.29, 32.0581],'呼和浩特': [111.4124, 40.4901],'咸阳': [108.4131, 34.8706],'哈尔滨': [127.9688, 45.368],'唐山': [118.4766, 39.6826],'嘉兴': [120.9155, 30.6354],'大同': [113.7854, 39.8035],'大连': [122.2229, 39.4409],'天津': [117.4219, 39.4189],'太原': [112.3352, 37.9413],'威海': [121.9482, 37.1393],'宁波': [121.5967, 29.6466],'宝鸡': [107.1826, 34.3433],'宿迁': [118.5535, 33.7775],'常州': [119.4543, 31.5582],'广州': [113.5107, 23.2196],'廊坊': [116.521, 39.0509],'延安': [109.1052, 36.4252],'张家口': [115.1477, 40.8527],'徐州': [117.5208, 34.3268],'德州': [116.6858, 37.2107],'惠州': [114.6204, 23.1647],'成都': [103.9526, 30.7617],'扬州': [119.4653, 32.8162],'承德': [117.5757, 41.4075],'拉萨': [91.1865, 30.1465],'无锡': [120.3442, 31.5527],'日照': [119.2786, 35.5023],'昆明': [102.9199, 25.4663],'杭州': [119.5313, 29.8773],'枣庄': [117.323, 34.8926],'柳州': [109.3799, 24.9774],'株洲': [113.5327, 27.0319],'武汉': [114.3896, 30.6628],'汕头': [117.1692, 23.3405],'江门': [112.6318, 22.1484],'沈阳': [123.1238, 42.1216],'沧州': [116.8286, 38.2104],'河源': [114.917, 23.9722],'泉州': [118.3228, 25.1147],'泰安': [117.0264, 36.0516],'泰州': [120.0586, 32.5525],'济南': [117.1582, 36.8701],'济宁': [116.8286, 35.3375],'海口': [110.3893, 19.8516],'淄博': [118.0371, 36.6064],'淮安': [118.927, 33.4039],'深圳': [114.5435, 22.5439],'清远': [112.9175, 24.3292],'温州': [120.498, 27.8119],'渭南': [109.7864, 35.0299],'湖州': [119.8608, 30.7782],'湘潭': [112.5439, 27.7075],'滨州': [117.8174, 37.4963],'潍坊': [119.0918, 36.524],'烟台': [120.7397, 37.5128],'玉溪': [101.9312, 23.8898],'珠海': [113.7305, 22.1155],'盐城': [120.2234, 33.5577],'盘锦': [121.9482, 41.0449],'石家庄': [114.4995, 38.1006],'福州': [119.4543, 25.9222],'秦皇岛': [119.2126, 40.0232],'绍兴': [120.564, 29.7565],'聊城': [115.9167, 36.4032],'肇庆': [112.1265, 23.5822],'舟山': [122.2559, 30.2234],'苏州': [120.6519, 31.3989],'莱芜': [117.6526, 36.2714],'菏泽': [115.6201, 35.2057],'营口': [122.4316, 40.4297],'葫芦岛': [120.1575, 40.578],'衡水': [115.8838, 37.7161],'衢州': [118.6853, 28.8666],'西宁': [101.4038, 36.8207],'西安': [109.1162, 34.],'贵阳': [106.6992, 26.7682],'连云港': [119.1248, 34.552],'邢台': [114.8071, 37.2821],'邯郸': [114.4775, 36.535],'郑州': [113.4668, 34.6234],'鄂尔多斯': [108.9734, 39.2487],'重庆': [107.7539, 30.1904],'金华': [120.0037, 29.1028],'铜川': [109.0393, 35.1947],'银川': [106.3586, 38.1775],'镇江': [119.4763, 31.9702],'长春': [125.8154, 44.2584],'长沙': [113.0823, 28.2568],'长治': [112.8625, 36.4746],'阳泉': [113.4778, 38.0951],'青岛': [120.4651, 36.3373],'韶关': [113.7964, 24.7028]};var BJData = [[{name: '新乡'}, {name: '新乡',value: 200}],[{name: '新乡'}, {name: '呼和浩特',value: 90}],[{name: '新乡'}, {name: '哈尔滨',value: 90}],[{name: '新乡'}, {name: '石家庄',value: 90}],[{name: '新乡'}, {name: '昆明',value: 30}],[{name: '新乡'}, {name: '北京',value: 100}],[{name: '新乡'}, {name: '长春',value: 40}],[{name: '新乡'}, {name: '重庆',value: 40}],[{name: '新乡'}, {name: '贵阳',value: 50}],[{name: '新乡'}, {name: '南宁',value: 30}],[{name: '新乡'}, {name: '济南',value: 10}],[{name: '新乡'}, {name: '太原',value: 40}],[{name: '新乡'}, {name: '西安',value: 60}],[{name: '新乡'}, {name: '武汉',value: 50}],[{name: '新乡'}, {name: '合肥',value: 40}],[{name: '新乡'}, {name: '南京',value: 30}],[{name: '新乡'}, {name: '沈阳',value: 20}],[{name: '新乡'}, {name: '成都',value: 10}]];var SHData = [[{name: '九江'}, {name: '九江',value: 200}],[{name: '九江'}, {name: '长沙',value: 95}],[{name: '九江'}, {name: '武汉',value: 30}],[{name: '九江'}, {name: '南昌',value: 20}],[{name: '九江'}, {name: '合肥',value: 70}],[{name: '九江'}, {name: '南京',value: 60}],[{name: '九江'}, {name: '福州',value: 50}],[{name: '九江'}, {name: '上海',value: 100}],[{name: '九江'}, {name: '深圳',value: 100}],];var GZData = [[{name: '新疆玛纳斯基地'}, {name: '新疆玛纳斯基地',value: 200}],[{name: '新疆玛纳斯基地'}, {name: ' ',value: 90}],[{name: '新疆玛纳斯基地'}, {name: ' ',value: 40}],[{name: '新疆玛纳斯基地'}, {name: '呼和浩特',value: 90}],[{name: '新疆玛纳斯基地'}, {name: '昆明',value: 40}],[{name: '新疆玛纳斯基地'}, {name: '成都',value: 10}],[{name: '新疆玛纳斯基地'}, {name: '兰州',value: 95}],[{name: '新疆玛纳斯基地'}, {name: '银川',value: 90}],[{name: '新疆玛纳斯基地'}, {name: '西宁',value: 80}],];var planePath = 'path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705';var convertData = function(data) {var res = [];for (var i = 0; i < data.length; i++) {var dataItem = data[i];var fromCoord = geoCoordMap[dataItem[0].name];var toCoord = geoCoordMap[dataItem[1].name];if (fromCoord && toCoord) {res.push([{coord: fromCoord}, {coord: toCoord}]);}}return res;};var color = ['#3ed4ff', '#ffa022', '#a6c84c'];var series = [];[['新乡', BJData],['九江', SHData],['新疆', GZData]].forEach(function(item, i) {series.push({name: item[0] + ' Top10',type: 'lines',zlevel: 1,effect: {show: true,period: 6,trailLength: 0.7,color: '#fff',symbolSize: 3},lineStyle: {normal: {color: color[i],width: 0,curveness: 0.2}},data: convertData(item[1])}, {name: item[0] + ' Top10',type: 'lines',zlevel: 2,effect: {show: true,period: 6,trailLength: 0,symbol: planePath,symbolSize: 15},lineStyle: {normal: {color: color[i],width: 1,opacity: 0.4,curveness: 0.2}},data: convertData(item[1])}, {name: item[0] + ' Top10',type: 'effectScatter',coordinateSystem: 'geo',zlevel: 2,rippleEffect: {brushType: 'stroke'},label: {normal: {show: true,position: 'right',formatter: '{b}'}},symbolSize: function(val) {return val[2] / 8;},itemStyle: {normal: {color: color[i]}},data: item[1].map(function(dataItem) {return {name: dataItem[1].name,value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])};})});});option = {backgroundColor: '#080a20',title: {left: 'left',textStyle: {color: '#fff'}},tooltip: {trigger: 'item'},legend: {orient: 'vertical',top: 'bottom',left: 'right',data: ['北京 Top10', '上海 Top10', '广州 Top10'],textStyle: {color: '#fff'},selectedMode: 'single'},geo: {map: 'china',zoom: 1.2,label: {emphasis: {show: false}},roam: true,itemStyle: {normal: {areaColor: '#142957',borderColor: '#0692a4'},emphasis: {areaColor: '#0b1c2d'}}},series: series};var myecharts = echarts.init($('.map .geo')[0])myecharts.setOption(option)
五、更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、Echarts大数据可视化, 等! 「一起探讨 web前端 ,Node ,Java 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习👇🏻👇🏻👇🏻🔥
