templates/echart/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  5.                             <!-- PAGE-HEADER -->
  6.                             <div class="page-header">
  7.                                 <div>
  8.                                     <h1 class="page-title">Eharts</h1>
  9.                                 </div>
  10.                                 <div class="ms-auto pageheader-btn">
  11.                                     <ol class="breadcrumb">
  12.                                         <li class="breadcrumb-item"><a href="javascript:void(0);">Charts</a></li>
  13.                                         <li class="breadcrumb-item active" aria-current="page">ECharts</li>
  14.                                     </ol>
  15.                                 </div>
  16.                             </div>
  17.                             <!-- PAGE-HEADER END -->
  19.                             <!-- ROW-1 OPEN -->
  20.                             <div class="row">
  21.                                 <div class="col-lg-6 col-md-12">
  22.                                     <div class="card">
  23.                                         <div class="card-header border-bottom">
  24.                                             <h3 class="card-title">Line chart</h3>
  25.                                         </div>
  26.                                         <div class="card-body">
  27.                                             <div id="echart1" class="chartsh"></div>
  28.                                         </div>
  29.                                     </div>
  30.                                 </div>
  31.                                 <div class="col-lg-6 col-md-12">
  32.                                     <div class="card">
  33.                                         <div class="card-header border-bottom">
  34.                                             <h3 class="card-title">Combination of Line & Bar Chart</h3>
  35.                                         </div>
  36.                                         <div class="card-body">
  37.                                             <div id="echart2" class="chartsh"></div>
  38.                                         </div>
  39.                                     </div>
  40.                                 </div>
  41.                             </div>
  42.                             <!-- ROW-1 CLOSED -->
  44.                             <!-- ROW-2 OPEN -->
  45.                             <div class="row">
  46.                                 <div class="col-lg-6 col-md-12">
  47.                                     <div class="card">
  48.                                         <div class="card-header border-bottom">
  49.                                             <h3 class="card-title">Vertical Line chart</h3>
  50.                                         </div>
  51.                                         <div class="card-body">
  52.                                             <div id="echart3" class="chartsh"></div>
  53.                                         </div>
  54.                                     </div>
  55.                                 </div>
  56.                                 <div class="col-lg-6 col-md-12">
  57.                                     <div class="card">
  58.                                         <div class="card-header border-bottom">
  59.                                             <h3 class="card-title">Vertical Combination of Line & Bar Chart</h3>
  60.                                         </div>
  61.                                         <div class="card-body">
  62.                                             <div id="echart4" class="chartsh"></div>
  63.                                         </div>
  64.                                     </div>
  65.                                 </div>
  66.                             </div>
  67.                             <!-- ROW-2 CLOSE -->
  69.                             <!-- ROW-3 OPEN -->
  70.                             <div class="row">
  71.                                 <div class="col-lg-6 col-md-12">
  72.                                     <div class="card">
  73.                                         <div class="card-header border-bottom">
  74.                                             <h3 class="card-title">Bar Chart</h3>
  75.                                         </div>
  76.                                         <div class="card-body">
  77.                                             <div id="echart5" class="chartsh"></div>
  78.                                         </div>
  79.                                     </div>
  80.                                 </div>
  81.                                 <div class="col-lg-6 col-md-12">
  82.                                     <div class="card">
  83.                                         <div class="card-header border-bottom">
  84.                                             <h3 class="card-title">Horizontal Bar Chart</h3>
  85.                                         </div>
  86.                                         <div class="card-body">
  87.                                             <div id="echart6" class="chartsh"></div>
  88.                                         </div>
  89.                                     </div>
  90.                                 </div>
  91.                             </div>
  92.                             <!-- ROW-3 CLOSE -->
  94.                             <!-- ROW-4 OPEN -->
  95.                             <div class="row">
  96.                                 <div class="col-lg-6 col-md-12">
  97.                                     <div class="card">
  98.                                         <div class="card-header border-bottom">
  99.                                             <h3 class="card-title">Single line chart</h3>
  100.                                         </div>
  101.                                         <div class="card-body">
  102.                                             <div id="echart7" class="chartsh"></div>
  103.                                         </div>
  104.                                     </div>
  105.                                 </div>
  106.                                 <div class="col-lg-6 col-md-12">
  107.                                     <div class="card">
  108.                                         <div class="card-header border-bottom">
  109.                                             <h3 class="card-title">Pie chart</h3>
  110.                                         </div>
  111.                                         <div class="card-body">
  112.                                             <div id="echart8" class="chartsh"></div>
  113.                                         </div>
  114.                                     </div>
  115.                                 </div>
  116.                                 <div class="col-lg-6 col-md-12">
  117.                                     <div class="card">
  118.                                         <div class="card-header border-bottom">
  119.                                             <h3 class="card-title">Donut chart</h3>
  120.                                         </div>
  121.                                         <div class="card-body">
  122.                                             <div id="echart11" class="chartsh"></div>
  123.                                         </div>
  124.                                     </div>
  125.                                 </div>
  126.                                 <div class="col-lg-6 col-md-12">
  127.                                     <div class="card">
  128.                                         <div class="card-header border-bottom">
  129.                                             <h3 class="card-title">Bar Chart Race</h3>
  130.                                         </div>
  131.                                         <div class="card-body">
  132.                                             <div id="echart9" class="chartsh"></div>
  133.                                         </div>
  134.                                     </div>
  135.                                 </div>
  136.                                 <div class="col-lg-6 col-md-12">
  137.                                     <div class="card">
  138.                                         <div class="card-header border-bottom">
  139.                                             <h3 class="card-title">Bar Animation</h3>
  140.                                         </div>
  141.                                         <div class="card-body">
  142.                                             <div id="echart10" class="chartsh"></div>
  143.                                             <p class="text-muted mb-0 text-12">Note: Reload page to see animation</p>
  144.                                         </div>
  145.                                     </div>
  146.                                 </div>
  147.                             </div>
  148.                             <!-- ROW-4 CLOSED -->
  149. {% endblock %}
  151. {% block javascripts %}
  152.    {{parent()}} 
  153.         <!-- ECHART JS -->
  154.         <script src="{{absolute_url(asset('build/plugins/echarts/echarts.js'))}}"></script>
  155.          {{ encore_entry_script_tags('js/echarts') }}
  156. {% endblock %}