Decided to use echarts.js for a specific page in my site. Tried to download the package file on my server and then I tried to include it using a script tag. However, when I open the page I get a thousand different errors for it and not an exact cause for my error.
How can I include an external javascript file in my HTML and make it available or even run on load?
Option 1:
You can add js using layout as below:
By utilizing default_head_blocks.xml in app/design/frontend/Vendor/Theme/Magento_Theme/layout/
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<!-- Add local resources -->
<css src="css/my-styles.css"/>
<!-- The following two ways to add local JavaScript files are equal -->
<script src="Magento_Catalog::js/sample1.js"/>
<link src="js/sample.js"/>
<!-- Add external resources -->
<css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" src_type="url" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" src_type="url" />
<link src="http://fonts.googleapis.com/css?family=Montserrat" src_type="url" />
</head>
</page>
Option 2:
by utilizing requirejs-config.js in your themes or custom module
var config = {
map: {
'*': {
echarts : 'Magento_Theme/js/echarts.js'
}
}
};
You can include in phtml by utilizing below code
require([ 'jquery' , 'echarts'],function($){
$(document).ready(function($){
//custom js code goes here
});
});
