echarts在百度地图上添加饼图、柱状图等

可视化项目需要在百度地图上添加柱状图、折线图、饼图等，如下图：

示例.png

示例饼状图.png

查了一下官网并没有相似的例子，思路是将经纬度转为像素点，刚开始用了convertToPixel方法，一直报错不支持，后来又查了好多资料，这个方法不支持bmap，而应该用

const coord = myChart.getModel().getComponent('bmap').coordinateSystem.dataToPoint([lon, lat]);

加载时要监听bmap的缩放和拖拽，实时绘制柱状图的位置，chart监听地图缩放平移用bmaproam，geo坐标系用georoam，代码如下

const coor = char.getModel().getComponent('bmap').coordinateSystem;
function renderC() {
  op.grid.map((item, i) => {
     const coord = coor.dataToPoint(item.data);
     console.log(`gird${i}:`, coord);
     item.left = coord[0] - 15;
     item.top = coord[1] - 35;
  });
  char.setOption(op)
}
renderC();
const ren = throttle(renderC, 100, 10);
char.on("bmaproam", ren);

此时以为要成功了，然而高兴的太早，缩放时图表位置加载合适，平移时不行，心态要炸。

然后又找找找，找到了下面的方法，用百度地图自己的方法，终于合适。

function renderC() {
 const bmap = char.getModel().getComponent('bmap').getBMap();
 const projection = bmap.getMapType().getProjection();
 const box = bmap.getSize();
 const zoom = window.Math.pow(2, 18 - bmap.getZoom());
 const center = projection.lngLatToPoint(bmap.getCenter());
 op.grid.map((item, i) => {
   let point = projection.lngLatToPoint({ lng: item.data[0], lat: item.data[1]})
   let x = Math.round((point.x - center.x) / zoom + box.width / 2);
   let y = Math.round((center.y - point.y) / zoom + box.height / 2);
   item.left = x - 15 + 'px';
   item.top = y - 35 + 'px';
  });
  char.setOption(op);
}
renderC();
const ren = throttle(renderC, 10);
char.on("bmaproam", ren);

补充：

  const throttle = (fn, delay, debounce) => {
    let currCall;
    let lastCall = 0;
    let lastExec = 0;
    let timer = null;
    let diff;
    let scope;
    let args;
    delay = delay || 0;
    function exec() {
      lastExec = (new Date()).getTime();
      timer = null;
      fn.apply(scope, args || []);
    };
    const cb = function() {
      currCall = (new Date()).getTime();
      scope = this;
      args = arguments;
      diff = currCall - (debounce ? lastCall : lastExec) - delay;
      clearTimeout(timer);
      if (debounce) {
        timer = setTimeout(exec, delay);
      } else {
        if (diff >= 0) {
          exec();
        } else {
          timer = setTimeout(exec, -diff);
        }
      }
      lastCall = currCall;
    };
    return cb;
  };

ps：
1、需要引入
import 'echarts/extension/bmap/bmap';
2、需要引入

3、加载bmap组件

option = {
    // 加载 bmap 组件
    bmap: {
        // 百度地图中心经纬度
        center: [120.13066322374, 30.240018034923],
        // 百度地图缩放
        zoom: 14,
        // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
        roam: true,
        // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
        mapStyle: {}
    },
    series: [{
        type: 'scatter',
        // 使用百度地图坐标系
        coordinateSystem: 'bmap',
        // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
        data: [ [120, 30, 1] ]
    }]
}

// 获取百度地图实例，使用百度地图自带的控件
var bmap = chart.getModel().getComponent('bmap').getBMap();
bmap.addControl(new BMap.MapTypeControl());