react编写echarts结合百度地图来使用动态展示数据,代码实现
时间: 2023-06-12 10:05:30 浏览: 143
首先,需要在项目中引入 echarts 和百度地图的 JS 库。可以通过 npm 安装,也可以直接在 html 中引入。
然后,在组件中引入 echarts 和百度地图的 JS 库,并创建一个 div 作为容器,用于存放 echarts 和地图。
```jsx
import React, { useEffect, useRef } from 'react';
import echarts from 'echarts';
import 'echarts-gl/dist/echarts-gl';
import 'echarts/map/js/world';
import BMap from 'BMap';
const MapChart = ({ data }) => {
const chartRef = useRef(null);
useEffect(() => {
if (chartRef.current) {
const myChart = echarts.init(chartRef.current);
const option = {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [
{
type: 'map3d',
map: 'world',
roam: true,
itemStyle: {
areaColor: '#fff',
borderColor: '#333'
},
label: {
show: true
},
data: []
}
]
};
myChart.setOption(option);
const map = new BMap.Map(chartRef.current);
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
map.enableScrollWheelZoom(true);
const overlay = new BMap.Overlay();
overlay.initialize = function (map) {
this._map = map;
const div = document.createElement('div');
div.style.position = 'absolute';
div.style.width = '10px';
div.style.height = '10px';
div.style.background = '#f00';
map.getPanes().labelPane.appendChild(div);
this._div = div;
return div;
};
overlay.draw = function () {
const position = map.pointToOverlayPixel(new BMap.Point(116.404, 39.915));
this._div.style.left = position.x + 'px';
this._div.style.top = position.y + 'px';
};
map.addOverlay(overlay);
}
}, [data]);
return <div ref={chartRef} style={{ width: '100%', height: '600px' }} />;
};
export default MapChart;
```
在 useEffect 中,先初始化 echarts 实例,然后创建地图,并将 echarts 实例与地图容器绑定。然后,初始化地图,并添加一个自定义的覆盖物。
这里的 data 是从 props 中传递过来的,可以根据需要进行修改。
阅读全文