How to use

A powerful, interactive charting and visualization library for browser.

Documentation for EChart

JavaScript

<pre><code class="language-html">&lt;script src=&quot;vendors/echarts/echarts.min.js&quot;&gt;&lt;/script&gt;</code></pre>
<script src="vendors/echarts/echarts.min.js"></script>

Getting Started

<h5 class="mb-3">For gulp based workflow:</h5>
<p>To add a new chart using Echarts, follow the steps below: </p>
<ul>
  <li>Add an HTML element with a unique class name. For example:
    <pre><code class="language-html"> &lt;div class=&quot;echart-total-sales-chart&quot;&gt;&lt;/div&gt;</code></pre>
  </li>
  <li>Give a height of the chart element in CSS</li>
  <li>Add a JavaScript file into <code>src/js </code>directory and write a function to initialize the Echart with the required options.<br /><strong>Tips: </strong>Select any chart of Phoenix which you want to duplicate, copy the file and replace the class name and options.</li>
  <li>import and call the function into the corresponding javascript file of the current page. For example: <code>ecommerce-dashboard.js, </code><code>projectmanagement-dashboard.js, </code><code>[your-custom-page].js </code>etc.</li>
</ul>
<h5 class="mt-5 mb-3">If you're not using gulp: </h5>
<p>If you are not using gulp based workflow and want to add Echart, Follow the steps below:</p>
<ul>
  <li>Add an HTML element with a unique class name. For example:
    <pre><code class="language-html"> &lt;div class=&quot;echart-total-sales-chart&quot;&gt;&lt;/div&gt;</code></pre>
  </li>
  <li>Give a height of the chart element in CSS</li>
  <li>Write a function to initialize the echart with the class name added in the first step and pass the necessary options into the corresponding javascript file of the current page, such as <code>public/assets/js/ecommerce-dashboard.js, </code><code>public/assets/js/projectmanagement-dashboard.js, </code><code>public/assets/js/[your-custom-page].js </code>etc.<br /><strong>Tips: </strong>Select the chart you want to duplicate and copy the chart's code from the corresponding javascript file or <code>public/assets/js/echart-example.js</code>. Then place the code bottom of your selected js file, for example, <code>public/assets/js/ecommerce-dashboard.js, </code><code>public/assets/js/projectmanagement-dashboard.js, </code>or <code>public/assets/js/[your-custom-page].js </code>file and replace the class name and the options.</li>
  <li>Call the function you made in previous step.</li>
</ul>
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-total-sales-chart"></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 Phoenix which you want to duplicate, copy the file and replace the class name and options.
  • import and call the function into the corresponding javascript file of the current page. For example: ecommerce-dashboard.js, projectmanagement-dashboard.js, [your-custom-page].js etc.
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-total-sales-chart"></div>
  • Give a height of the chart element in CSS
  • Write a function to initialize the echart with the class name added in the first step and pass the necessary options into the corresponding javascript file of the current page, such as public/assets/js/ecommerce-dashboard.js, public/assets/js/projectmanagement-dashboard.js, public/assets/js/[your-custom-page].js etc.
    Tips: Select the chart you want to duplicate and copy the chart's code from the corresponding javascript file or public/assets/js/echart-example.js. Then place the code bottom of your selected js file, for example, public/assets/js/ecommerce-dashboard.js, public/assets/js/projectmanagement-dashboard.js, or public/assets/js/[your-custom-page].js file and replace the class name and the options.
  • Call the function you made in previous step.

Responsive

<p class="mb-0">To responsive Echarts just add <code> </code>in your dom element. Phoenix will take the <code>true </code>value and will resize the charts when container size changes.</p>

To responsive Echarts just add in your dom element. Phoenix 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 Phoenix, 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="echart-tab-example 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="tab" data-bs-target="#bar-chart" type="button" role="tab" aria-controls="bar-chart" aria-selected="false">Bar Chart</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="line-charts-tab" data-bs-toggle="tab" 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-projection-actual" style="height: 300px" 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-total-sales-chart" style="height: 300px" data-echart-tab="data-echart-tab"></div>
  </div>
</div>

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.15.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize