{
  "$type": "site.standard.document",
  "content": {
    "$type": "site.standard.content.markdown",
    "text": "Similar to [Observable Plot in Astro](/observable-plot-astro), I wanted to explore integrating Apache ECharts with Astro. ECharts is a powerful [and loved](https://news.ycombinator.com/item?id=43624220) charting library that offers a wide range of visualization options with excellent customization capabilities.\n\n## The Charts\n\nimport ApacheEChart from \"../../components/ApacheEChart.astro\";\n\nHere's a basic bar chart example using default options:\n\n<ApacheEChart />\n\nAnd a customized line chart showing weekly temperature data:\n\n<ApacheEChart\n  height=\"300px\"\n  options={{\n    title: {\n      text: \"Weekly Temperature\"\n    },\n    animation: false,\n    tooltip: {\n      trigger: \"axis\"\n    },\n    xAxis: {\n      type: \"category\",\n      data: [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"]\n    },\n    yAxis: {\n      type: \"value\"\n    },\n    series: [\n      {\n        name: \"Temperature\",\n        type: \"line\",\n        smooth: true,\n        data: [18, 19, 22, 24, 20, 21, 19]\n      }\n    ]\n  }}\n/>\n\n## The Component\n\nFirst, create a reusable component `ApacheEChart.astro`:\n\n```astro\n---\ninterface Props {\n  width?: string;\n  height?: string;\n  options?: Record<string, any>;\n}\n\nconst { width = \"100%\", height = \"400px\", options = {} } = Astro.props;\n\n// Generate a unique ID for this chart instance\nconst chartId = `echart-${Math.random().toString(36).substring(2, 11)}`;\n\n// Default chart options if none provided\nconst defaultOptions = {\n  title: {\n    text: \"ECharts Example\"\n  },\n  tooltip: {},\n  xAxis: {\n    data: [\"A\", \"B\", \"C\", \"D\", \"E\"]\n  },\n  yAxis: {},\n  series: [\n    {\n      name: \"Sales\",\n      type: \"bar\",\n      data: [5, 20, 36, 10, 10]\n    }\n  ]\n};\n\n// Merge provided options with defaults\nconst chartOptions = Object.keys(options).length > 0 ? options : defaultOptions;\nconst serializedOptions = JSON.stringify(chartOptions);\n---\n\n<div id={chartId} style={`width: ${width}; height: ${height};`}></div>\n\n<script define:vars={{ chartOptions: serializedOptions, chartId }}>\n  // Load ECharts from CDN\n  document.addEventListener(\"DOMContentLoaded\", async () => {\n    // Load ECharts core\n    const echarts = await import(\"https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.esm.min.js\");\n\n    // Initialize chart\n    const chartContainer = document.getElementById(chartId);\n    const chart = echarts.init(chartContainer);\n\n    // Set chart options\n    const options = JSON.parse(chartOptions);\n    chart.setOption(options);\n\n    // Handle resize\n    window.addEventListener(\"resize\", () => {\n      chart.resize();\n    });\n  });\n</script>\n```\n\n## Using the Component\n\nThen you can use it in any `.astro`, `.html`, or `.mdx` file like this:\n\n```mdx\nimport ApacheEChart from \"../../components/ApacheEChart.astro\";\n\n<ApacheEChart />\n\n<ApacheEChart\n  height=\"300px\"\n  options={{\n    // Your custom chart options\n  }}\n/>\n```\n\n## Advanced Usage\n\nECharts supports many types of visualizations like scatter plots, pie charts, candlestick charts, and more. You can also add features like:\n\n- Multiple series\n- Interactive legends\n- Data zooming\n- Tooltips with rich content\n- Animation effects\n\nCheck the [ECharts documentation](https://echarts.apache.org/en/option.html) for more examples and configuration options.\n\n## Next Steps\n\nIn a future, I'd love to work on a post to explore:\n\n1. Loading [data at build time with DuckDB](/duckdb-in-astro) and passing it to the charts\n2. Building interactive dashboards with multiple charts",
    "version": "1.0"
  },
  "description": "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 \".....",
  "path": "/apache-echarts-astro",
  "publishedAt": "2025-04-09T00:00:00.000Z",
  "site": "at://did:plc:4z5i7njrld66ew36htufcwry/site.standard.publication/3mo43d2tmt2ov",
  "textContent": "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.\n\nThe Charts\n\nimport ApacheEChart from \"../../components/ApacheEChart.astro\";\n\nHere's a basic bar chart example using default options:\n\nAnd a customized line chart showing weekly temperature data:\n\nThe Component\n\nFirst, create a reusable component ApacheEChart.astro:\n\nUsing the Component\n\nThen you can use it in any .astro, .html, or .mdx file like this:\n\nAdvanced Usage\n\nECharts supports many types of visualizations like scatter plots, pie charts, candlestick charts, and more. You can also add features like:\nMultiple series\nInteractive legends\nData zooming\nTooltips with rich content\nAnimation effects\n\nCheck the ECharts documentation for more examples and configuration options.\n\nNext Steps\n\nIn a future, I'd love to work on a post to explore:\nLoading data at build time with DuckDB and passing it to the charts\nBuilding interactive dashboards with multiple charts",
  "title": "Apache ECharts in Astro"
}