🚩 An AMap (https://lbs.amap.com) extension for Apache ECharts (https://github.com/apache/echarts)
Home Page: https://github.com/plainheart/echarts-extension-amap
License: MIT License
大神你好，想问一下是不是只支持官方的主题色呀，我确定自己用的key可Id是对应正确的，本地也可以出来我设置的地图，但是在您这边例子里改变不了地图主题，是否与高德地图后面出的规定有关？->(自2021年12月02日升级，升级之后所申请的 key 必须配备安全密钥 jscode 一起使用),我本地需要key和密钥搭配使用，地图才会生效。您这的代码里哪里可以调用密钥吗？谢谢解答
最新高德地图使用 v 字段标识版本，isAMap2X 函数可能存在问题，version 在多次加载时会被覆写
版本标识：
version 被覆写：
如何解决在echarts 上拖拽同时地图一同拖拽？
请教下有没有人知道这块是如何实现的？
正常显示应该是这样
放大到一定程度后会出现下方的线都显示到上方去了，感觉像是起点位置变了
地图展示ecahrt 饼图，饼图位置一直在地图左上角，代码如下：
{ id: 'stationPie' + index, center: item.coord, color: ['#5ad4cf', '#ffd258'], // 饼图每个扇形的颜色 coordinateSystem: 'amap', data: [ { name:'上车人数', value: item.up }, { name: '下车人数', value: item.down }, ], itemStyle: { normal: { borderColor: '#ffffff', borderWidth: 0.3 } }, name: item.name, radius: '24px', type: 'pie', zlevel: 5 }
散点图，数量达到3500个点以上就会出现卡顿，缩放，拖动卡顿感非常明显，请问有什么解决方法吗？
目前已经有10200个点了，我这后续需要渲染几万个点
最近的项目需要实现等值面的效果，在全局数据的时候很好的实现了效果(只是表面看起来还行)，但是当区域很小，数据同一时刻变化不大的时候就出现问题了
下图为全局数据的效果
下图为局部数据效果，如果按照echarts的visualmap的逻辑，应该是有个数值范围和颜色范围的映射的，但是高德并没有让我们填写这个数据，这就导致，当时间为00：00，数据基本上都为-2时的颜色和时间为04：00，数据都为2时的颜色是一样的，我不清楚该如何解决这个问题，我把type从等值面改为等值线能够明显看出每一时刻等值线的不同。
使用echarts-extension-amap让echarts导入高德地图加geo覆盖物，设置了数据刷新会clear charts 重新setOption
下面为setOption的方法
setOptions(data, linesData, map, clear = true) {
if (!this.chart) {
return
}
const projectCoordList = data => {
if (JSON.stringify(data) !== '{}') {
return data.projectCoordList
.map(({ center, name, value }) => {
if (center) {
center.push(value)
}
return { name, value: center }
})
}
}
const tenantCoordList = data => {
if (JSON.stringify(data) !== '{}') {
return data.tenantCoordList
.filter(item => item.center)
.map(({ center, name, value }) => {
center.push(value)
return { name, value: center }
})
}
}
const convertLinesData = data => {
return data.linkCoordList
}
var maxValue
var projectMaxValue
if (JSON.stringify(data) !== '{}') {
maxValue = Math.max(1, ...data.tenantCoordList.map(t => t.value))
projectMaxValue = Math.max(1, ...data.projectCoordList.map(t => t.value))
}
const option = {
backgroundColor: 'transparent',
geo: {
map,
label: {
emphasis: {
show: false
}
},
roam: true, // 是否允许缩放
layoutCenter: ['50%', '50%'],
layoutSize: '70%',
itemStyle: {
normal: {
areaColor: 'rgba(51, 69, 89, .5)',
borderColor: 'rgba(100, 149, 237, 1)'
},
emphasis: {
areaColor: 'rgba(37, 43, 61, .5)'
}
}
},
amap: {
center: [120.637376, 30.422934],
resizeEnable: true,
mapStyle: 'amap://styles/darkblue', // 地图样式白色
// rotation: 10,
renderOnMoving: true,
echartsLayerInteractive: true,
largeMode: false,
returnMapCameraState: true,
roam: true,
zoom: 11, // 缩放
viewMode: '3D' // 是否启用3d地图
// pitch: 35, // 视角高度
// skyColor: '#33216a'
},
animation: false,
tooltip: {
trigger: 'item',
backgroundColor: 'rgba(12, 204, 104, 0.92)',
borderColor: '#FFFFCC',
showDelay: 0,
hideDelay: 0,
enterable: true,
transitionDuration: 0,
extraCssText: 'z-index:100',
formatter: (params, ticket, callback) => {
const name = params.name
let value = params.value
if (!name) {
return ''
}
if (typeof value === 'object') {
value = value[2]
}
if (isNaN(value)) {
value = 0
}
if (value > 10000) {
value = (value / 10000).toFixed(2)
const res =
"<span style='color:#fff;'>" + name + '</span><br/>数据：' + value + ' 万方'
return res
} else {
value = this.formatNumber(value)
const res =
"<span style='color:#fff;'>" + name + '</span><br/>数据：' + value + ' 方'
return res
}
}
},
series: [
{
name: 'lines1',
type: 'lines',
coordinateSystem: 'geo',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 4
},
lineStyle: {
normal: {
color: '#eac736',
width: 0,
curveness: 0.2
}
},
data: convertLinesData(data)
},
{
name: 'lines2',
type: 'lines',
coordinateSystem: 'geo',
zlevel: 2,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol:
'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',
symbolSize: 15
},
lineStyle: {
normal: {
color: '#eac736',
width: 1,
opacity: 0.4,
curveness: 0.2
}
},
data: convertLinesData(data)
},
{
name: 'blueDot',
type: 'scatter',
coordinateSystem: 'geo',
data: tenantCoordList(data),
// data: [
// ],
// data: convertScatterData(data.filter(t => t.type !== 'project')),
// 非工程显示原型（搅拌站、公司），即蓝点
symbolSize: (val) => {
if (maxValue > 0) {
return Math.max(10, (val[2] * 20) / maxValue)
}
return 10
// return 20
},
// label: {
// normal: {
// formatter: function(params) {
// let name = params.name
// let value = params.value[2]
// console.log('con', typeof value)
// let res = name + '\n' + value + ' 方'
// return res
// },
// position: 'right',
// align: 'center',
// show: true
// },
// emphasis: {
// show: true
// }
// },
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
name: 'projectGeo',
type: 'scatter',
coordinateSystem: 'geo',
data: projectCoordList(data),
// data: convertScatterData(data.filter(t => t.type === 'project')),
// 工程显示原型，即绿点
symbolSize: val => {
if (projectMaxValue > 0) {
// return Math.max(15, (val[2] * 15) / projectMaxValue)
return Math.max(10, (val[2] * 20) / projectMaxValue)
}
return 10
// return 20
},
// label: {
// normal: {
// formatter: '{b}',
// position: 'right',
// show: true
// },
// emphasis: {
// show: true
// }
// },
itemStyle: {
normal: {
color: '#90EE90'
}
}
}
]
}
axios
.get('/geo-json/100000/330000/330400/330481.geoJson', { timeout: 60000 })
.then(({ data }) => {
const geojson = new AMap.GeoJSON({
geoJSON: data,
// 还可以自定义getMarker和getPolyline
getPolygon: function(geojson, lnglats) {
// 计算面积
// var area = AMap.GeometryUtil.ringArea(lnglats[0])
return new AMap.Polygon({
path: lnglats,
fillOpacity: 0.4,
// fillOpacity: 1 - Math.sqrt(area / 8000000000), // 面积越大透明度越高
strokeColor: '#008B8B',
fillColor: '#4169FF'
})
}
})
const amap = this.chart.getModel().getComponent('amap').getAMap()
amap.add(geojson)
console.log('GeoJSON 数据加载完成')
})
.catch(error => {
const message = parseRequestError(error)
console.log('error', message)
})
console.log('clear', clear)
if (clear) {
this.chart.clear()
}
this.chart.setOption(option)
},坐标系现在是geo，用来和amap进行对比的，发现geo为坐标系并不会出现内存泄漏现象，使用amap才会，请问怎么解决这个问题，是否有相关api
Uncaught TypeError: Cannot read property 'it' of undefined
at c.sD (maps?key=eb116aacb0c35f531e53497b5e69e6d0&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Geolocation,Geolocation,AMap.Geocoder,Geocoder,AMap.ToolBar,ToolBar,AMap.Scale,Scale,AMap.CustomLayer,CustomLayer,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:458)
at c.sD (maps?key=eb116aacb0c35f531e53497b5e69e6d0&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Geolocation,Geolocation,AMap.Geocoder,Geocoder,AMap.ToolBar,ToolBar,AMap.Scale,Scale,AMap.CustomLayer,CustomLayer,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:217)
at c.pc (maps?key=eb116aacb0c35f531e53497b5e69e6d0&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Geolocation,Geolocation,AMap.Geocoder,Geocoder,AMap.ToolBar,ToolBar,AMap.Scale,Scale,AMap.CustomLayer,CustomLayer,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:426)
at maps?key=eb116aacb0c35f531e53497b5e69e6d0&v=1.4.4&plugin=AMap.PlaceSearch,PlaceSearch,AMap.Geolocation,Geolocation,AMap.Geocoder,Geocoder,AMap.ToolBar,ToolBar,AMap.Scale,Scale,AMap.CustomLayer,CustomLayer,AMap.Autocomplete,Autocomplete,AMap.PlaceSearch,PlaceSearch,AMap.PolyEditor,PolyEditor,AMap.CircleEditor,CircleEditor&callback=amapInitComponent:72
Amap加载地图偏慢，哪怕已经加载过，瓦片之类的在缓冲文件夹都有缓存，加载加载还是慢，请问是否有什么方法可以改进下？
在示例文件 index_zh_CN.html 末尾添加代码
setTimeout(function() {
const opts = echarts.util.clone(option)
opts.series = []
chart.setOption(opts);
}, 3000)无法清除地图上的点（echarts 官网中使用 bmap 是可以的）
只能通过
setTimeout(function() {
const opts = echarts.util.clone(option)
opts.series.forEach(s => {
s.data = []
})
chart.setOption(opts);
}, 3000)方式清除，这应该是一个 BUG
"TypeError: r.getAxesOnZeroOf is not a function"
echarts: v5.1.2
echarts-extension-amap: v1.10.0
AMap:v1.4.15
正常使用高德地图时，Marker实例绘制的DOM节点，层级高于图层，可以在浏览器中被检查器直接选中。使用echarts结合地图使用时，Maker实例的DOM节点被覆盖导致事件无法触发。
使用版本： "echarts-extension-amap": "^1.9.1",
报错：
在localstorage中查看发现只加载了一部分
使用：
amap、echarts对象都可以获取的到，但是在setOption之后仍然获取amapComponent失败
在debug打包/safari调试时地图都可以正常显示
麻烦您帮忙看一下，实在是没有思路如何解决了🙏
在getmodel的componentMap中发现报了严格模式相关的错误，不知道是否是这个引起的问题
Currently, the dragging of map and rendering of echarts can't be performed fluently.
Some optimation actions are awaiting to be performed.
下面是我对js文件的导入：
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=****"></script>
<!-- 引入 ECharts -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<!-- 引入ECharts黑色风格-->
<script type="text/javascript" src="js/dark.js"></script>
<!-- 引入高德地图扩展 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-extension-amap.min.js"></script>下面是我程序中的相关调用：
// 展示确诊视图
function showConfirm(){
alert("showConfirm");
console.log(confirmOption);
myChart.clear();
myChart.setOption(confirmOption);
}
// 展示lagging视图
function showLagging(){
alert("show lagging");
console.log(laggingOption);
myChart.clear();
myChart.setOption(laggingOption);
}下图是我浏览器端报的错误：
vue3.0 + echarts5.0 + 高德v2.0
I tried adding 3d model with it, the buildings are not shown
the code I use is from here https://lbs.amap.com/demo/javascript-api/example/3d/3d-model
看示例都是匹配高德API 1.4.15，有匹配高德API2.0的计划吗？据说2.0改进还是比较大的。
直接引用试过，原来1.4.15正常的句子，2.0就出错了。
例如var opts={subdistrict:0,extensions:'base',level:'city'};var district=new AMap.DistrictSearch(opts);
这句在2.0下报错：对象不支持assign属性或方法
1.4.15正常，不通过这个模块直接使用高德API也正常
如何地图之上创建一个geojson的地图轮廓。我尝试性的在echart的option配置添加了 series: [
{
name: 'PM2.5',
type: "map",
mapType: 'SHAOWU', // 自定义扩展图表类型
// 使用高德地图坐标系
coordinateSystem: "amap",
}
SHAOWU是我自定义的县市的地图,发现无法生效，是不支持吗？
https://github.com/zhengquan45/shaowu
补充：我发现这个插件是建立在geo基础上的 也就是说geo这种地图坐标系所支持的图标绘制好像只有热力 气泡 散点 线型这四种 其他则无法支持，是这样吗
运行项目中examples\index.html文件。
发现修改mapStyle无法生效。
运行截图：
样式本应为黑色，但实际却是白色。
代码源文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="dns-prefetch" href="https://webapi.amap.com">
<link rel="dns-prefetch" href="https://restapi.amap.com">
<link rel="dns-prefetch" href="https://vdata.amap.com">
<link rel="dns-prefetch" href="https://vdata01.amap.com">
<link rel="dns-prefetch" href="https://vdata02.amap.com">
<link rel="dns-prefetch" href="https://vdata03.amap.com">
<link rel="dns-prefetch" href="https://vdata04.amap.com">
<link rel="dns-prefetch" href="https://sdf.amap.com">
<link rel="dns-prefetch" href="https://wprd01.is.autonavi.com">
<link rel="dns-prefetch" href="https://wprd02.is.autonavi.com">
<link rel="dns-prefetch" href="https://wprd03.is.autonavi.com">
<link rel="dns-prefetch" href="https://wprd04.is.autonavi.com">
<link rel="dns-prefetch" href="https://webst01.is.autonavi.com">
<link rel="dns-prefetch" href="https://webst02.is.autonavi.com">
<link rel="dns-prefetch" href="https://webst03.is.autonavi.com">
<link rel="dns-prefetch" href="https://webst04.is.autonavi.com">
<title>an example for echarts-extension-amap</title>
<!-- please replace {ak} with your ak & customize your plugins -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key={ak}&plugin=AMap.Scale,AMap.ToolBar"></script>
<!-- ECharts CDN -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<!-- echarts amap extension -->
<!-- <script type="text/javascript" src="../dist/echarts-extension-amap.min.js"></script> -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts-extension-amap.min.js"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body, #echarts-amap {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div id="echarts-amap"></div>
<!-- data comes from Baidu Map, just for example -->
<script type="text/javascript">
var data = [
{name: '海门', value: 9},
{name: '鄂尔多斯', value: 12},
{name: '招远', value: 12},
{name: '舟山', value: 12},
{name: '齐齐哈尔', value: 14},
{name: '盐城', value: 15},
{name: '赤峰', value: 16},
{name: '青岛', value: 18},
{name: '乳山', value: 18},
{name: '金昌', value: 19},
{name: '泉州', value: 21},
{name: '莱西', value: 21},
{name: '日照', value: 21},
{name: '胶南', value: 22},
{name: '南通', value: 23},
{name: '拉萨', value: 24},
{name: '云浮', value: 24},
{name: '梅州', value: 25},
{name: '文登', value: 25},
{name: '上海', value: 25},
{name: '攀枝花', value: 25},
{name: '威海', value: 25},
{name: '承德', value: 25},
{name: '厦门', value: 26},
{name: '汕尾', value: 26},
{name: '潮州', value: 26},
{name: '丹东', value: 27},
{name: '太仓', value: 27},
{name: '曲靖', value: 27},
{name: '烟台', value: 28},
{name: '福州', value: 29},
{name: '瓦房店', value: 30},
{name: '即墨', value: 30},
{name: '抚顺', value: 31},
{name: '玉溪', value: 31},
{name: '张家口', value: 31},
{name: '阳泉', value: 31},
{name: '莱州', value: 32},
{name: '湖州', value: 32},
{name: '汕头', value: 32},
{name: '昆山', value: 33},
{name: '宁波', value: 33},
{name: '湛江', value: 33},
{name: '揭阳', value: 34},
{name: '荣成', value: 34},
{name: '连云港', value: 35},
{name: '葫芦岛', value: 35},
{name: '常熟', value: 36},
{name: '东莞', value: 36},
{name: '河源', value: 36},
{name: '淮安', value: 36},
{name: '泰州', value: 36},
{name: '南宁', value: 37},
{name: '营口', value: 37},
{name: '惠州', value: 37},
{name: '江阴', value: 37},
{name: '蓬莱', value: 37},
{name: '韶关', value: 38},
{name: '嘉峪关', value: 38},
{name: '广州', value: 38},
{name: '延安', value: 38},
{name: '太原', value: 39},
{name: '清远', value: 39},
{name: '中山', value: 39},
{name: '昆明', value: 39},
{name: '寿光', value: 40},
{name: '盘锦', value: 40},
{name: '长治', value: 41},
{name: '深圳', value: 41},
{name: '珠海', value: 42},
{name: '宿迁', value: 43},
{name: '咸阳', value: 43},
{name: '铜川', value: 44},
{name: '平度', value: 44},
{name: '佛山', value: 44},
{name: '海口', value: 44},
{name: '江门', value: 45},
{name: '章丘', value: 45},
{name: '肇庆', value: 46},
{name: '大连', value: 47},
{name: '临汾', value: 47},
{name: '吴江', value: 47},
{name: '石嘴山', value: 49},
{name: '沈阳', value: 50},
{name: '苏州', value: 50},
{name: '茂名', value: 50},
{name: '嘉兴', value: 51},
{name: '长春', value: 51},
{name: '胶州', value: 52},
{name: '银川', value: 52},
{name: '张家港', value: 52},
{name: '三门峡', value: 53},
{name: '锦州', value: 54},
{name: '南昌', value: 54},
{name: '柳州', value: 54},
{name: '三亚', value: 54},
{name: '自贡', value: 56},
{name: '吉林', value: 56},
{name: '阳江', value: 57},
{name: '泸州', value: 57},
{name: '西宁', value: 57},
{name: '宜宾', value: 58},
{name: '呼和浩特', value: 58},
{name: '成都', value: 58},
{name: '大同', value: 58},
{name: '镇江', value: 59},
{name: '桂林', value: 59},
{name: '张家界', value: 59},
{name: '宜兴', value: 59},
{name: '北海', value: 60},
{name: '西安', value: 61},
{name: '金坛', value: 62},
{name: '东营', value: 62},
{name: '牡丹江', value: 63},
{name: '遵义', value: 63},
{name: '绍兴', value: 63},
{name: '扬州', value: 64},
{name: '常州', value: 64},
{name: '潍坊', value: 65},
{name: '重庆', value: 66},
{name: '台州', value: 67},
{name: '南京', value: 67},
{name: '滨州', value: 70},
{name: '贵阳', value: 71},
{name: '无锡', value: 71},
{name: '本溪', value: 71},
{name: '克拉玛依', value: 72},
{name: '渭南', value: 72},
{name: '马鞍山', value: 72},
{name: '宝鸡', value: 72},
{name: '焦作', value: 75},
{name: '句容', value: 75},
{name: '北京', value: 79},
{name: '徐州', value: 79},
{name: '衡水', value: 80},
{name: '包头', value: 80},
{name: '绵阳', value: 80},
{name: '乌鲁木齐', value: 84},
{name: '枣庄', value: 84},
{name: '杭州', value: 84},
{name: '淄博', value: 85},
{name: '鞍山', value: 86},
{name: '溧阳', value: 86},
{name: '库尔勒', value: 86},
{name: '安阳', value: 90},
{name: '开封', value: 90},
{name: '济南', value: 92},
{name: '德阳', value: 93},
{name: '温州', value: 95},
{name: '九江', value: 96},
{name: '邯郸', value: 98},
{name: '临安', value: 99},
{name: '兰州', value: 99},
{name: '沧州', value: 100},
{name: '临沂', value: 103},
{name: '南充', value: 104},
{name: '天津', value: 105},
{name: '富阳', value: 106},
{name: '泰安', value: 112},
{name: '诸暨', value: 112},
{name: '郑州', value: 113},
{name: '哈尔滨', value: 114},
{name: '聊城', value: 116},
{name: '芜湖', value: 117},
{name: '唐山', value: 119},
{name: '平顶山', value: 119},
{name: '邢台', value: 119},
{name: '德州', value: 120},
{name: '济宁', value: 120},
{name: '荆州', value: 127},
{name: '宜昌', value: 130},
{name: '义乌', value: 132},
{name: '丽水', value: 133},
{name: '洛阳', value: 134},
{name: '秦皇岛', value: 136},
{name: '株洲', value: 143},
{name: '石家庄', value: 147},
{name: '莱芜', value: 148},
{name: '常德', value: 152},
{name: '保定', value: 153},
{name: '湘潭', value: 154},
{name: '金华', value: 157},
{name: '岳阳', value: 169},
{name: '长沙', value: 175},
{name: '衢州', value: 177},
{name: '廊坊', value: 193},
{name: '菏泽', value: 194},
{name: '合肥', value: 229},
{name: '武汉', value: 273},
{name: '大庆', value: 279}
];
var geoCoordMap = {
'海门':[121.15,31.89],
'鄂尔多斯':[109.781327,39.608266],
'招远':[120.38,37.35],
'舟山':[122.207216,29.985295],
'齐齐哈尔':[123.97,47.33],
'盐城':[120.13,33.38],
'赤峰':[118.87,42.28],
'青岛':[120.33,36.07],
'乳山':[121.52,36.89],
'金昌':[102.188043,38.520089],
'泉州':[118.58,24.93],
'莱西':[120.53,36.86],
'日照':[119.46,35.42],
'胶南':[119.97,35.88],
'南通':[121.05,32.08],
'拉萨':[91.11,29.97],
'云浮':[112.02,22.93],
'梅州':[116.1,24.55],
'文登':[122.05,37.2],
'上海':[121.48,31.22],
'攀枝花':[101.718637,26.582347],
'威海':[122.1,37.5],
'承德':[117.93,40.97],
'厦门':[118.1,24.46],
'汕尾':[115.375279,22.786211],
'潮州':[116.63,23.68],
'丹东':[124.37,40.13],
'太仓':[121.1,31.45],
'曲靖':[103.79,25.51],
'烟台':[121.39,37.52],
'福州':[119.3,26.08],
'瓦房店':[121.979603,39.627114],
'即墨':[120.45,36.38],
'抚顺':[123.97,41.97],
'玉溪':[102.52,24.35],
'张家口':[114.87,40.82],
'阳泉':[113.57,37.85],
'莱州':[119.942327,37.177017],
'湖州':[120.1,30.86],
'汕头':[116.69,23.39],
'昆山':[120.95,31.39],
'宁波':[121.56,29.86],
'湛江':[110.359377,21.270708],
'揭阳':[116.35,23.55],
'荣成':[122.41,37.16],
'连云港':[119.16,34.59],
'葫芦岛':[120.836932,40.711052],
'常熟':[120.74,31.64],
'东莞':[113.75,23.04],
'河源':[114.68,23.73],
'淮安':[119.15,33.5],
'泰州':[119.9,32.49],
'南宁':[108.33,22.84],
'营口':[122.18,40.65],
'惠州':[114.4,23.09],
'江阴':[120.26,31.91],
'蓬莱':[120.75,37.8],
'韶关':[113.62,24.84],
'嘉峪关':[98.289152,39.77313],
'广州':[113.23,23.16],
'延安':[109.47,36.6],
'太原':[112.53,37.87],
'清远':[113.01,23.7],
'中山':[113.38,22.52],
'昆明':[102.73,25.04],
'寿光':[118.73,36.86],
'盘锦':[122.070714,41.119997],
'长治':[113.08,36.18],
'深圳':[114.07,22.62],
'珠海':[113.52,22.3],
'宿迁':[118.3,33.96],
'咸阳':[108.72,34.36],
'铜川':[109.11,35.09],
'平度':[119.97,36.77],
'佛山':[113.11,23.05],
'海口':[110.35,20.02],
'江门':[113.06,22.61],
'章丘':[117.53,36.72],
'肇庆':[112.44,23.05],
'大连':[121.62,38.92],
'临汾':[111.5,36.08],
'吴江':[120.63,31.16],
'石嘴山':[106.39,39.04],
'沈阳':[123.38,41.8],
'苏州':[120.62,31.32],
'茂名':[110.88,21.68],
'嘉兴':[120.76,30.77],
'长春':[125.35,43.88],
'胶州':[120.03336,36.264622],
'银川':[106.27,38.47],
'张家港':[120.555821,31.875428],
'三门峡':[111.19,34.76],
'锦州':[121.15,41.13],
'南昌':[115.89,28.68],
'柳州':[109.4,24.33],
'三亚':[109.511909,18.252847],
'自贡':[104.778442,29.33903],
'吉林':[126.57,43.87],
'阳江':[111.95,21.85],
'泸州':[105.39,28.91],
'西宁':[101.74,36.56],
'宜宾':[104.56,29.77],
'呼和浩特':[111.65,40.82],
'成都':[104.06,30.67],
'大同':[113.3,40.12],
'镇江':[119.44,32.2],
'桂林':[110.28,25.29],
'张家界':[110.479191,29.117096],
'宜兴':[119.82,31.36],
'北海':[109.12,21.49],
'西安':[108.95,34.27],
'金坛':[119.56,31.74],
'东营':[118.49,37.46],
'牡丹江':[129.58,44.6],
'遵义':[106.9,27.7],
'绍兴':[120.58,30.01],
'扬州':[119.42,32.39],
'常州':[119.95,31.79],
'潍坊':[119.1,36.62],
'重庆':[106.54,29.59],
'台州':[121.420757,28.656386],
'南京':[118.78,32.04],
'滨州':[118.03,37.36],
'贵阳':[106.71,26.57],
'无锡':[120.29,31.59],
'本溪':[123.73,41.3],
'克拉玛依':[84.77,45.59],
'渭南':[109.5,34.52],
'马鞍山':[118.48,31.56],
'宝鸡':[107.15,34.38],
'焦作':[113.21,35.24],
'句容':[119.16,31.95],
'北京':[116.46,39.92],
'徐州':[117.2,34.26],
'衡水':[115.72,37.72],
'包头':[110,40.58],
'绵阳':[104.73,31.48],
'乌鲁木齐':[87.68,43.77],
'枣庄':[117.57,34.86],
'杭州':[120.19,30.26],
'淄博':[118.05,36.78],
'鞍山':[122.85,41.12],
'溧阳':[119.48,31.43],
'库尔勒':[86.06,41.68],
'安阳':[114.35,36.1],
'开封':[114.35,34.79],
'济南':[117,36.65],
'德阳':[104.37,31.13],
'温州':[120.65,28.01],
'九江':[115.97,29.71],
'邯郸':[114.47,36.6],
'临安':[119.72,30.23],
'兰州':[103.73,36.03],
'沧州':[116.83,38.33],
'临沂':[118.35,35.05],
'南充':[106.110698,30.837793],
'天津':[117.2,39.13],
'富阳':[119.95,30.07],
'泰安':[117.13,36.18],
'诸暨':[120.23,29.71],
'郑州':[113.65,34.76],
'哈尔滨':[126.63,45.75],
'聊城':[115.97,36.45],
'芜湖':[118.38,31.33],
'唐山':[118.02,39.63],
'平顶山':[113.29,33.75],
'邢台':[114.48,37.05],
'德州':[116.29,37.45],
'济宁':[116.59,35.38],
'荆州':[112.239741,30.335165],
'宜昌':[111.3,30.7],
'义乌':[120.06,29.32],
'丽水':[119.92,28.45],
'洛阳':[112.44,34.7],
'秦皇岛':[119.57,39.95],
'株洲':[113.16,27.83],
'石家庄':[114.48,38.03],
'莱芜':[117.67,36.19],
'常德':[111.69,29.05],
'保定':[115.48,38.85],
'湘潭':[112.91,27.87],
'金华':[119.64,29.12],
'岳阳':[113.09,29.37],
'长沙':[113,28.21],
'衢州':[118.88,28.97],
'廊坊':[116.7,39.53],
'菏泽':[115.480656,35.23375],
'合肥':[117.27,31.86],
'武汉':[114.31,30.52],
'大庆':[125.03,46.58]
};
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;
};
var option = {
// amap component option
amap: {
// enable 3D mode
// Note that it's suggested to enable 3D mode to improve echarts rendering.
viewMode: '3D',
// initial options of AMap
// See https://lbs.amap.com/api/javascript-api/reference/map#MapOption for details
// initial map center [lng, lat]
center: [108.39, 39.9],
// initial map zoom
zoom: 4,
// whether the map and echarts automatically handles browser window resize to update itself.
resizeEnable: true,
// customized map style, see https://lbs.amap.com/dev/mapstyle/index for details
mapStyle: "amap://styles/dark",
// whether echarts layer should be rendered when the map is moving. Default is true.
// if false, it will only be re-rendered after the map `moveend`.
// It's better to set this option to false if data is large.
renderOnMoving: true,
// the zIndex of echarts layer for AMap, default value is 2000.
echartsLayerZIndex: 2019
// Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
// There are some bugs about it, we can use `amap.add` instead.
// Refer to the codes at the bottom.
// More initial options...
},
tooltip : {
trigger: 'item'
},
animation: true,
series: [
{
name: 'PM2.5',
type: "scatter",
// use `amap` as the coordinate system
coordinateSystem: "amap",
// data items [[lng, lat, value], [lng, lat, value], ...]
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
encode: {
value: 2
},
label: {
formatter: '{b}',
position: 'right',
show: false
},
itemStyle: {
normal: {
color: '#00c1de'
}
},
emphasis: {
label: {
show: true
}
}
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'amap',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 6)),
symbolSize: function (val) {
return val[2] / 10;
},
encode: {
value: 2
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
formatter: '{b}',
position: 'right',
show: true
},
itemStyle: {
color: '#fff',
shadowBlur: 10,
shadowColor: '#333'
},
zlevel: 1
}
]
};
// initialize echart
var chart = echarts.init(document.getElementById("echarts-amap"));
chart.setOption(option);
// get amap instance
var amap = chart.getModel().getComponent("amap").getAMap();
// operations below are the same as amap
amap.addControl(new AMap.Scale());
amap.addControl(new AMap.ToolBar());
// add layers
// var satelliteLayer = new AMap.TileLayer.Satellite();
// var roadNetLayer = new AMap.TileLayer.RoadNet();
// amap.add([satelliteLayer, roadNetLayer]);
</script>
</body>
</html>现在这个插件能在vue下运行吗？我看例子是普通html的
如何解决echarts上的弧线覆盖在高德地图上的mark的问题呢
如图 在拖动过程中做了防抖处理 当拖动未结束就不重新渲染 但这个效果不怎么好看啊
在 echarts-amap 中实现了
var layer = echart
.getModel()
.getComponent('amap')
.getLayer()
layer.render = function() {
echart.setOption({ series })
}
监听图层的渲染 使echarts跟随其渲染，
在geo和bmap下可以使用事件georoam与bmaproam来监听地图缩放与拖拽移动事件下的参数，但是我试了amaproam只返回了这些信息：
是目前还没有针对更多参数监听例如缩放级别进行开发吗
Currently, there is no way to get a screenshot with the chart and map.
按道理给个容器，地图就在容器里绘制，但是不知道为啥，地图直接充满全屏了，把header还有按钮文字都遮挡了
<template>
<div class="siteInfo">
<el-container>
<el-main>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="float: left"> <b>整体区域</b></span>
<el-image :src="colors">
</el-image>
<el-button @click="back">返回</el-button>
</div>
<div style="width: 100%;height:1000px;">
<!-- ECharts 地图容器 -->
<div id="echarts-amap" style="width: 100%;height: 100%;"></div>
</div>
</el-card>
</el-main>
</el-container>
</div>
</template>
进入页面后会直接打印出来（在没有点击的时候）
点击不到maker我的理解是 视图的最上层是echarts的图层 点击不到geo
但是如何正确添加点击穿透？css pointer-events: none？
但是为啥 一进页面没有点击 缺还是打印出来了-。-
求解
在高德地图2.0中使用区域掩膜，整个地图都会白屏，切换回1.4.15显示正常，但是1.4.15不支持2d的区域掩模
大规模Echarts中的webgl数据散点缩放时地图更新视野特别卡，是为什么？作者设计view的时候有没有遇到过这个问题或者考虑到，还是我哪里设置错误？数据级别会达到60万
使用高德 已有的自定义主题可以，换成高德账号自建的 自定义地图，没效果，作者这个有实现过吗，这个坑了我一天
大佬你好，我想咨询一下在地图初次载入时，会有一个灰白色的背景闪一下就会刷掉，但是对应暗色地图时观感不太好：
载入后是这样的：
请问这个背景色有没有办法进行修改，我翻了高德地图的文档暂时没有收获😔
我在vue-cli3项目本地编译可以加载地图，但打包后地图不能加载，跟我在本地注释调echarts-extension-amap的效果一样，呈现空白
之前功能做好了，但最近又会失效，然后又好了，今天又坏了，是不是echarts-amp.min.js这个文件开始失效了，这么反复是什么问题
Code to Reproduce
amap.on('movestart', e => console.log(e) )我设置了三个按钮，对应三个地图组件，默认加载第一个地图组件，当我第一次切换按钮时，加载对应的地图组件，当我再次点击第一个按钮时，就不加载地图组件了，地图组件没有了，丢失了，请问是什么原因。
示例中使用高德v2.0时，拖动地图时，地图上面的图表跟随会不同步，慢一拍
使用1.x版本时没有这个问题
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.