Tmap-echarts是在天地图4.0图层上展示echarts图表的插件,通过实现自定义覆盖物完成图表的渲染,几乎支持echarts中的所有图表,包括3D图表。
相比盖一个div在地图上,自定义覆盖物可以更灵活的去展示想要的效果,能与地图更完美的结合。
甚至可以在上面再盖一个echarts的百度地图(未尝试过)
如果见过这个:https://echarts.apache.org/examples/zh/editor.html?c=map-usa-pie 那应该很好理解该插件。
npm i tmap-echarts -S
import("tmap-echarts").then(({ echartsOverlay }) => {
const option = {
tooltip: {
trigger: "item",
},
series: [
{
name: "Access From",
type: "pie",
radius: "50%",
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
},
],
};
const overlay = new echartsOverlay(
new window.T.LngLat(116.40769, 39.89945),
{
width: 300,
echartsOptions: option,
updateCallBack: (chartView, map) => {
// console.log(chartView, map);
// console.log(map.getZoom());
// console.log(chartView.getDom());
// console.log(this);
},
}
);
map.addOverLay(overlay);
});
// echarts的option
overlay.refreshEchartsOption(options)
// 或者获取echart视图
overlay.getChart().setOption(options)
overlay.getChart()
// 隐藏
overlay.hide()
// 显示
overlay.show()
map.removeOverLay(overlay)
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
lnglat | 放置图表的经纬度位置 | lnglat | 无 |
options | 配置对象 | object | {} |
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
echartsOptions | echarts图表的option | object | {} |
width | 容器的长 | Number | 200 |
Height | 容器的高 | Number | 200 |
index | 容器在地图中的层级 | Number | 无 |
isDisScale | 是否禁用自动缩放 | Boolean | false |
scaleNum | 自动缩放的比例系数 计算方式为 (zoom / 10) * this.width * this.scaleNum |
Number | 1 |
updateCallBack | update的回调函数,返回参数(chartView, map)=> {} | Function | Null |
博客:随机的布尔值