/tmap-echarts

在天地图4.0地图上展示echarts的图表

Primary LanguageJavaScriptMIT LicenseMIT

tmap-echarts

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

在线示例

Edit tmap-echarts-demo

使用教程

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)

获取echart视图

overlay.getChart()

隐藏/显示

// 隐藏
overlay.hide()
// 显示
overlay.show()

删除视图/销毁视图

map.removeOverLay(overlay)

配置项

参数 说明 类型 默认值
lnglat 放置图表的经纬度位置 lnglat 无
options 配置对象 object {}

options

参数 说明 类型 默认值
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

依赖

其他

博客：随机的布尔值

赞助

赞助一杯咖啡