Apache ECharts Basic Example

echarts-basic-example-template

by ovillani

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Apache ECharts Basic Example</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="chart-container">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js">
    </script>
  </body>

</html>

CSS

* {
  margin: 0;
  padding: 0;
}

#chart-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

JavaScript

const chart = echarts.init(document.getElementById("chart-container"));

chart.setOption({
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: "bar",
    showBackground: true,
    backgroundStyle: {
      color: "rgba(180, 180, 180, 0.2)"
    }
  }]
});

window.addEventListner('resize', chart.resize);