| __NUXT_JSONP__("/zh/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){return {data:[{article:{slug:"get-started",toc:[{id:y,depth:r,text:z},{id:A,depth:r,text:B},{id:h,depth:r,text:h}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:C},children:[{type:b,tag:d,props:{href:"#%E5%BF%AB%E9%80%9F%E4%B8%8A%E6%89%8B",ariaHidden:i,tabIndex:j},children:[{type:b,tag:k,props:{className:[l,m]},children:[]}]},{type:a,value:C}]},{type:a,value:c},{type:b,tag:s,props:{id:y},children:[{type:b,tag:d,props:{href:"#%E8%8E%B7%E5%8F%96-apache-echarts",ariaHidden:i,tabIndex:j},children:[{type:b,tag:k,props:{className:[l,m]},children:[]}]},{type:a,value:z}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"Apache ECharts 支持多种下载方式，可以在下一篇教程"},{type:b,tag:d,props:{href:D},children:[{type:a,value:E}]},{type:a,value:"中查看所有方式。这里，我们以从 "},{type:b,tag:d,props:{href:t,rel:[n,o,p],target:q},children:[{type:a,value:"jsDelivr"}]},{type:a,value:" CDN 上获取为例，介绍如何快速安装。"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"在 "},{type:b,tag:d,props:{href:t,rel:[n,o,p],target:q},children:[{type:a,value:t}]},{type:a,value:" 选择 "},{type:b,tag:f,props:{},children:[{type:a,value:"dist\u002Fecharts.js"}]},{type:a,value:"，点击并保存为 "},{type:b,tag:f,props:{},children:[{type:a,value:F}]},{type:a,value:" 文件。"}]},{type:a,value:c},{type:b,tag:"blockquote",props:{},children:[{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"关于这些文件的介绍，可以在下一篇教程"},{type:b,tag:d,props:{href:D},children:[{type:a,value:E}]},{type:a,value:"中了解更多信息。"}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:s,props:{id:A},children:[{type:b,tag:d,props:{href:"#%E5%BC%95%E5%85%A5-apache-echarts",ariaHidden:i,tabIndex:j},children:[{type:b,tag:k,props:{className:[l,m]},children:[]}]},{type:a,value:B}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"在刚才保存 "},{type:b,tag:f,props:{},children:[{type:a,value:F}]},{type:a,value:" 的目录新建一个 "},{type:b,tag:f,props:{},children:[{type:a,value:G}]},{type:a,value:" 文件，内容如下："}]},{type:a,value:c},{type:b,tag:u,props:{className:[v]},children:[{type:b,tag:w,props:{lang:x,"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!-- 引入刚刚下载的 ECharts 文件 --\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:"打开这个 "},{type:b,tag:f,props:{},children:[{type:a,value:G}]},{type:a,value:"，你会看到一片空白。但是不要担心，打开控制台确认没有报错信息，就可以进行下一步。"}]},{type:a,value:c},{type:b,tag:s,props:{id:h},children:[{type:b,tag:d,props:{href:"#%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9B%BE%E8%A1%A8",ariaHidden:i,tabIndex:j},children:[{type:b,tag:k,props:{className:[l,m]},children:[]}]},{type:a,value:h}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"在绘图前我们需要为 ECharts 准备一个定义了高宽的 DOM 容器。在刚才的例子 "},{type:b,tag:f,props:{},children:[{type:a,value:"\u003C\u002Fhead\u003E"}]},{type:a,value:" 之后，添加："}]},{type:a,value:c},{type:b,tag:u,props:{className:[v]},children:[{type:b,tag:w,props:{lang:x,"line-highlights":g,"file-name":g},children:[{type:a,value:"\u003Cbody\u003E\n \u003C!-- 为 ECharts 准备一个定义了宽高的 DOM --\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:"然后就可以通过 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002F\u002Fapi.html#echarts.init",rel:[n,o,p],target:q},children:[{type:a,value:"echarts.init"}]},{type:a,value:" 方法初始化一个 echarts 实例并通过 "},{type:b,tag:d,props:{href:"https:\u002F\u002Fecharts.apache.org\u002F\u002Fapi.html#echartsInstance.setOption",rel:[n,o,p],target:q},children:[{type:a,value:"setOption"}]},{type:a,value:" 方法生成一个简单的柱状图，下面是完整代码。"}]},{type:a,value:c},{type:b,tag:u,props:{className:[v]},children:[{type:b,tag:w,props:{lang:x,"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!-- 引入刚刚下载的 ECharts 文件 --\u003E\n \u003Cscript src=\"echarts.min.js\"\u003E\u003C\u002Fscript\u003E\n \u003C\u002Fhead\u003E\n \u003Cbody\u003E\n \u003C!-- 为 ECharts 准备一个定义了宽高的 DOM --\u003E\n \u003Cdiv id=\"main\" style=\"width: 600px;height:400px;\"\u003E\u003C\u002Fdiv\u003E\n \u003Cscript type=\"text\u002Fjavascript\"\u003E\n \u002F\u002F 基于准备好的dom，初始化echarts实例\n var myChart = echarts.init(document.getElementById('main'));\n\n \u002F\u002F 指定图表的配置项和数据\n var option = {\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\n legend: {\n data: ['销量']\n },\n xAxis: {\n data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']\n },\n yAxis: {},\n series: [\n {\n name: '销量',\n type: 'bar',\n data: [5, 20, 36, 10, 10, 20]\n }\n ]\n };\n\n \u002F\u002F 使用刚指定的配置项和数据显示图表。\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:"这样你的第一个图表就诞生了！"}]},{type:a,value:c},{type:b,tag:"md-example",props:{src:"doc-example\u002Fgetting-started"},children:[{type:a,value:c}]}]},dir:"\u002Fzh",path:"\u002Fzh\u002Fget-started",extension:".md",createdAt:H,updatedAt:H},postPath:"zh\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","获取-apache-echarts","获取 Apache ECharts","引入-apache-echarts","引入 Apache ECharts","快速上手","zh\u002Fbasics\u002Fdownload","安装","echarts.js","index.html","2021-08-02T05:33:02.867Z"))); |