Flame Graph in Vue

<template>
  <div>
    <div id="chart">
      <apexchart
        type="icicle"
        height="320"
        :options="chartOptions"
        :series="series"
      ></apexchart>
    </div>
  </div>
</template>

<script>
import VueApexCharts from 'vue-apexcharts'

import 'apexcharts/icicle'

export default {
  components: {
    apexchart: VueApexCharts,
  },
  data: function () {
    return {
      series: [
        {
          data: [
            {
              x: 'main',
              children: [
                {
                  x: 'http.serve',
                  children: [
                    { x: 'router.match', y: 120 },
                    {
                      x: 'handler.report',
                      children: [
                        {
                          x: 'db.query',
                          children: [
                            { x: 'net.read', y: 640 },
                            { x: 'row.scan', y: 310 },
                          ],
                        },
                        {
                          x: 'json.encode',
                          children: [
                            { x: 'reflect.walk', y: 280 },
                            { x: 'buf.grow', y: 90 },
                          ],
                        },
                      ],
                    },
                    {
                      x: 'handler.upload',
                      children: [
                        { x: 'io.copy', y: 420 },
                        { x: 'hash.sum', y: 180 },
                      ],
                    },
                  ],
                },
                {
                  x: 'runtime.gc',
                  children: [
                    { x: 'mark', y: 520 },
                    { x: 'sweep', y: 140 },
                  ],
                },
                { x: 'sched.idle', y: 1080 },
              ],
            },
          ],
        },
      ],
      chartOptions: {
        chart: {
          type: 'icicle',
          height: 320,
        },
        // Warm hues, the flame-graph convention: the colour carries no meaning, it is
        // there to separate neighbouring branches of the call tree.
        colors: ['#EF4444', '#F97316', '#F59E0B', '#EAB308'],
        legend: {
          show: false,
        },
        title: {
          text: 'CPU profile: 4,100 samples',
          align: 'left',
        },
        subtitle: {
          text: 'Width is share of samples, height is stack depth. Click a frame to zoom.',
          align: 'left',
        },
        plotOptions: {
          icicle: {
            // Root at the bottom, stacks growing upward.
            direction: 'up',
            // Alphabetical siblings hold a frame in the same place across profiles, so
            // two runs of the same program can be compared by eye. Ordering by size
            // would move every frame and lose exactly that.
            sort: 'name',
            spacing: 1,
            dataLabels: {
              // Left, not the centred default: a profiler reader scans the left edge
              // of the stack, where a frame lines up with the one that called it.
              align: 'left',
              minSizeToShow: 44,
              style: {
                fontSize: '11px',
              },
            },
          },
        },
        stroke: {
          width: 1,
          colors: ['#fff'],
        },
      },
    }
  },
}
</script>

<style>
#chart {
  max-width: 820px;
  margin: 35px auto;
}
</style>