【可视化开发】鼠标移到ECharts地图显示酷炫效果

在可视化的开发过程中，有时我们需要利用ECharts绘制地图，当鼠标移上去时显示一些酷炫的效果，如统计结果需要好看的背景图。需要怎么配置ECharts的api呢？

引入背景图片，注意返回的HTML模板使用的是原生img标签，需要先引入图片（@xxx方式），这样项目打包部署才能正常显示图片。

import backgroundImg from '@_views/xxx/img/xxx.png';

鼠标移向地图显示效果对应的是tooltip这个属性，当我们想要自定义显示效果，那么重写tooltip对象的formatter属性即可。 

formatter: function (params) {
      const { name, relics } = params.data;
      const html = `
      <img src='${backgroundImg}' height='233' width='288' style='position: relative;'>
        <div style="position: absolute; top: 0; left: 50%; transform: translate(-50%, 0); margin: 10px; height: 220px; width: 220px; font-family: 'Microsoft YaHei UI'">
          <div style="height: 60px;line-height: 60px; color: #6F3F14; font-weight: 700;">${
            params.name
          }</div>
          <div>
            <div>数字文化保护数量：</div>
            <div style="display: flex; justify-content: flex-start; margin: 10px 0;">
              <div style='text-align: left; flex: 1'>
                <div style="color: #B37C4A;font-size: 14px;line-height: 20px;">历史建筑</div>
                <div style="color: #FF8A00;font-size: 18px;line-height: 20px;">${
                  relics.history || 0
                }</div>
              </div>
              <div style='text-align: left; flex: 1'>
                <div style="color: #B37C4A;font-size: 14px;line-height: 20px;">不可移动文物</div>
                <div style="color: #FF8A00;font-size: 18px;line-height: 20px;">${
                  relics.relic || 0
                }</div>
              </div>
            </div>
            <div style="display: flex;justify-content: flex-start;">
              <div style='text-align: left; flex: 1'>
                <div style="color: #B37C4A;font-size: 14px;line-height: 20px;">古树名木</div>
                <div style="color: #FF8A00;font-size: 18px;line-height: 20px;">${
                  relics.tree || 0
                }</div>
              </div>
              <div style='text-align: left; flex: 1'>
                <div style="color: #B37C4A;font-size: 14px;line-height: 20px;">街巷</div>
                <div style="color: #FF8A00;font-size: 18px;line-height: 20px;">${
                  relics.street || 0
                }</div>
              </div>
            </div>
          </div>
        </div>
      </img>`;
      return html;
    },