Echarts

There are few options on how to include/import Echarts into your project.

Install from yarn

Install the Echarts Js library from command prompt from the root directory of the project:

yarn install echarts --save

Import Echart link from the libs.

<script src="assets/libs/echarts/echarts.min.js"></script>

Import the helper function to manage the charts colors based on mode changes. It will take updated values from the root variables.

<script src="assets/js/charts/echart-config.init.js"><script/>

Below the example how to use the package and make it working ApexTree on any page.

HTML

    

        
Basic Line Chart
    
    

        

    

JavaScript

// Basic Line Chart
var basicLineChartOption = {
    grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        top: '4%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
    yAxis: {
        type: 'value',
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }],
    color: ['--bs-primary']
};
allCharts.push([{ 'id': 'basicLineChart', 'data': basicLineChartOption }]);