CarsonLoi commented on issue #16902:
URL: https://github.com/apache/echarts/issues/16902#issuecomment-1556228052
@helgasoft thanks for the reply mate.
kindly find the source code and svg file below for your review.
Additionally, I don’t think there’s a must to have latitude/longitude in svg
file according to the official website example ( the beef one), please correct
me if I am wrong and can you advise how to add latitude for a normal svg file
———————————————
import React, { useRef, useEffect } from "react";
import * as echarts from "echarts";
import mapData from "./map.svg";
export default function Heatmap(){
const ref = useRef(null);
let mapInstance = null;
const option = {
tooltip: {},
visualMap: {
left: 'center',
bottom: '10%',
min: 5,
max: 100,
orient: 'horizontal',
text: ['', 'Price'],
realtime: true,
calculable: true,
inRange: {
color: ['#dbac00', '#db6e00', '#cf0000']
}
},
series: [
{
name: 'French Beef Cuts',
type: 'map',
map: 'testing',
roam: true,
emphasis: {
label: {
show: false
}
},
selectedMode: false,
data: [
{ name: 'Queue', value: 15 },
{ name: 'Langue', value: 35 },
{ name: 'Plat de joue', value: 15 },
{ name: 'Gros bout de poitrine', value: 25 },
{ name: 'Jumeau à pot-au-feu', value: 45 },
{ name: 'Onglet', value: 85 },
{ name: 'Plat de tranche', value: 25 },
{ name: 'Araignée', value: 15 },
{ name: 'Gîte à la noix', value: 55 },
{ name: "Bavette d'aloyau", value: 25 },
{ name: 'Tende de tranche', value: 65 },
{ name: 'Rond de gîte', value: 45 },
{ name: 'Bavettede de flanchet', value: 85 },
{ name: 'Flanchet', value: 35 },
{ name: 'Hampe', value: 75 },
{ name: 'Plat de côtes', value: 65 },
{ name: 'Tendron Milieu de poitrine', value: 65 },
{ name: 'Macreuse à pot-au-feu', value: 85 },
{ name: 'Rumsteck', value: 75 },
{ name: 'Faux-filet', value: 65 },
{ name: 'Côtes Entrecôtes', value: 55 },
{ name: 'Basses côtes', value: 45 },
{ name: 'Collier', value: 85 },
{ name: 'Jumeau à biftek', value: 15 },
{ name: 'Paleron', value: 65 },
{ name: 'Macreuse à bifteck', value: 45 },
{ name: 'Gîte', value: 85 },
{ name: 'Aiguillette baronne', value: 65 },
{ name: 'Filet', value: 95 }
]
}
]
}
const renderMap = (myChart) => {
/*const renderedMapInstance = echarts.getInstanceByDom(ref.current);
if (renderedMapInstance) {
mapInstance = renderedMapInstance;
} else {
mapInstance = echarts.init(ref.current);
}
mapInstance.setOption(option);*/
myChart.setOption(option)
};
useEffect(() => {
fetch(mapData)
.then((response) => response.text())
.then((svgText) => {
echarts.registerMap("testing", { svg: svgText });
});
var chartDom = document.getElementById('beef');
var myChart = echarts.init(chartDom);
renderMap(myChart);
}, []);
/*
useEffect(() => {
window.onresize = function () {
};
return () => {
mapInstance && mapInstance.dispose();
};
}, []); mapInstance.resize();
*/
return (
<div>
<div style={{ width: "100%", height: "50vh" }} ref={ref}
id='beef'></div>
</div>
);
}
————————————————————
Svg file
<svg
xmlns="http://www.w3.org/2000/svg";
width="591"
height="373"
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 376 237"
>
<g transform="translate(-7.69,10.06)">
<path
d="m 536.375,106.46875 c 5.2885,14.34201 10.52945,33.1769
13.78125,43.21875 -0.0655,0.0771 -0.13181,0.1476 -0.21875,0.21875 l
16.5625,0.9375 10.5,-8.5 11,-17 -13.5,-18 -38.125,-0.875 z"
stroke="#A5A5A5"
stroke-width="0.75"
stroke-linecap="round"
fill="#FFFFFF"
fill-rule="evenodd"
id="path3702"
name="Langue"
transform="matrix(0.6362812,0,0,0.6362812,7.6936433,-10.065285)"
/>
</g>
</svg>
--
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]
