mahnurz02 opened a new issue, #21420:
URL: https://github.com/apache/echarts/issues/21420
### 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
<template>
<div class="relative">
<div class="zoom-buttons-wrapper">
<button @click="zoomIn">+</button>
<button @click="zoomOut">−</button>
</div>
<div ref="mapChart" style="width:100%; height:600px;"></div>
</div>
</template>
<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
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
_No response_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
