<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>{{ title }}</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@2.0.9/dist/echarts-gl.min.js"></script>
<style> .container { display: flex; justify-content: center; align-items: center; } .item { margin: auto; } </style>
</head>
<body>
<div class="container">
<div class="item" id="{{ chart_id }}" style="width: {{ width }}px; height: {{ height }}px"></div>
</div>
<script type="text/javascript">
{{#if theme_source}}{{{ theme_source }}}{{/if}}
var chart = echarts.init(document.getElementById('{{ chart_id }}'){{#if theme}}, '{{ theme }}'{{/if}});
var option = {{{ chart_option }}};
chart.setOption(option);
</script>
</body>
</html>