<script src="vendors/echarts/echarts.min.js"></script>

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.

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.