Echarts
A powerful, interactive charting and visualization library for browser
EChart documentationsJavascript
<script src="assets/lib/echarts/echarts.min.js"></script>
Getting Started
In Falcon echarts.min.js
have been genereted from Echarts Online Builder for faster page reload. The file included:
Chart
- Bar
- Line
- Pie
Coordinate Systems
- Grid
Component
- Title
- Legend
- Tooltip
If you need more charts or components, you can build your own pack from Echarts Online Builder or you can downlaod full package using npm
npm i echarts
Learn How to add a new plugin in Falcon.
Line Chart
<div class="echart-line-total-sales" style="min-height: 300px;" data-echart-responsive="true"></div>
Doughnut Chart
<div class="d-flex justify-content-center">
<div class="echart-doughnut" style="height: 242px; width: 242px;" data-echart-responsive="true"> </div>
</div>
Bar Chart
<div class="echart-bar-top-products" style="height: 300px;" data-echart-responsive="true"></div>
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.