There are a few ways you can get the echarts.
Choose the version download you need from the official website download, we provide different packages of downloads according to the developer's function and volume requirements, if you do not have the volume requirements, you can download the full version directly. The development environment recommends downloading the source code version, which contains common error hints and warnings.
Download the latest version from GitHub on Echarts release , and dist find the latest version of the Echarts library in the extracted folders directory.
Get Echarts via NPM, npm install echarts --save see "Using Echarts in Webpack"
With the introduction of CDN, you can find the latest version of Echarts in Cdnjs,npmcdn or on the BOOTCDN in China.
Echarts 3 began to no longer force the use of AMD to be introduced on demand, the code is no longer built-in AMD loader. So the introduction is a lot simpler, just like a normal JavaScript library with a script tag.
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <!--Introducing Echarts Files - <Scriptsrc= "Echarts.min.js"></Script></Head></HTML>Draw a simple chart
Before drawing we need to prepare a DOM container with a high width for the echarts.
< Body > <!-- - < id = "main" style = "width : 600px;height:400px; " ></ Div > </ Body >
You can then initialize a Echarts instance with the Echarts.init method and generate a simple histogram with the SetOption method, which is the complete code.
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Echarts</title> <!--introduction of Echarts.js - <Scriptsrc= "Echarts.min.js"></Script></Head><Body> <!--prepare a DOM with size (wide height) for echarts - <DivID= "Main"style= "width:600px;height:400px;"></Div> <Scripttype= "Text/javascript"> //Initializes a Echarts instance based on the prepared Dom varMyChart=Echarts.init (document.getElementById ('Main')); //Specify the configuration items and data for the chart varoption={title: {text:'Echarts Getting Started example'}, tooltip: {}, Legend: {data:['Sales']}, Xaxis: {data: ["Shirts","Sweater","Chiffon Sweater","Trousers","High Heels","Socks"]}, YAxis: {}, Series: [{name:'Sales', type:'Bar', data: [5, -, $, Ten, Ten, -] }] }; //displays the chart using the configuration item and data you just specified. mychart.setoption (option); </Script></Body></HTML>
So your first chart is born!
5 minutes to get started Echarts
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
