Toggle navigation
跨境电商百度指数
By
勤***王
2020-08-19 07:04:38
脚本
16
21
作品使用的第三方脚本
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
var uploadedDataURL = "/asset/get/s/data-1528971808162-BkOXf61WX.json"; //geoCoordMap把所有可能出现的城市加到数组里面 var geoCoordMap = { "杭州": [119.5313, 29.8773], "苏州": [118.8062, 31.9208], '上海': [121.4648, 31.2891], "天津": [117.4219, 39.4189], '深圳': [114.072026, 22.552194], "成都": [103.9526, 30.7617], "郑州": [113.4668, 34.6234], "宁波": [121.640618, 29.86206], "合肥": [117.29, 32.0581], "重庆": [108.384366, 30.439702], "广州": [113.12244, 23.009505], "大连": [123.1238, 42.1216], "青岛": [117.1582, 36.8701], '北京': [116.4551, 40.2539], '义乌': [120.067209, 29.346921], '东莞': [113.764742, 23.02039], "长沙": [113.0823, 28.2568], "贵阳": [106.6992, 26.7682], '珠海': [113.556111, 22.250876], '威海': [122.109148, 37.516889], "泉州": [118.58, 24.93], "赤峰": [118.87, 42.28], "厦门": [118.1, 24.46], "福州": [119.3, 26.08], "抚顺": [123.97, 41.97], "汕头": [116.69, 23.39], "宁波": [121.56, 29.86], "海口": [110.35, 20.02], "岳阳": [113.09, 29.37], "武汉": [114.31, 30.52], "义乌": [120.06, 29.32], "唐山": [118.02, 39.63], "石家庄": [114.48, 38.03], "哈尔滨": [126.63, 45.75], "兰州": [103.73, 36.03], "贵阳": [106.71, 26.57], "呼和浩特": [111.65, 40.82], "南昌": [115.89, 28.68], "佛山": [113.11, 23.05], "汕头": [116.69, 23.39], "烟台": [121.39, 37.52], "威海": [122.1, 37.5], }; //2013年数据 var d1 = { "杭州": 10, "苏州": 2, '上海': 21, "天津": 4, '深圳': 7, "郑州":7, "成都":5, "宁波":2, "合肥": 1, "重庆": 3, "广州": 19, "大连": 1, "青岛": 2, '北京': 16, '义乌': 2, '东莞': 1, "长沙": 3, "贵阳": 0, '珠海': 0, '威海': 0, '南昌': 1, '西安': 2, '南京': 6, '海口': 0, '厦门': 3, '沈阳': 3, '无锡': 0, '呼和浩特':0, '长春':0, '哈尔滨':1, '武汉':5, '南宁':1, '昆明':1, '兰州':0, '唐山':0, '石家庄':2, '太原':1, '赤峰':0, '抚顺':0, '珲春':0, '绥芬河':0, '徐州':0, '南通':1, '温州':2, '绍兴':0, '芜湖':0, '福州':5, '泉州':2, '赣州':2, '济南':3, '烟台':0, '洛阳':1, '黄石':0, '岳阳':0, '汕头':0, '佛山':0, '泸州':0, '海东':0, '银川':0, }; //2014年数据 var d2 = { "杭州": 131, "苏州": 51, '上海': 114, "天津": 58, '深圳': 104, "郑州":66, "成都":35, "宁波":59, "合肥": 28, "重庆": 68, "广州": 120, "大连": 24, "青岛": 58, '北京': 118, '义乌': 36, '东莞': 46, "长沙": 34, "贵阳": 8, '珠海': 11, '威海': 7, '南昌': 24, '西安': 35, '南京': 42, '海口': 6, '厦门': 59, '沈阳': 18, '无锡': 21, '呼和浩特':7, '长春':13, '哈尔滨':16, '武汉':52, '南宁':14, '昆明':10, '兰州':5, '唐山':3, '石家庄':24, '太原':13, '赤峰':0, '抚顺':0, '珲春':1, '绥芬河':3, '徐州':5, '南通':12, '温州':32, '绍兴':11, '芜湖':3, '福州':72, '泉州':47, '赣州':3, '济南':40, '烟台':14, '洛阳':7, '黄石':1, '岳阳':1, '汕头':8, '佛山':31, '泸州':0, '海东':0, '银川':37, }; //2015年数据 var d3 = { "杭州": 311, "苏州": 174, '上海': 308, "天津": 192, '深圳': 304, "郑州":194, "成都":179, "宁波":191, "合肥": 130, "重庆": 189, "广州": 345, "大连": 139, "青岛": 182, '北京': 336, '义乌': 136, '东莞': 159, "长沙": 151, "贵阳": 81, '珠海': 96, '威海': 80, '南昌': 112, '西安': 163, '南京': 155, '海口': 59, '厦门': 170, '沈阳': 102, '无锡': 110, '呼和浩特':54, '长春':76, '哈尔滨':113, '武汉':187, '南宁':104, '昆明':100, '兰州':48, '唐山':48, '石家庄':110, '太原':80, '赤峰':8, '抚顺':7, '珲春':19, '绥芬河':16, '徐州':63, '南通':78, '温州':111, '绍兴':88, '芜湖':29, '福州':189, '泉州':148, '赣州':31, '济南':161, '烟台':85, '洛阳':49, '黄石':10, '岳阳':15, '汕头':74, '佛山':153, '泸州':10, '海东':0, '银川':34, }; //2016年数据 var d4 = { "杭州": 296, "苏州": 184, '上海': 332, "天津": 136, '深圳': 327, "郑州":208, "成都":235, "宁波":200, "合肥": 142, "重庆": 191, "广州": 327, "大连": 154, "青岛": 168, '北京': 358, '义乌': 133, '东莞': 166, "长沙": 159, "贵阳": 81, '珠海': 86, '威海': 58, '南昌': 118, '西安': 180, '南京': 170, '海口': 78, '厦门': 160, '沈阳': 114, '无锡': 119, '呼和浩特':80, '长春':92, '哈尔滨':123, '武汉':190, '南宁':122, '昆明':128, '兰州':69, '唐山':60, '石家庄':118, '太原':93, '赤峰':16, '抚顺':9, '珲春':21, '绥芬河':16, '徐州':78, '南通':93, '温州':122, '绍兴':95, '芜湖':36, '福州':187, '泉州':148, '赣州':47, '济南':161, '烟台':87, '洛阳':55, '黄石':11, '岳阳':26, '汕头':78, '佛山':150, '泸州':10, '海东':0, '银川':45, }; //2017年数据 var d5 = { "杭州": 334, "苏州": 185, '上海': 313, "天津": 181, '深圳': 379, "郑州":231, "成都":215, "宁波":183, "合肥": 145, "重庆": 205, "广州": 344, "大连": 166, "青岛": 170, '北京': 351, '义乌': 150, '东莞': 176, "长沙": 174, "贵阳": 89, '珠海': 91, '威海': 61, '南昌': 135, '西安': 181, '南京': 183, '海口': 80, '厦门': 167, '沈阳': 130, '无锡': 121, '呼和浩特':89, '长春':122, '哈尔滨':139, '武汉':219, '南宁':138, '昆明':125, '兰州':71, '唐山':71, '石家庄':136, '太原':127, '赤峰':47, '抚顺':9, '珲春':30, '绥芬河':21, '徐州':88, '南通':90, '温州':138, '绍兴':92, '芜湖':26, '福州':283, '泉州':158, '赣州':30, '济南':171, '烟台':81, '洛阳':86, '黄石':15, '岳阳':41, '汕头':96, '佛山':165, '泸州':49, '海东':0, '银川':70, }; //2018年数据 var d6 = { "杭州": 365, "苏州": 213, '上海': 352, "天津": 187, '深圳': 430, "郑州":251, "成都":226, "宁波":196, "合肥": 165, "重庆": 234, "广州": 364, "大连": 151, "青岛": 193, '北京': 358, '义乌': 162, '东莞': 197, "长沙": 212, "贵阳": 94, '珠海': 108, '威海': 70, '南昌': 167, '西安': 188, '南京': 203, '海口': 102, '厦门': 187, '沈阳': 148, '无锡': 133, '呼和浩特':88, '长春':121, '哈尔滨':143, '武汉':224, '南宁':153, '昆明':144, '兰州':77, '唐山':98, '石家庄':150, '太原':147, '赤峰':16, '抚顺':16, '珲春':31, '绥芬河':18, '徐州':98, '南通':106, '温州':153, '绍兴':112, '芜湖':36, '福州':196, '泉州':178, '赣州':71, '济南':165, '烟台':88, '洛阳':78, '黄石':14, '岳阳':39, '汕头':115, '佛山':185, '泸州':12, '海东':1, '银川':49, }; //2019年数据 var d7 = { "杭州": 352, "苏州": 204, '上海': 331, "天津": 168, '深圳': 421, "郑州":271, "成都":231, "宁波":199, "合肥": 172, "重庆": 141, "广州": 365, "大连": 132, "青岛": 205, '北京': 239, '义乌': 147, '东莞': 193, "长沙": 213, "贵阳": 105, '珠海': 99, '威海': 76, '南昌': 163, '西安': 184, '南京': 193, '海口': 109, '厦门': 170, '沈阳': 147, '无锡': 138, '呼和浩特':81, '长春':126, '哈尔滨':141, '武汉':241, '南宁':154, '昆明':145, '兰州':89, '唐山':103, '石家庄':146, '太原':137, '赤峰':33, '抚顺':12, '珲春':22, '绥芬河':23, '徐州':101, '南通':100, '温州':134, '绍兴':102, '芜湖':52, '福州':190, '泉州':156, '赣州':80, '济南':161, '烟台':81, '洛阳':100, '黄石':24, '岳阳':48, '汕头':118, '佛山':164, '泸州':14, '海东':0, '银川':61, }; var colors = [ ["#1DE9B6", "#F46E36", "#04B9FF", "#5DBD32", "#FFC809", "#FB95D5", "#BDA29A", "#6E7074", "#546570", "#C4CCD3"], ["#37A2DA", "#67E0E3", "#32C5E9", "#9FE6B8", "#FFDB5C", "#FF9F7F", "#FB7293", "#E062AE", "#E690D1", "#E7BCF3", "#9D96F5", "#8378EA", "#8378EA"], ["#DD6B66", "#759AA0", "#E69D87", "#8DC1A9", "#EA7E53", "#EEDD78", "#73A373", "#73B9BC", "#7289AB", "#91CA8C", "#F49F42"], ]; var colorIndex = 0; $(function() { var year = ["2013", "2014", "2015", "2016", "2017", "2018","2019"]; var mapData = [ [], [], [], [], [], [], [] ]; /*柱子Y名称*/ var categoryData = []; var barData = []; for (var key in geoCoordMap) { mapData[0].push({ "year": '2013', "name": key, "value": d1[key], }); mapData[1].push({ "year": '2014', "name": key, "value": d2[key], }); mapData[2].push({ "year": '2015', "name": key, "value": d3[key], }); mapData[3].push({ "year": '2016', "name": key, "value": d4[key], }); mapData[4].push({ "year": '2017', "name": key, "value": d5[key], }); mapData[5].push({ "year": '2018', "name": key, "value": d6[key], }); mapData[6].push({ "year": '2019', "name": key, "value": d7[key], }); } for (var i = 0; i < mapData.length; i++) { mapData[i].sort(function sortNumber(a, b) { return a.value - b.value }); barData.push([]); categoryData.push([]); for (var j = 0; j < mapData[i].length; j++) { barData[i].push(mapData[i][j].value); categoryData[i].push(mapData[i][j].name); } } $.getJSON(uploadedDataURL, function(geoJson) { echarts.registerMap('china', geoJson); var convertData = function(data) { var res = []; for (var i = 0; i < data.length; i++) { var geoCoord = geoCoordMap[data[i].name]; if (geoCoord) { res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) }); } } return res; }; optionXyMap01 = { timeline: { data: year, axisType: 'category', autoPlay: true, playInterval: 3000, left: '10%', right: '10%', bottom: '3%', width: '80%', label: { normal: { textStyle: { color: '#ddd' } }, emphasis: { textStyle: { color: '#fff' } } }, symbolSize: 10, lineStyle: { color: '#555' }, checkpointStyle: { borderColor: '#777', borderWidth: 2 }, controlStyle: { showNextBtn: true, showPrevBtn: true, normal: { color: '#666', borderColor: '#666' }, emphasis: { color: '#aaa', borderColor: '#aaa' } }, }, baseOption: { animation: true, animationDuration: 1000, animationEasing: 'cubicInOut', animationDurationUpdate: 1000, animationEasingUpdate: 'cubicInOut', grid: { right: '1%', top: '15%', bottom: '10%', width: '20%' }, tooltip: { trigger: 'axis', // hover触发器 axisPointer: { // 坐标轴指示器，坐标轴触发有效 type: 'shadow', // 默认为直线，可选为：'line' | 'shadow' shadowStyle: { color: 'rgba(150,150,150,0.1)' //hover颜色 } } }, geo: { show: true, map: 'china', roam: true, zoom: 1, center: [113.83531246, 34.0267395887], label: { emphasis: { show: false } }, itemStyle: { normal: { borderColor: 'rgba(147, 235, 248, 1)', borderWidth: 1, areaColor: { type: 'radial', x: 0.5, y: 0.5, r: 0.8, colorStops: [{ offset: 0, color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色 }, { offset: 1, color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色 }], globalCoord: false // 缺省为 false }, shadowColor: 'rgba(128, 217, 248, 1)', // shadowColor: 'rgba(255, 255, 255, 1)', shadowOffsetX: -2, shadowOffsetY: 2, shadowBlur: 10 }, emphasis: { areaColor: '#389BB7', borderWidth: 0 } } }, }, options: [] }; for (var n = 0; n < year.length; n++) { optionXyMap01.options.push({ backgroundColor: '#013954', title: [{ text: '跨境电商百度指数', left: '25%', top: '7%', textStyle: { color: '#fff', fontSize: 25 } }, { id: 'statistic', text: year[n] + "数据统计情况", left: '75%', top: '8%', textStyle: { color: '#fff', fontSize: 25 } } ], xAxis: { type: 'value', scale: true, position: 'top', min: 0, boundaryGap: false, splitLine: { show: false }, axisLine: { show: false }, axisTick: { show: false }, axisLabel: { margin: 2, textStyle: { color: '#aaa' } }, }, yAxis: { type: 'category', // name: 'TOP 20', nameGap: 16, axisLine: { show: true, lineStyle: { color: '#ddd' } }, axisTick: { show: false, lineStyle: { color: '#ddd' } }, axisLabel: { interval: 0, textStyle: { color: '#ddd' } }, data: categoryData[n] }, series: [ //地图 { type: 'map', map: 'china', geoIndex: 0, aspectScale: 0.75, //长宽比 showLegendSymbol: false, // 存在legend时显示 label: { normal: { show: false }, emphasis: { show: false, textStyle: { color: '#fff' } } }, roam: true, itemStyle: { normal: { areaColor: '#031525', borderColor: '#FFFFFF', }, emphasis: { areaColor: '#2B91B7' } }, animation: false, data: mapData }, //地图中闪烁的点 { // name: 'Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: convertData(mapData[n].sort(function(a, b) { return b.value - a.value; }).slice(0, 20)), symbolSize: function(val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: colors[colorIndex][n], shadowBlur: 10, shadowColor: colors[colorIndex][n] } }, zlevel: 1 }, //柱状图 { zlevel: 1.5, type: 'bar', symbol: 'none', itemStyle: { normal: { color: colors[colorIndex][n] } }, data: barData[n] } ] }) } myChart.setOption(optionXyMap01); }); });
