-
Notifications
You must be signed in to change notification settings - Fork 19.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ECharts server-side rendering SVG contains invalid font property #16127
Comments
Hi! We've received your issue and please be patient to get responded. 🎉 In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so. A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster. You may also check out the API and chart option to get the answer. If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical question. If you are interested in the project, you may also subscribe to our mailing list. Have a nice day! 🍵 |
After a few tests around setting font for server-side ECharts rendering, I realised it's pretty broken. For instance, I set the |
Just to confirm the bug regarding a font family with spaces. When I set |
The font issue has been raised by #15064 and we've improved it in ecomfe/zrender#836. Please feel free to try to build from the If you don't want to build manually, you can also use the nightly version. |
@plainheart thanks for your info. Unfortunately, the nightly build breaks my current implementation which worked fine with 5.2.2. The new built-in feature SSR looks interesting though. I will look into it. |
Made a simple example, it's easy enough to get started. https://codepen.io/plainheart/pen/RwLbqye |
Confirm that the font issue seems to be fixed with |
Thanks for your confirmation. Maybe about 1 month. |
@plainheart a bit off topic but the new SSR function with |
@htr3n We are considering providing an option that can use |
@pissang @plainheart Regarding the nightly build that you recommended, I've noticed a strange issue. I tried to load the legend icons as dataURI per documentation here: https://echarts.apache.org/en/option.html#legend.data.icon. The legend: {
show: true,
data: [
{
name: 'LegendIcon',
icon: 'image:https://data:image/svg+xml;base64,PHN2ZyB4bWxuc....'
}
]
} I use the same code on my React UI and it can be rendered successfully. But the new nightly build server-side rendering implementation
Updated: If I replace the icon: 'path:https://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z' then it works. My wild guess is that, the In case of using SVG path data, |
It may be related to this line. https://github.com/ecomfe/zrender/blob/next/src/svg/graphic.ts#L207 |
@plainheart Does that mean my guess is correct? The legend icon needs a Canvas to render properly, doesn't it? |
Perhaps I can provide more details into the error after catching it
|
Following up on the legend icon issue, if I use SVG path data <path d="M 0 3.7391 L 5.4348 7 M 0 10.2609 L 5.4348 7 L 7.6087 7 M 9.7826 7 L 11.9565 7 M 14.1304 7 L 16.3043 7 M 18.4783 7 L 20.6522 7 L 25 3.7391 M 20.6522 7 L 25 10.2609" fill="#5f4890" fill-opacity="1" stroke="none" transform="matrix(1,0,0,1,616.5208,5)"></path> How do I set the attributes I've looked left and right into the documentation https://echarts.apache.org/en/option.html#legend.data.icon but could not find any settings? |
Should I report a bug regarding the legend icon |
No need to do that. We will look into this issue. |
@plainheart Is this fixed in the release 5.3.0? |
@htr3n It should be fixed in 5.3.0. Please try it again. Let us know if you still have issues. |
@plainheart Just confirm the issue with invalid font properties is fixed in 5.3.0. I think we should split the issue with the legend icon |
@htr3n Sorry for my late reply. Just checked this icon issue with the latest version, it seems to be working for me. How is it on your side? |
@plainheart Hi, sorry for my late reply. I can confirm it's fixed in 5.3.0 |
Version
5.2.2 (and 5.2.1)
Reproduction link
https://codesandbox.io/s/echarts-ssr-uxfju
Steps to reproduce
What is expected?
<text>
elements should have the correct font family as specified.<text>
elements inside the resulting SVG should have valid font specification insidestyle=""
.What is actually happening?
<text>
elements do not have the correct font family as specified.<text>
elements contain invalid font specification so that the SVG text will be rendered incorrectly.Per CSS
font
property (see https://developer.mozilla.org/en-US/docs/Web/CSS/font), it should beI found this bug when I tried to configure the Y axis
nameTextStyle
to bold and small size and realised that the font styles and weight I set there do not affect the outcome at all.This issue is only seen with server-side rendering. I use an identical configuration for a React front-end, it works fine, produces valid CSS.
The text was updated successfully, but these errors were encountered: