1. Get Echarts
Official website Download: http://echarts.baidu.com/download.html
2. Introducing the Echarts file in the HTML page
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>Echarts Practice</title> <Scripttype= "Text/javascript"src= "Js/echarts.min.js" ></Script>//Here is a JS file that introduces Echarts </Head> <Body> </Body></HTML>
directory structure of the file:
3. Draw a simple chart
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title>Echarts Practice</title> <Scripttype= "Text/javascript"src= "Js/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>
4. Display
Echarts Learning (1)--drawing of simple charts