Echarts

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

Install from NPM

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

yarn add echarts

How to Import Echarts package?

import * as echarts from 'echarts';

Check the below example how to use and make it working Echarts on any page.

HTML

<div id="basicBarChart" class="h-80" dir="ltr"></div>

JavaScript

import * as echarts from 'echarts';

//basic bar
var option;
option = {
    series: [
        {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
        }
    ],
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
            color: "--dx-secondary-color"
        }
    },
    legend: {
        textStyle: {
            color: "--dx-body-color"
        }
    },
    yAxis: {
        type: 'value',
        splitLine: {
            lineStyle: {
                color: ["--dx-border-color"]
            }
        },
        axisLabel: {
            color: "--dx-secondary-color"
        }
    },
    axisLine: {
        lineStyle: {
            color: ["--dx-border-color"]
        }
    },
    color: "--dx-primary",
    grid: {
        top: '5%',
        left: '6%',
        right: '0%',
        bottom: '8%',
    }
};

allCharts.push([{ 'id': 'basicBarChart', 'data': option }]);