snitchbot | Dashboard & Remote Field Sensing

Echarts

A powerful, interactive charting and visualization library for browser

Javascript

<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.