How to use
A powerful, interactive charting and visualization library for browser.
Documentation for EChartJavascript
<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/jsdirectory 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/themefile.
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.jsfile 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 frompublic/assets/js/theme.jsorpublic/assets/js/echart-example.js. Then place the code bottom of thepublic/assets/js/theme.jsfile 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-echartattribute to the.nav-tabelement. - Then add
data-echart-tabattribute 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>
