How to use
A powerful, interactive charting and visualization library for browser.
Documentation for EChartJavaScript
<pre><code class="language-html"><script src="vendors/echarts/echarts.min.js"></script></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"> <div class="echart-total-sales-chart" data-echart-responsive="true"></div></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"> <div class="echart-total-sales-chart" data-echart-responsive="true"></div></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" data-echart-responsive="true"></div> - Give a height of the chart element in CSS
- Add a JavaScript file into
src/jsdirectory 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].jsetc.
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" data-echart-responsive="true"></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].jsetc.
Tips: Select the chart you want to duplicate and copy the chart's code from the corresponding javascript file orpublic/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,orpublic/assets/js/[your-custom-page].jsfile 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>data-echart-responsive="true" </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 data-echart-responsive="true" 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-echartattribute to the.nav-tabelement. - Then add
data-echart-tabattribute 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" data-echart-responsive="true" 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" data-echart-responsive="true" style="height: 300px" data-echart-tab="data-echart-tab"></div>
</div>
</div>