Before the development of the Echarts chart to the Echarts official website to download Echarts library files, I downloaded the echarts-2.2.7. Then put the library file in the project file Web directory. The following steps are shown for the first chart:
1. Create a new echarts.html file. Prepare a DOM with a size (wide height) for the echarts.
<!DOCTYPE HTML><Head> <MetaCharSet= "Utf-8"> <title>Echarts</title></Head><Body> <!--prepare a DOM with size (wide height) for echarts - <DivID= "Main"style= "height:400px"></Div></Body>
2, new <script> tags introduced echarts-all.js, the introduction of chart files.
<!DOCTYPE HTML><Head> <MetaCharSet= "Utf-8"> <title>Echarts</title></Head><Body> <!--prepare a DOM with size (wide height) for echarts - <DivID= "Main"style= "height:400px"></Div> <!--echarts Single File Introduction - <Scriptsrc= "Js/echarts-2.2.7/build/dist/echarts-all.js"></Script></Body>
3. New <script> tag, use global variable echarts to initialize the chart and drive the chart generation.
<!DOCTYPE HTML><Head> <MetaCharSet= "Utf-8"> <title>Echarts</title></Head><Body> <!--prepare a DOM with size (wide height) for echarts - <DivID= "Main"style= "height:400px"></Div> <!--echarts Single File Introduction - <Scriptsrc= "Js/echarts-2.2.7/build/dist/echarts-all.js"></Script> <Scripttype= "Text/javascript"> //Initialize the Echarts chart based on the prepared Dom varMyChart=Echarts.init (document.getElementById ('Main')); varoption={tooltip: {show:true}, Legend: {data:['Sales']}, tooltip:{show:true, Trigger:'Item'}, Xaxis: [{type:'category', data: ["Shirts","Sweater","Chiffon Sweater","Trousers","High Heels","Socks"]}], YAxis: [{type:'value'}], series: [{"name":"Sales", "type":"Bar", "Data":[5, -, +, Ten, Ten, -] } ] }; //loading data for Echarts objectsmychart.setoption (option); </Script></Body>
4, open echarts.html in the browser, you can see the following effects
Echarts is a data-driven chart, and most of the time you care about how to do that option, and the documentation on the official website provides detailed instructions.
Echarts Study Summary (i): Echarts's first chart
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
