search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.1k stars 19.6k forks source link

[Feature] Use html to render symbols #17953

Open theoarav opened 1 year ago

theoarav commented 1 year ago

What problem does this feature solve?

I have a tree that use svg with multiple paths, I'm using the callback to render different svgs depending on which element is shown in the graph. Currently I'm using image://url.svg which works and renders the SVG but with that method I can't change the SVG color which is required in my project. Using path://... to render the SVG is not really doable because some SVG have multiple path and other elements like rects, circles, ... and those SVG are used in other parts of my application.

I'm switching from SyncFusion graph to apache tree, because I find the overall possibilities of echarts way better. I just lack this feature to reproduce the same graph that I had in echarts.

What does the proposed API look like?

Be able to provide a template by referencing an html div or by writing html in typescript / javascript. If the string provided to symbol doesn't match current options (rect, emptyCircle, ..., path://, image://, ...), it would try to inject the html directly in the renderer. Or if the string starts with a < then it tries to render html directly, maybe with an encapsulation of a "master div" that would apply symbolSize.

symbol: '<div class="my-svg-mask svg-mask-color" style="width: 100%; height: 100%"></div>'
Ovilia commented 1 year ago

This may not be easy because Apache ECharts has multiple rendering engines like Canvas, SVG and they should work for both Web side and server side. If you don't need multiple colors for a single symbol, path://... should be enough. Convert multiple elements to be a single one using union operation in tools like figma/sketch first.

If you want multi colors, you can create svg files with different variations of colors. If the colors should be dynamic (e.g., users can change hue from 0 to 360), then you may consider drawing the image to a temperary canvas and convert color and export an image.

theoarav commented 1 year ago

I think I'll have to convert my svgs to path://..., and for dynamic color I'm using SVGRenderer instead of CanvasRenderer with css vars, since I need to be able to switch between light and dark theme at anytime. And the svgs i'm using doesn't have multiple colors.