You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by "CarsonLoi (via GitHub)" <gi...@apache.org> on 2023/05/19 12:53:44 UTC
[GitHub] [echarts] CarsonLoi opened a new issue, #18643: [Bug] Error for visualizing custom svg floorplan in React
CarsonLoi opened a new issue, #18643:
URL: https://github.com/apache/echarts/issues/18643
### Version
5.4.2
### Link to Minimal Reproduction
will provide the source code
### Steps to Reproduce
I use echarts to visualize a custom svg map.
However, for every first npm start, it will always return error at Cannot read properties of undefined (reading 'regions')
But when I re-compile in vscode (just simply press ctrl + s), the website will refresh and successfully get the output.
Please help to out for this issue which has been bordered me for a long time!
also kindly refer to the source code and svg file for your review. thanks.
### Current Behavior
Got Error at Cannot read properties of undefined (reading 'regions')
### Expected Behavior
Can show the output without error
### Environment
```markdown
- OS:
- Browser:
- Framework:
```
### Any additional comments?
souce code
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: commits-unsubscribe@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[GitHub] [echarts] helgasoft commented on issue #18643: [Bug] Error for visualizing custom svg floorplan in React
Posted by "helgasoft (via GitHub)" <gi...@apache.org>.
helgasoft commented on issue #18643:
URL: https://github.com/apache/echarts/issues/18643#issuecomment-1558598688
@CarsonLoi, there is very minimal chance to get **React help** here.
Your ECharts code is working fine - [Demo](https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=M4Nw5gBAvBAGA8owCgJvRgHgWwDYDtgoAiACwBdyAHALgHo6B3ZgOkYGYWB7AJzDoBMABhF0kxVBimMAlgBNypEgFYAnAEYJUqaQCmMsBRLsA7Oy3b0VHruC6eIXQEFgVXQGNyAJQCG5GVwkmACy8gCaoXIQ2Lq65BaWECAyuowAQlyYJEIQOaYAbBACpglSAHyS2vCQ5Dw-hABmvNgktfXAuH66ABQAtCYs-aoANOpCLEL5AJTEFYnwVH6klZZyJNgQyuz5LKbKo5MsACz5ABwmyhDumywCp6f76ke7R8LqEGMsygKqR_vsnHUJiGH04JlO6gE-yOnAE6nOl1640myn2yJMJneSJY6nY8PUw3GT2BEGxcIRhNu8IuEFwHx2ynyUMpqj2H3G-16py-HwJvSBpNxX2G_NOpPY3MhnPGCIgAC9StpgLUuABrXQkADETmUOp1xAgKyVKvVvVkCiUxHGF0VUmVPDVul6uBk-A8PioJAdAFd8HJbRgGjJcLgtQAxCORgPoIMh3o8b24DXEXSOfBcOT-o1SeQkRaKUxCATRtD4HwxEgAGXqYG9ugN2YwbUazXWfh4Mkw3XG-W2d0hhMHPb7EIEwwGQ22MPYIs-KLuyhmjYgdDmlngdDAZTQkg3SDKsEkHlIPh45GALBsYBkyvswQ93QA5ORbP58GBH8MIABvCBIGh_uAEAAL5TAA3JIXBUP4XD4NAP4rOQXBcLg_i0D-wHDCsyTAN6Pi4Pe6HftmSYNOQAGPu4uj4C-PCftmABGXCUFw2AUWMACk9HaNgroAfs2bYD4mAAWMQhYdovApDRFGkFJcqweQ-HcVIL6YOREAANqPp-ECPgACh2VGPgAuhJUg2Ph_gxABtR1uZGDu
Ph7iJj4DFJrZCa6A56Cur4766ABxGJO4KG8AB2manIDE-O4Ii6Y-UUMfkujxV-iXuA0IjxSZ2bASsmErHYHa2BF2bBZYZY2XpYY2Pg7ikBAaSxA0EAAMLeueKnaOQACebgUUJVDdVIQ0US-yquh-PkYA65aefZy66NgVAnsAN5BYViR2Emni6HIwQZoFEANPhdgzegch-D4ZWJGgv5Vcdj4AIp1nWukgPhdaiZcW13Q95ZPdW77vV-n24N9EDsL9F1oLl2j5Rg8MgWBQA).
Duplicate of #16902 (reading 'regions' error)
--
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: commits-unsubscribe@echarts.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org