| __NUXT_JSONP__("/en/get-started", (function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J){return {data:[{article:{slug:x,toc:[{id:y,depth:q,text:z},{id:A,depth:q,text:B},{id:C,depth:q,text:D}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:x},children:[{type:b,tag:d,props:{href:"#get-started",ariaHidden:h,tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:"Get Started"}]},{type:a,value:c},{type:b,tag:r,props:{id:y},children:[{type:b,tag:d,props:{href:"#getting-apache-echarts",ariaHidden:h,tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:z}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Apache ECharts supports several download methods, which are further explained in the next tutorial "},{type:b,tag:d,props:{href:E},children:[{type:a,value:F}]},{type:a,value:". Here, we take the example of getting it from the "},{type:b,tag:d,props:{href:s,rel:[m,n,o],target:p},children:[{type:a,value:"jsDelivr"}]},{type:a,value:" CDN and explain how to install it quickly."}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"At "},{type:b,tag:d,props:{href:s,rel:[m,n,o],target:p},children:[{type:a,value:s}]},{type:a,value:" select "},{type:b,tag:f,props:{},children:[{type:a,value:"dist\u002Fecharts.js"}]},{type:a,value:", click and save it as "},{type:b,tag:f,props:{},children:[{type:a,value:G}]},{type:a,value:" file."}]},{type:a,value:c},{type:b,tag:"blockquote",props:{},children:[{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"More information about these files can be found in the next tutorial "},{type:b,tag:d,props:{href:E},children:[{type:a,value:F}]},{type:a,value:"."}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:r,props:{id:A},children:[{type:b,tag:d,props:{href:"#including-echarts",ariaHidden:h,tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:B}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Create a new "},{type:b,tag:f,props:{},children:[{type:a,value:H}]},{type:a,value:" file in the directory where you just saved "},{type:b,tag:f,props:{},children:[{type:a,value:G}]},{type:a,value:", with the following content:"}]},{type:a,value:c},{type:b,tag:t,props:{className:[u]},children:[{type:b,tag:v,props:{lang:w,"line-highlights":g,"file-name":g},children:[{type:a,value:"\u003C!DOCTYPE html\u003E\n\u003Chtml\u003E\n \u003Chead\u003E\n \u003Cmeta charset=\"utf-8\" \u002F\u003E\n \u003C!-- Include the ECharts file you just downloaded --\u003E\n \u003Cscript src=\"echarts.js\"\u003E\u003C\u002Fscript\u003E\n \u003C\u002Fhead\u003E\n\u003C\u002Fhtml\u003E\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"When you open this "},{type:b,tag:f,props:{},children:[{type:a,value:H}]},{type:a,value:", you will see an empty page. But don't worry. Open the console and make sure that no error message is reported, then you can proceed to the next step."}]},{type:a,value:c},{type:b,tag:r,props:{id:C},children:[{type:b,tag:d,props:{href:"#plotting-a-simple-chart",ariaHidden:h,tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:D}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Before drawing we need to prepare a DOM container for ECharts with a defined height and width. After the following code after the "},{type:b,tag:f,props:{},children:[{type:a,value:"\u003C\u002Fhead\u003E"}]},{type:a,value:" tag introduced earlier."}]},{type:a,value:c},{type:b,tag:t,props:{className:[u]},children:[{type:b,tag:v,props:{lang:w,"line-highlights":g,"file-name":g},children:[{type:a,value:"\u003Cbody\u003E\n \u003C! -- Prepare a DOM with a defined width and height for ECharts --\u003E\n \u003Cdiv id=\"main\" style=\"width: 600px;height:400px;\"\u003E\u003C\u002Fdiv\u003E\n\u003C\u002Fbody\u003E\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Then you can initialize an echarts instance with the "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002F\u002Fapi.html#echarts.init",rel:[m,n,o],target:p},children:[{type:a,value:"echarts.init"}]},{type:a,value:" method and set the echarts instance with [setOption]("},{type:b,tag:d,props:{href:I,rel:[m,n,o],target:p},children:[{type:a,value:I}]},{type:a,value:" echartsInstance.setOption) method to generate a simple bar chart。 Here is the complete code."}]},{type:a,value:c},{type:b,tag:t,props:{className:[u]},children:[{type:b,tag:v,props:{lang:w,"line-highlights":g,"file-name":g},children:[{type:a,value:"\u003C!DOCTYPE html\u003E\n\u003Chtml\u003E\n \u003Chead\u003E\n \u003Cmeta charset=\"utf-8\" \u002F\u003E\n \u003Ctitle\u003EECharts\u003C\u002Ftitle\u003E\n \u003C!-- Include the ECharts file you just downloaded --\u003E\n \u003Cscript src=\"echarts.min.js\"\u003E\u003C\u002Fscript\u003E\n \u003C\u002Fhead\u003E\n \u003Cbody\u003E\n \u003C!-- Prepare a DOM with a defined width and height for ECharts --\u003E\n \u003Cdiv id=\"main\" style=\"width: 600px;height:400px;\"\u003E\u003C\u002Fdiv\u003E\n \u003Cscript type=\"text\u002Fjavascript\"\u003E\n \u002F\u002F Initialize the echarts instance based on the prepared dom\n var myChart = echarts.init(document.getElementById('main'));\n\n \u002F\u002F Specify the configuration items and data for the chart\n var option = {\n title: {\n text: 'ECharts Getting Started Example'\n },\n tooltip: {},\n legend: {\n data: ['sales']\n },\n xAxis: {\n data: ['Shirts', 'Cardigans', 'Chiffons', 'Pants', 'Heels', 'Socks']\n },\n yAxis: {},\n series: [\n {\n name: 'sales',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n };\n\n \u002F\u002F Display the chart using the configuration items and data just specified.\n myChart.setOption(option);\n \u003C\u002Fscript\u003E\n \u003C\u002Fbody\u003E\n\u003C\u002Fhtml\u003E\n"}]}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"And this is your first chart with Apache ECharts!"}]},{type:a,value:c},{type:b,tag:"md-example",props:{src:"doc-example\u002Fgetting-started&reset=1&edit=1"},children:[{type:a,value:c}]}]},dir:"\u002Fen",path:"\u002Fen\u002Fget-started",extension:".md",createdAt:J,updatedAt:J},postPath:"en\u002Fget-started"}],fetch:{},mutations:[]}}("text","element","\n","a","p","code","","true",-1,"span","icon","icon-link","nofollow","noopener","noreferrer","_blank",2,"h2","https:\u002F\u002Fwww.jsdelivr.com\u002Fpackage\u002Fnpm\u002Fecharts","div","nuxt-content-highlight","md-code-block","html","get-started","getting-apache-echarts","Getting Apache ECharts","including-echarts","Including ECharts","plotting-a-simple-chart","Plotting a Simple Chart","en\u002Fbasics\u002Fdownload","Installation","echarts.js","index.html","https:\u002F\u002Fecharts.apache.org\u002F\u002Fapi.html#","2021-08-02T05:33:02.867Z"))); |