通路详情图

• 基于Echrets封装的上海地图

/**
 * 上海地图
 * @param {string} id 当前选中容器
 * @param {*} config 自定义配置项
 * @param {Function} onMouseOver 鼠标进入地图事件
 * @param {Function} onMouseOut 鼠标离开地图事件
 * @param {Function} tooltipCallback 用于返回需要展示的文案
 * @param {*} chartMap 当前图表实例组合
 * @param {*} clear 清空画布
 */

  import { initShangHaiMap } from '~'
  const chartMap = new Map();
  const imgFillEle= new Image(20,20); // 地图表面填充图
  imgFillEle.src = mapFillImg;

  const config = {
    imgFillEle:'',  // 地图贴图 HTMLImageElement类型,存在则优先展示贴图,不存在使用 mapColor 和 hoverMapColor
    mapColor:'#455b7a', // 地图颜色 *必填项
    hoverMapColor:'#35455d', // hover状态地图颜色 *必填项
    borderColor:'#fff', // 地图边框颜色 默认 #fff
    hoverBorderColor:'#000', // hover状态地图边框颜色  默认 #fff
    fontSize: 12, // 展示文字字体大小 默认12px
    hoverFontSize: 14, // hover状态 展示文字字体大小 默认12px
    fontColor:'#eee', // 展示文字颜色 默认 #eee
    hoverFontColor:'#fff', // 展示文字颜色 默认 #fff
    showTooltip:true, // 是否显示tooltip框 默认false
    tooltipBorderColor:'#BBDCEC', // tooltip边框颜色 默认 #BBDCEC
    tooltipBorderWidth: 1, // tooltip边框宽度 默认 1px
    tooltipColor: 'red', // tooltip文字颜色 默认 #fff
    // tooltipBgc: '#fff', // tooltip文案提示框背景颜色 默认 #fff
  } 
  // 鼠标进入地图事件
  const onMouseOver = (event)=>{
    console.log(event);
  }
  // 鼠标移除地图事件
  const onMouseOut = (event)=>{
    console.log(event);
  }
    // tooltipCallback 用于返回需要展示的文案
  const tooltipCallback = (params)=>{
    return `<span style="color:${config.tooltipColor};fontSize:20px;padding:8px 12px;">${params.name} - tooltipCallback</span>`;
  }
  // 初始化上海地图
  initShangHaiMap({ id:'shanghaiMap',chartMap,onMouseOver,onMouseOut,tooltipCallback,config })