How to use

A powerful, interactive charting and visualization library for browser.

Documentation for EChart
Javascript
<script src="vendors/echarts/echarts.min.js"></script>
Getting Started
For gulp based workflow:

To add a new chart using Echarts, follow the steps below:

  • Add an HTML element with a unique class name. For example:
    <div class="echart-bar-top-products" data-echart-responsive="true"></div>
  • Give a height of the chart element in CSS
  • Add a JavaScript file into src/js directory and write a function to initialize the Echart with the required options.
    Tips: Select any chart of Falcon which you want to duplicate, copy the file and replace the class name and options.
  • Import and call the function into src/js/theme file.
If you're not using gulp:

If you are not using gulp based workflow and want to add Echart, Follow the steps below:

  • Add an HTML element with a unique class name. For example:
    <div class="echart-bar-top-products" data-echart-responsive="true"></div>
  • Give a height of the chart element in CSS
  • Write a function to the public/assets/js/theme.js file to initialize the echart with the class name added in the first step and pass the required options.
    Tips: Select the chart you want to duplicate and copy the code of the chart from public/assets/js/theme.js or public/assets/js/echart-example.js. Then place the code bottom of the public/assets/js/theme.js file and replace the class name and the options.
  • Call the function you made in previous step.
Responsive

To responsive Echarts just add data-echart-responsive="true" in your dom element. Falcon will take the true value and will resize the charts when container size changes.

Echart inside a Tab

To set any echarts inside Bootstrap tab component in Falcon, follow the steps below:

  • Add data-tab-has-echart attribute to the .nav-tab element.
  • Then add data-echart-tab attribute to the Echart element.

By following these steps multiple echart can be added in a tab or multiple tabs with Echarts also be placed.

<ul class="nav nav-tabs mb-3" id="echart-tab-example" role="tablist" data-tab-has-echarts="data-tab-has-echarts">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="bar-chart-tab" data-bs-toggle="pill" data-bs-target="#bar-chart" type="button" role="tab" aria-controls="bar-chart" aria-selected="true">Bar Chart</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="line-charts-tab" data-bs-toggle="pill" data-bs-target="#line-charts" type="button" role="tab" aria-controls="line-charts" aria-selected="false">Line Chart</button>
  </li>
</ul>
<div class="tab-content" id="echart-tab-example-content">
  <div class="tab-pane fade show active" id="bar-chart" role="tabpanel" aria-labelledby="bar-chart-tab">
    <div class="echart-bar-top-products" data-echart-responsive="true" data-echart-tab="data-echart-tab"></div>
  </div>
  <div class="tab-pane fade" id="line-charts" role="tabpanel" aria-labelledby="line-charts-tab">
    <div class="echart-line-total-sales" data-echart-responsive="true" data-echart-tab="data-echart-tab"></div>
  </div>
</div>

Thank you for creating with Falcon |
2021 © Themewagon

v3.2.0

customize