当前访客身份：游客 [
当前位置：
我尝试着结合百度地图API和ECharts, 总是提醒我BMapExtension不存在；尝试了一下引用了所有的文件，也总是提醒引用的BMap.js和esl.js出错，检查发现引用路径没问题。请问各位最后怎么实现在百度地图中加入ECharts元素的呢？我最近才开始钻研js和数据可视化，之前对js有一些简单的了解~烦请各位能拨冗给我一些指导，不胜感谢！我的代码如下：
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&script type="text/javascript"
src="http://api./api?v=2.0&ak=SyHQoSmKTcFdVA3iX4iIMGj3"&&/script&
&title&EchartsBMap&/title&
style="width: 850 height: 700 border: #ccc solid 1 float: margin-left: 200 display:"
id="main"&&/div&
&script src="../source/zrender-2.0.6/doc/example/www/js/esl.js"&&/script&
&script src="../source/echarts-all.js"&&/script&
&script src="../source/echarts-2.1.10/doc/example/www/js/chart/map.js"&&/script&
&script src="../source/echarts-2.1.10/extension/BMap/doc/BMap.js"&&/script&
&script src="../source/zrender-2.0.6/doc/example/www/js/zrender-original.js"&&/script&
&script type="text/javascript"&
//初始化地图
var BMapExt = new BMapExtension(document.getElementById('main'), BMap, require('echarts'), require('zrender'));
var map = BMapExt.getMap();
var container = BMapExt.getEchartsContainer();
var point = new BMap.Point(startPoint.x, startPoint.y);
var myChart = BMapExt.initECharts(container, curTheme);
map.centerAndZoom(point, 5);
map.enableScrollWheelZoom(true);
var option = {
color: ['gold','aqua','lime'],
text: '模拟迁徙',
subtext:'数据纯属虚构',//副标题文本,'\n'指定换行
x:'right'//默认：left,水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
tooltip : { //提示框，鼠标悬浮交互时的信息提示
trigger: 'item',//触发类型，默认数据触发，可选为：'item' | 'axis'
formatter: function (v) {//内容格式器：{string}（Template） | {Function}，支持异步回调
return v[1].replace(':', ' & ');
legend: { //图例
orient: 'vertical',//布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
data:['北京', '上海', '广州'],//图例内容数组，数组项通常为{string}，每一项代表一个系列的name，默认布局到达边缘会自动分行（列），传入空字符串''可实现手动分行（列）。
selectedMode: 'single',//选择模式，默认开启图例开关，可选single，multiple
selected:{ //配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入
'上海' : false,
'广州' : false
toolbox: { //工具箱
show : true, //是否显示工具箱
orient : 'vertical',
x: 'right',
y: 'center',
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
dataRange: { //值域选择
min : 0, //指定的最小值，eg: 0，默认无，必须参数
max : 100, //指定的最大值，eg: 100，默认无，必须参数
calculable : true,//是否启用值域漫游，启用后无视splitNumber，值域显示为线性渐变
color: ['#ff3333', 'orange', 'yellow','lime','aqua']
series : [ //驱动图表生成的数据内容数组，数组中每一项为一个系列的选项及数据
name:'北京', //系列名称，如启用legend，该值将被legend.data索引相关
type:'map',//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示
mapType: 'none',//地图类型,支持world，china及全国34个省市自治区。
geoCoord: {//地图特有，标线图形定位坐标,通过绝对经纬度指定地区的名称文本位置
'上海': [121.1],
'包头': [110.9],
'北京': [116.9],
'北海': [109.314,21.6211],
'南京': [118.8],
'南宁': [108.479,23.1152],
'宁波': [121.6],
'广州': [113.6],
'长春': [125.4],
'长沙': [113.8],
'青岛': [120.3]
markLine : {
smooth:true,
effect : {
//标线图形炫光特效
show: true,//是否开启特效
scaleSize: 1,//放大倍数,以markLine lineWidth为基准
period: 30,//运动周期，无单位，值越大越慢，默认为15
color: '#fff',
shadowBlur: 10//光影模糊度，默认根据scaleSize计算
itemStyle : { //图形样式
borderWidth:1, //边框颜色
lineStyle: { //线条样式
type: 'solid',// 线条样式，可选为：'solid' | 'dotted' | 'dashed'
shadowBlur: 10 //阴影模糊度
[{name:'北京'}, {name:'上海',value:95}],
[{name:'北京'}, {name:'广州',value:90}],
[{name:'北京'}, {name:'南宁',value:70}],
[{name:'北京'}, {name:'长春',value:40}],
[{name:'北京'}, {name:'包头',value:30}],
[{name:'北京'}, {name:'重庆',value:20}]
markPoint : { //系列中的数据标注内容
symbol:'emptyCircle', //标志图形类型
symbolSize : function (v){ //标注大小
return 10 + v/10
effect : { //炫光特效
show: true, //标签显示策略，可选为：true（显示） | false（隐藏）
shadowBlur : 0
itemStyle:{
label:{show:false}
{name:'上海',value:95},
{name:'广州',value:90},
{name:'南宁',value:70},
{name:'长春',value:40},
{name:'包头',value:30},
{name:'重庆',value:20}
name:'上海',
type:'map',
mapType: 'none',
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
itemStyle : {
borderWidth:1,
lineStyle: {
type: 'solid',
shadowBlur: 10
[{name:'上海'},{name:'包头',value:95}],
[{name:'上海'},{name:'广州',value:80}],
[{name:'上海'},{name:'郑州',value:70}],
[{name:'上海'},{name:'长春',value:60}],
[{name:'上海'},{name:'重庆',value:50}],
[{name:'上海'},{name:'长沙',value:40}],
[{name:'上海'},{name:'北京',value:30}]
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 10 + v/10
effect : {
show: true,
shadowBlur : 0
itemStyle:{
label:{show:false}
{name:'包头',value:95},
{name:'广州',value:80},
{name:'郑州',value:70},
{name:'长春',value:60},
{name:'重庆',value:50},
{name:'长沙',value:40},
{name:'北京',value:30}
name:'广州',
type:'map',
mapType: 'none',
markLine : {
smooth:true,
effect : {
show: true,
scaleSize: 1,
period: 30,
color: '#fff',
shadowBlur: 10
itemStyle : {
borderWidth:1,
lineStyle: {
type: 'solid',
shadowBlur: 10
[{name:'广州'},{name:'长春',value:80}],
[{name:'广州'},{name:'重庆',value:70}],
[{name:'广州'},{name:'北京',value:30}],
[{name:'广州'},{name:'北海',value:20}]
markPoint : {
symbol:'emptyCircle',
symbolSize : function (v){
return 10 + v/10
effect : {
show: true,
shadowBlur : 0
itemStyle:{
label:{show:false}
{name:'长春',value:80},
{name:'重庆',value:70},
{name:'北京',value:30},
{name:'北海',value:20}
name:'全国',
type:'map',
mapType: 'none',
markLine : {
smooth:true,
symbol: ['none', 'circle'],
symbolSize : 1,
itemStyle : {
color:'#fff',
borderWidth:1,
borderColor:'rgba(30,144,255,0.5)'
data : [ //当图表类型为地图时，需要说明每部分数据对应的省份，可设置选中状态
[{name:'北京'},{name:'包头'}],
//{name: '北京', value: 100},{name:'上海'},可添加value值
[{name:'北京'},{name:'北海'}],
[{name:'北京'},{name:'宁波'}],
[{name:'北京'},{name:'南京'}],
[{name:'北京'},{name:'南宁'}],
[{name:'上海'},{name:'汕头'}],
[{name:'上海'},{name:'深圳'}],
[{name:'上海'},{name:'青岛'}],
[{name:'上海'},{name:'济南'}],
[{name:'上海'},{name:'珠海'}],
[{name:'广州'},{name:'北海'}],
[{name:'广州'},{name:'郑州'}],
[{name:'广州'},{name:'长春'}],
[{name:'广州'},{name:'重庆'}],
[{name:'广州'},{name:'长沙'}]
if (myChart && myChart.dispose) {
myChart.dispose();
window.onresize = myChart.
BMapExt.setOption(option, true)
共有16个答案
<span class="a_vote_num" id="a_vote_num_
谢谢了。我也是这个问题。
<span class="a_vote_num" id="a_vote_num_
您好，能否发下你的demo，
<span class="a_vote_num" id="a_vote_num_
& & & 能把demo发我一下嘛，万分感激~
<span class="a_vote_num" id="a_vote_num_
由于本人经常不在线，劳烦大家不要再加我QQ了，现在讲demo分享至百度网盘，大家可以自己下载，另外，demo中的密钥是自己要去百度API申请的。下载地址/s/1gdybVGZ
--- 共有 1 条评论 ---
(4个月前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
感谢能发我一份吗？
<span class="a_vote_num" id="a_vote_num_
,能发我一下吗？. &谢谢
<span class="a_vote_num" id="a_vote_num_
问题怎么解决的？能发我一下吗？@qq.com，非常感谢！
<span class="a_vote_num" id="a_vote_num_
& & & 最近也遇到这个问题，能把demo发我一下嘛，非常感谢！
<span class="a_vote_num" id="a_vote_num_
大家好，我的问题已经解决，需要的话，请留邮箱，我给大家发demo，或者直接QQ我也行
--- 共有 4 条评论 ---
由于本人经常不在线，劳烦大家不要再加我QQ了，现在讲demo分享至百度网盘，大家可以自己下载，另外，demo中的密钥是自己要去百度API申请的。下载地址/s/1gdybVGZ
(3个月前)&nbsp&
最近也遇到了这样的问题，能给我一份么？谢谢
(6个月前)&nbsp&
问题怎么解决的？能发我一下吗？，非常感谢！
(6个月前)&nbsp&
wz_,我也遇到了类似问题，“引用Echarts、扩展、百度地图API”这句话太笼统了，求楼主发个demo，多谢了
(6个月前)&nbsp&
<span class="a_vote_num" id="a_vote_num_
主要对“引用Echarts、扩展、百度地图API”这句话不是特别理解，不知道包括哪几个文件
更多开发者职位上
有什么技术问题吗？
类似的话题请教一个关于echarts地图扩展的问题，不甚感激_百度知道
请教一个关于echarts地图扩展的问题，不甚感激
我有更好的答案
一键浏览，聚会，下车后怎么走楼主你好，我也一直都在使用.公交步行导航功能，，怎么到公交站，再也不怕迷路了，可以使用腾讯地图分享地点、指路一键直达、街景到微信好友和朋友圈
其他类似问题
为您推荐：
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁当前访客身份：游客 [
当前位置：
刚接触echarts，看了相关的示例和文档，没有找到实现办法，所以来请教大家两个问题：
1.地图的markLine如何添加click点击事件？&
2.地图的data能否根据每次的值来显示指定的颜色？
（地图已经添加了EVENT.MAP_SELECTED监听）
共有1个答案
<span class="a_vote_num" id="a_vote_num_
2.0.3版本，需要在markLine配置中加上clickable:true
--- 共有 4 条评论 ---
: 已解决，可以在MarkLine的data里面添加color属性。
(1年前)&nbsp&
: 暂时使用dataRange吧。我看到一些线图的例子可以在data里面设置itemstyle，地图里面可以这样用吗？我试了一下好像没效果。
还有个问题想请教下，markLine的effect是否可以设置为双向移动？
(1年前)&nbsp&
: dataRange或者color为function自己控制
(1年前)&nbsp&
谢了林峰，单击事件搞定了。
2地图的data能否根据每次的值来显示指定的颜色？
这个问题有什么办法吗？需求是想为每条线设置不同的阈值显示不同颜色，比如在一张地图中，线A数值为5时显示黄色，线B数值为100时显示黄色。
(1年前)&nbsp&
更多开发者职位上
有什么技术问题吗？
ttnttn...的其它问题
类似的话题