helloWorld.js

import { LightningElement } from "lwc";
import { loadScript } from 'lightning/platformResourceLoader';
import ECHARTS from "@salesforce/resourceUrl/echarts";

export default class helloWorld extends LightningElement {
  initializeEcharts = false; //Variable to load check if echarts is initialize
  //renderedCallback Use it to perform logic after a component has finished the rendering phase
  renderedCallback() {
    if (this.initializeEcharts) {
      return;
    }

    this.initializeEcharts = true;
    //loadscript loads our echartjs which we add in our resource folder-
    //and return a promise when loaded, once the script is loaded we initialize our echart variable to true
    //and runEcharts function which will load our echarts to the frontend
    Promise.all([loadScript(this, ECHARTS)]).then(() => {
      this.runEcharts();
    });
  }
  runEcharts() {
    var myChart = echarts.init(this.template.querySelector('div.main')); //to select the div to embed the chart

    // specify chart configuration item and data
    var option = {
        color: ['#3398DB'],
        xAxis: {
            type: 'category',
            data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul']
        },
        yAxis: {
            type: 'value',
        },
        grid: {
            top: 10
        },
        series: [{
            data: [30, 40, 70, 30, 45, 50, 30],
            type: 'bar',
            lineStyle: {
                color: '#0380ff'
            }
        }]
    };


    // use configuration item and data specified to show chart
    myChart.setOption(option);
}
}