Creare grafici in Javascript con Apache ECharts

Mattepuffo's logo
Creare grafici in Javascript con Apache ECharts

Creare grafici in Javascript con Apache ECharts

Programmazione, Javascript - AJAX

Non sapevo dell'esistenza di questa libreria, che ho testato oggi e che consiglio di provare: Apache ECharts!

Trattasi di una libreria per Javascript per la creazione di grafici.

Molto facile da usare, è anche figa da vedere.

Inoltre ha veramente parecchie opzioni.

Qui sotto un esempio con parecchie opzioni anche grafiche e di rendering:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>TEST</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>

    <style>
      #main, html, body {
        width: 90%;
      }

      #main {
        height: 700px;
      }
    </style>

  </head>

  <body>
    <div id="main"></div>

    <script type="text/javascript">
      const container = document.getElementById('main');
      const myChart = echarts.init(container, null, {
        renderer: 'canvas',
        useDirtyRect: false,
      });

      const option = {
        legend: {
          orient: 'vertical',
          right: 10,
          top: 'center'
        },
        dataset: {
          source: [
            ['Prodotti', '2022', '2023', '2024'],
            ['Macchine', 43.3, 85.8, 93.7],
            ['Moto', 83.1, 73.4, 55.1],
            ['Barche', 86.4, 65.2, 82.5],
            ['Treni', 72.4, 53.9, 39.1]
          ]
        },
        xAxis: {type: 'category'},
        yAxis: {},
        series: [{type: 'bar'}, {type: 'bar'}, {type: 'bar'}],
        aria: {
          enabled: true,
          decal: {
            show: true
          }
        }
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }

      window.addEventListener('resize', myChart.resize);

      myChart.on('click', function(params) {
        alert(params.name);
      });
    </script>
  </body>

</html>

Con queste impostazioni è anche responsive.

Dategli un'occhiata!

Enjoy!

Condividi

Commentami!