Hi folks,
I am attempting to use the echarts esm distribution with importmaps. I have
followed along with the basic bar chart quick start.
My page renders with no errors. Hovering on the canvas shows metadata but the
chart itself does not draw.
Code below, what am I getting wrong?
```
<html>
<head>
<title>ECharts</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script type="importmap">
{
"imports": {
"echarts": "https://cdn.jsdelivr.net/npm/echarts@5.5.1/+esm";
}
}
</script>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
</body>
<script type="module">
import * as echarts from 'echarts';
// Initialize the echarts instance based on the prepared dom
const chartDiv = document.getElementById('chart');
console.log(chartDiv.style.width, chartDiv.style.height);
var myChart = echarts.init(chartDiv);
// Specify the configuration items and data for the chart
var option = {
title: {
text: 'ECharts Getting Started Example'
},
tooltip: {},
legend: {
data: ['sales']
},
xAxis: {
data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']
},
yAxis: {},
series: [
{
name: 'sales',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}
]
};
// Display the chart using the configuration items and data just specified.
myChart.setOption(option);
</script>
</html>
```
