Apache ECharts in Astro
David Gasquez
April 9, 2025
Similar to Observable Plot in Astro, I wanted to explore integrating Apache ECharts with Astro. ECharts is a powerful and loved charting library that offers a wide range of visualization options with excellent customization capabilities.
The Charts
import ApacheEChart from "../../components/ApacheEChart.astro";
Here's a basic bar chart example using default options:
And a customized line chart showing weekly temperature data:
The Component
First, create a reusable component ApacheEChart.astro:
Using the Component
Then you can use it in any .astro, .html, or .mdx file like this:
Advanced Usage
ECharts supports many types of visualizations like scatter plots, pie charts, candlestick charts, and more. You can also add features like:
Multiple series
Interactive legends
Data zooming
Tooltips with rich content
Animation effects
Check the ECharts documentation for more examples and configuration options.
Next Steps
In a future, I'd love to work on a post to explore:
Loading data at build time with DuckDB and passing it to the charts
Building interactive dashboards with multiple charts
Discussion in the ATmosphere