First you need to import the Echatrs.js file
<script src= "Dist/echarts.js" ></script>
Path configuration
require.config ({ paths:file name under {// Current file (with Echarts.js file) } });
Use
require ([//must be a echarts' Echarts ', //The bar.js module under the chart under the current file' Echarts/chart/bar '//load Histogram bar module on echarts basis, load on demand ],function(EC) {//Initialize the Echarts chart based on the prepared Dom varMyChart = Ec.init (document.getElementById (' main '), ' macarons '); varoption ={loaded content ...};;//loading data for Echarts objectsmychart.setoption (option); });
The detailed code is as follows:
<! DOCTYPE html>//Path Configurationrequire.config ({paths: {//file name under current file (echarts.js file is placed)Echarts: ' Echarts ' } }); //Userequire ([' Echarts/echarts ',//The bar.js module under the chart under the current file' Echarts/chart/bar '//load bar module with bar chart, load on Demand ], function(EC) {//Initialize the Echarts chart based on the prepared Dom varMyChart = Ec.init (document.getElementById (' main '), ' macarons '); varoption = {//bubble balloon, often used to show more detailed datatooltip: {show:true },//legends, expressing data and graphics associationslegend: {data:[' Sales ', ' precipitation ']}, calculable:true,//Auxiliary tool box, auxiliary function, such as add marking, box selection, zoom, etc.Toolbox: {show:true, Feature: {mark: {show:true}, DataView: {show:true, ReadOnly:false}, restore: {show:true}, Saveasimage: {show:true} } },//the horizontal axis in a Cartesian coordinate system, usually with the default typeXaxis: [{type:' Category ', data: ["Shirts", "sweaters", "chiffon shirts", "trousers", "high Heels", "socks"] } ],//a vertical axis in a Cartesian coordinate system, usually with a numeric type of defaultYAxis: [{type:' Value ' } ],//Series (Right angle system)series: [{"Name": "Sales", ' type ': ' Bar ', "Data": [5, 20, 40, 10, 10, 20] } ] }; //loading data for Echarts objectsmychart.setoption (option); } );</script></body>
Basic usage of Echarts