echart example

by sberube

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>ECharts Example</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js"></script>
    <style>
      #chart {
        height: 600px;
      }

    </style>
  </head>

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

    <script>
      // Controller code
      document.addEventListener('DOMContentLoaded', function() {
        var myChart = echarts.init(document.getElementById('chart'));

        var options = {
          legend: {
            data: ['AWS', 'AZURE', 'GCP', 'FORECAST'],
            align: 'left',
          },
          grid: {
            left: 100,
            right: 20,
            bottom: 20,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          xAxis: {
            type: 'time',
            axisLabel: {
              formatter: function(value) {
                return formatDate(value);
              },
            },
          },
          yAxis: {
            type: 'value',
            axisLabel: {
              formatter: '{value} USD',
            },
          },
          series: [{
              name: 'AWS',
              type: 'bar',
              stack: 'stack',
              data: [
                [1669852800000, 142],
                [1672531200000, 4011793.1567359352],
                [1675209600000, 3795369.4244225803],
                [1677628800000, 3641409.353038637],
                [1680307200000, 2109194.427582302],
                [1682899200000, 3629313.0858051293],
                [1685577600000, 1653702.6804957706],
              ],
            },
            {
              name: 'AZURE',
              type: 'bar',
              stack: 'stack',
              data: [
                [1669852800000, 0],
                [1672531200000, 197891.18137080508],
                [1675209600000, 200873.06417651437],
                [1677628800000,...