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>All the charts of Echart’s are responsive by default in Phoenix. Echart’s responsive is working from echartSetOption function in <code>src/js/theme/charts/echarts/echarts-utils.js</code> file (If you are not using gulp based workflow, you can find the function in <code>public/assets/js/phoenix.js</code>). You can pass responsive options object as 4th parameter of <code>echartSetOption</code> function. The object will consist the styles of different breakpoints like xs, sm, md, lg, xl, xxl. For example: Here the options will work above the sm(576px) screen.</p><pre class="scrollbar mb-5"><code class="lang-html">const responsiveOptions = {
  sm: {
    yAxis: {
      show: true
    },
    grid: {
      left: 100
    }
  }
};</code></pre><!-- Find the JS file for the following chart at: src/js/theme/charts/echarts/crm-lead-conversion.js-->
<!-- If you are not using gulp based workflow, you can find the transpiled code at: public/assets/js/crm-dashboard.js-->
<div class="echart-lead-conversion" style="min-height: 250px;"></div>

All the charts of Echart’s are responsive by default in Phoenix. Echart’s responsive is working from echartSetOption function in src/js/theme/charts/echarts/echarts-utils.js file (If you are not using gulp based workflow, you can find the function in public/assets/js/phoenix.js). You can pass responsive options object as 4th parameter of echartSetOption function. The object will consist the styles of different breakpoints like xs, sm, md, lg, xl, xxl. For example: Here the options will work above the sm(576px) screen.

const responsiveOptions = {
  sm: {
    yAxis: {
      show: true
    },
    grid: {
      left: 100
    }
  }
};

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

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