Echarts

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

Install from NPM

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

npm install echarts --save

Add the echart js file link.

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

Initialize the chart and apply theme colors dynamically.

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

HTML

<div id="BasicLineChart" class="h-320px"></div>

JavaScript:

var basicChartDom = document.getElementById('BasicLineChart');
var basicChart = echarts.init(basicChartDom);
var basicOption = {
  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'
    }
  ],
  grid: {
    top: '5%',
    left: '4%',
    right: '0%',
    bottom: '8%',
  }
};
basicChart.setOption(basicOption);
window.addEventListener('resize', function () {
  basicChart.resize();
});

Include Chart.js:

<script src="assets/js/chart/echart.init.js"></script>