Raster and Vector images

A quick guide on how to use images in Apache ECharts Panel depending on the source type.

Apache ECharts supports base64 PNG and SVG (vector) images.

Use Cases

As Daria mentioned in the video tutorial, the typical cases when you may need to use images include:

• Data points
• Simple labels
• Loaded labels
• Tooltips
• Axis labels
• Axis data labels
• Legend
• Background

You can enhance all of the mentioned visual components with your images. You can use several ways to reference images in the plugin configuration.

Reference images

• URL: using the image:// prefix.
• Path: using the path:// prefix.
• XML file: using the image://data:image/svg+xml;utf8 prefix.
• PNG(raster) image: using the image://data:image;base64 prefix.

Example

You can copy the following code and run it in your instance of Apache ECharts Panel on your Grafana dashboard.

docs/volkovlabs-echarts-panel/js/images.js

loading...

You should see the following visualization.

Display images using URL, Path, XML SVG and Base64 PNG.