echarts百度地图上制作工具栏
时间: 2023-11-24 11:39:11 浏览: 38
要在ECharts百度地图上添加工具栏,你可以使用ECharts提供的API和百度地图API结合起来实现。
以下是一个简单的示例,显示了如何在ECharts百度地图上添加工具栏:
```javascript
// 初始化百度地图
var bmap = new BMap.Map("container");
bmap.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
bmap.enableScrollWheelZoom(true);
// 初始化ECharts实例
var echartsContainer = document.getElementById('container');
var echartsInstance = echarts.init(echartsContainer);
// 定义ECharts选项
var option = {
// 将ECharts的地图类型设置为百度地图
bmap: {
center: [116.404, 39.915],
zoom: 11,
roam: true
},
// 定义ECharts工具栏
toolbox: {
feature: {
saveAsImage: {},
dataView: {},
restore: {},
myTool1: {
show: true,
title: '自定义工具1',
icon: 'path://M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512z m251.15 369.38L503.88 317.5c-5.51-5.5-14.45-5.5-19.96 0L512 330.38V176c0-7.73-6.27-14-14-14s-14 6.27-14 14v161.34l-68.44-68.44c-5.5-5.5-14.44-5.5-19.95 0l-22.63 22.63c-5.5 5.5-5.5 14.44 0 19.95l91.55 91.55c2.75 2.75 6.36 4.12 9.98 4.12s7.23-1.37 9.98-4.12l91.56-91.55c5.5-5.5 5.5-14.44 0-19.95z',
onclick: function () {
alert('自定义工具1被点击');
}
},
myTool2: {
show: true,
title: '自定义工具2',
icon: 'path://M512 0c-282.77 0-512 229.23-512 512s229.23 512 512 512 512-229.23 512-512-229.23-512-512-512z m251.15 369.38L503.88 317.5c-5.51-5.5-14.45-5.5-19.96 0L512 330.38V176c0-7.73-6.27-14-14-14s-14 6.27-14 14v161.34l-68.44-68.44c-5.5-5.5-14.44-5.5-19.95 0l-22.63 22.63c-5.5 5.5-5.5 14.44 0 19.95l91.55 91.55c2.75 2.75 6.36 4.12 9.98 4.12s7.23-1.37 9.98-4.12l91.56-91.55c5.5-5.5 5.5-14.44 0-19.95z',
onclick: function () {
alert('自定义工具2被点击');
}
}
}
},
// 定义ECharts系列数据
series: [{
type: 'scatter',
coordinateSystem: 'bmap',
data: [
[116.404, 39.915],
[117.404, 39.915],
[116.404, 40.915],
[117.404, 40.915]
],
symbolSize: 20
}]
};
// 将选项设置到ECharts实例中
echartsInstance.setOption(option);
```
请注意,此示例中的选项中有一个`toolbox`对象,其中包含了两个自定义工具。你可以根据需要添加或删除工具。
在上面的示例中,我们使用了一个自定义图标作为工具的图标。如果你没有自己的图标,可以使用ECharts提供的默认图标。例如,使用`saveAsImage`工具的默认图标,只需将`myTool1`工具的`icon`属性设置为`'image://http://echarts.baidu.com/images/favicon.png'`。