在可视化的开发过程中,有时我们需要利用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;
},