echarts 调用geo百度地图只需要显示潍坊市
时间: 2023-08-18 13:03:49 浏览: 83
你可以使用 echarts 中的 Geo 组件来显示百度地图。首先需要引入百度地图的 JavaScript API。
然后可以使用以下代码来初始化 echarts:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('myChart'));
// 引入百度地图
var bmap = new BMap.Map("myChart");
// 设置地图中心为潍坊市
var center = new BMap.Point(119.168, 36.712);
bmap.centerAndZoom(center, 12);
// 创建Geo组件,设置为百度地图
var geo = {
map: 'none',
roam: true,
zoom: 1.2,
center: [119.168, 36.712], // 潍坊市经纬度
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
};
// 设置option
var option = {
bmap: {
center: [119.168, 36.712],
zoom: 12,
roam: true
},
geo: geo
};
// 绘制地图
myChart.setOption(option);
```
注意,这里需要先引入百度地图的 JavaScript API,并且需要先创建一个 `BMap.Map` 对象来初始化百度地图。然后在 echarts 的 option 中,需要设置 `bmap` 属性为对应的百度地图配置,同时设置 `geo` 组件为百度地图类型,并设置中心点为潍坊市。
阅读全文