Version
latest version
Link to Minimal Reproduction
I am unable to marker here, unable to fix it. It keeps on doubling the map
Steps to Reproduce
<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
const mapChart = ref(null);
let chart = null;
let currentZoom = 1;
const employeesByCountry = [
{ name: "Pakistan", value: 10 },
{ name: "United States of America", value: 20 },
{ name: "India", value: 15 },
{ name: "China", value: 8 },
{ name: "Brazil", value: 6 },
];
async function loadScript(src) {
return new Promise((resolve, reject) => {
if (document.querySelector(`script[src="${src}"]`)) return resolve();
const s = document.createElement("script");
s.src = src;
s.async = true;
s.onload = resolve;
s.onerror = () => reject(new Error(`Failed to load ${src}`));
document.head.appendChild(s);
});
}
async function initMap() {
await loadScript("/js/echarts.min.js");
await loadScript("/js/world.js");
await nextTick();
const ec = window.echarts;
chart = ec.init(mapChart.value);
const option = {
tooltip: {
trigger: "item",
formatter: (p) => {
const data = employeesByCountry.find(c => c.name === p.name);
return `${p.name}: ${data?.value ?? 0} employees`;
}
},
visualMap: {
min: 0,
max: 20,
text: ["High", "Low"],
calculable: true,
inRange: { color: ["#d3d3d3", "#0868ac"] },
},
series: [
{
name: "Employees",
type: "map",
map: "world",
roam: true, // allow drag + zoom
zoom: currentZoom,
data: employeesByCountry.map(c => ({ name: c.name, value: c.value })),
emphasis: { itemStyle: { areaColor: "#505050" } },
}
]
};
chart.setOption(option);
window.addEventListener('resize', () => chart.resize());
}
function zoomIn() {
currentZoom += 0.25;
chart.setOption({ series: [{ zoom: currentZoom }] });
}
function zoomOut() {
currentZoom = Math.max(0.5, currentZoom - 0.25);
chart.setOption({ series: [{ zoom: currentZoom }] });
}
onMounted(() => initMap());
onBeforeUnmount(() => chart?.dispose());
</script>
<style scoped>
.zoom-buttons-wrapper {
position: absolute;
top: 10px;
right: 10px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
}
.zoom-buttons-wrapper button {
cursor: pointer;
background: white;
border: 1px solid #aaa;
border-radius: 4px;
width: 40px;
height: 36px;
font-size: 18px;
}
.zoom-buttons-wrapper button:hover {
background: #f0f0f0;
}
</style>
Current Behavior
I am getting a doubling effect on map when i try to zoom in and out after adding map in above code
somehow i succeeded in adding zoom functionality in above code
however I am unable to add markers here without doubling behavior( i have scatter and mark handler both techniques none of them worked)
Expected Behavior
markers to appear on the countries having employees and on zooming in and out every thing should work perfect
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
