Toggle navigation
echarts地图放大会出现空白
By
p***g
2018-05-31 01:59:20
脚本
16
21
作品使用的第三方脚本
http://api.map.baidu.com/getscript?v=2.0&ak=9Y717LVWwCPd2OajrctBuPjQ&services=&t=20170517145936,http://developer.baidu.com/map/jsdemo/demo/convertor.js,http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js,/dep/echarts/latest/extension/bmap.min.js,/dep/echarts/map/js/china.js
数据管理
上传数据
支持小于 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 provinceData = [{ "name": "北京", "value": 95 }, { "name": "天津", "value": 95 }, { "name": "石家庄", "value": 95 }, { "name": "太原", "value": 95 }, { "name": "呼和浩特", "value": 95 }, { "name": "沈阳", "value": 95 }, { "name": "长春", "value": 95 }, { "name": "哈尔滨", "value": 95 }, { "name": "上海", "value": 95 }, { "name": "南京", "value": 95 }, { "name": "杭州", "value": 95 }, { "name": "合肥", "value": 95 }, { "name": "福州", "value": 95 }, { "name": "南昌", "value": 95 }, { "name": "济南", "value": 95 }, { "name": "郑州", "value": 95 }, { "name": "武汉", "value": 95 }, { "name": "长沙", "value": 95 }, { "name": "广州", "value": 95 }, { "name": "南宁", "value": 95 }, { "name": "海口", "value": 95 }, { "name": "重庆", "value": 95 }, { "name": "成都", "value": 95 }, { "name": "贵阳", "value": 95 }, { "name": "昆明", "value": 95 }, { "name": "拉萨", "value": 95 }, { "name": "西安", "value": 95 }, { "name": "兰州", "value": 95 }, { "name": "西宁", "value": 95 }, { "name": "银川", "value": 95 }, { "name": "乌鲁木齐", "value": 95 }, { "name": "香港", "value": 95 }, { "name": "澳门", "value": 95 }, { "name": "台北", "value": 95 } ] var geoCoordMap = { "北京": [116.41667, 39.91667], "天津": [117.20000, 39.13333], "石家庄": [114.48333, 38.03333], "太原": [112.53333, 37.86667], "呼和浩特": [111.41, 40.48], "沈阳": [123.38333, 41.80000], "长春": [125.35000, 43.88333], "哈尔滨": [126.63333, 45.75000], "上海": [121.47, 31.23], "南京": [118.78333, 32.05000], "杭州": [120.20000, 30.26667], "合肥": [117.17, 31.52], "福州": [119.30000, 26.08333], "南昌": [115.90000, 28.68333], "济南": [117.00, 36.40], "郑州": [113.65000, 34.76667], "武汉": [114.31667, 30.51667], "长沙": [113.00000, 28.21667], "广州": [113.23333, 23.16667], "南宁": [108.19, 22.48], "海口": [110.35000, 20.01667], "重庆": [106.45000, 29.56667], "成都": [104.06667, 30.66667], "贵阳": [106.71667, 26.56667], "昆明": [102.73333, 25.05000], "拉萨": [91.00000, 29.60000], "西安": [108.95000, 34.26667], "兰州": [103.73333, 36.03333], "西宁": [101.75000, 36.56667], "银川": [106.26667, 38.46667], "乌鲁木齐": [87.68333, 43.76667], "香港": [114.10000, 22.20000], "澳门": [113.50000, 22.20000], "台北": [121.30, 25.03] } var redData = [{ TERMINALID: 5160, LNG: "114.63542833", LAT: "38.85213000" }, { TERMINALID: 5159, LNG: "117.40644333", LAT: "36.70698000" }, { TERMINALID: 5198, LNG: "119.00581500", LAT: "36.74808500" }, { TERMINALID: 5063, LNG: "121.56084333", LAT: "28.53989333" }, { TERMINALID: 4949, LNG: "127.04210333", LAT: "48.92415667" }, { TERMINALID: 4569, LNG: "119.80362833", LAT: "36.28255333" }, { TERMINALID: 5013, LNG: "110.53226833", LAT: "39.41139667" }, { TERMINALID: 5187, LNG: "116.90111833", LAT: "36.34795333" }, { TERMINALID: 4884, LNG: "100.49562833", LAT: "25.99675667" }, { TERMINALID: 5057, LNG: "110.15494833", LAT: "21.05169500" }, { TERMINALID: 4972, LNG: "119.19481667", LAT: "36.69799833" }, { TERMINALID: 4666, LNG: "121.23984000", LAT: "31.21873833" }, { TERMINALID: 4709, LNG: "114.30411500", LAT: "39.45558500" }, { TERMINALID: 5167, LNG: "116.78687000", LAT: "35.85875000" }, { TERMINALID: 4506, LNG: "121.74533167", LAT: "31.12406500" }, { TERMINALID: 5016, LNG: "106.80564833", LAT: "33.06385500" } ] var optionData = { x: 0, y: 15, zoom: 3 }; var bmap = { center: [optionData.x, optionData.y], zoom: optionData.zoom, roam: 'scale', mapStyle: { styleJson: [{ "featureType": "water", "elementType": "all", "stylers": { // "color": "#07243dff" "color": "#051625ff" } }, { "featureType": "highway", "elementType": "geometry.fill", "stylers": { "color": "#07243dff", "visibility": "off" } }, { "featureType": "highway", "elementType": "geometry.stroke", "stylers": { "color": "#147a92", "visibility": "off" } }, { "featureType": "arterial", "elementType": "geometry.fill", "stylers": { "color": "#000000", "visibility": "off" } }, { "featureType": "arterial", "elementType": "geometry.stroke", "stylers": { "color": "#0b3d51", "visibility": "off" } }, { "featureType": "local", "elementType": "geometry", "stylers": { "color": "#000000", "visibility": "off" } }, { "featureType": "land", "elementType": "all", "stylers": { // "color": "#295a84" "color": "#092742" } }, { "featureType": "railway", "elementType": "geometry.fill", "stylers": { "color": "#000000" } }, { "featureType": "railway", "elementType": "geometry.stroke", "stylers": { "color": "#08304b", "visibility": "off" } }, { "featureType": "subway", "elementType": "geometry", "stylers": { "lightness": -70, "visibility": "off" } }, { "featureType": "building", "elementType": "geometry.fill", "stylers": { "color": "#000000", "visibility": "off" } }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": { "color": "#2d5e88ff" } }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": { "color": "#08253fff" } }, { "featureType": "building", "elementType": "geometry", "stylers": { "color": "#022338" } }, { "featureType": "green", "elementType": "geometry", "stylers": { "color": "#062032" } }, { "featureType": "boundary", "elementType": "geometry.fill", "stylers": { "color": "#6290b7ff" } }, { "featureType": "poi", "elementType": "all", "stylers": { "visibility": "off" } }, { "featureType": "all", "elementType": "labels.icon", "stylers": { "visibility": "off" } }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": { "color": "#2da0c6", "visibility": "on" } }, { "featureType": "boundary", "elementType": "geometry.stroke", "stylers": { "color": "#08253fff" } } ] } } option = { bmap: bmap, backgroundColor: 'transparent', geo: { map: 'bmap', }, series: [ { type: 'effectScatter', coordinateSystem: 'bmap', zlevel: 2, rippleEffect: { brushType: 'stroke' }, label: { normal: { show: true, position: 'right', formatter: '{b}' } }, symbolSize: function(val) { return val[2] / 10; }, showEffectOn: 'render', itemStyle: { /*color: "#dd3a03"*/ color: "#e3e5e9" }, data: provinceData.map(function(dataItem) { return { name: dataItem.name, value: geoCoordMap[dataItem.name].concat(80) }; }) }, { type: 'scatter', coordinateSystem: 'bmap', zlevel: 2, rippleEffect: { brushType: 'stroke' }, symbolSize: 8, itemStyle: { color: "#dd3a03" }, hoverAnimation: false, emphasis: { itemStyle: { color: "#fa0500", shadowBlur: 15, shadowColor: '#fa0605' } }, large: true, data: redData.map(function(dataItem) { return { name: dataItem.TERMINALID, value: [dataItem.LNG, dataItem.LAT, 80] }; }) } ] };