| __NUXT_JSONP__("/zh/basics/import", (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){return {data:[{article:{slug:"import",toc:[{id:r,depth:m,text:s},{id:t,depth:m,text:u},{id:v,depth:m,text:w},{id:x,depth:m,text:y}],body:{type:"root",children:[{type:b,tag:"h1",props:{id:"在项目中引入-apache-echarts"},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts",tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:"在项目中引入 Apache ECharts"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"假如你的开发环境使用了"},{type:b,tag:f,props:{},children:[{type:a,value:"npm"}]},{type:a,value:z},{type:b,tag:f,props:{},children:[{type:a,value:"yarn"}]},{type:a,value:"等包管理工具，并且使用 Webpack 等打包工具进行构建，本文将会介绍如何引入 Apache ECharts"},{type:b,tag:"sup",props:{},children:[{type:a,value:"TM"}]},{type:a,value:" 并通过 treeshaking 特性只打包需要的模块。"}]},{type:a,value:c},{type:b,tag:n,props:{id:r},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#npm-%E5%AE%89%E8%A3%85-echarts",tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:s}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"你可以使用如下命令通过 npm 安装 ECharts"}]},{type:a,value:c},{type:b,tag:o,props:{className:[p]},children:[{type:b,tag:q,props:{lang:"shell","line-highlights":d,"file-name":d},children:[{type:a,value:"npm install echarts --save\n"}]}]},{type:a,value:c},{type:b,tag:n,props:{id:t},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#%E5%BC%95%E5%85%A5-echarts",tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:u}]},{type:a,value:c},{type:b,tag:o,props:{className:[p]},children:[{type:b,tag:q,props:{lang:A,"line-highlights":d,"file-name":d},children:[{type:a,value:"import * as echarts from 'echarts';\n\n\u002F\u002F 基于准备好的dom，初始化echarts实例\nvar myChart = echarts.init(document.getElementById('main'));\n\u002F\u002F 绘制图表\nmyChart.setOption({\n title: {\n text: 'ECharts 入门示例'\n },\n tooltip: {},\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"}]}]},{type:a,value:c},{type:b,tag:n,props:{id:v},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6",tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:w}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"上面的代码会引入所有 ECharts 中所有的图表和组件，但是假如你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。"}]},{type:a,value:c},{type:b,tag:o,props:{className:[p]},children:[{type:b,tag:q,props:{lang:A,"line-highlights":d,"file-name":d},children:[{type:a,value:"\u002F\u002F 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。\nimport * as echarts from 'echarts\u002Fcore';\n\u002F\u002F 引入柱状图图表，图表后缀都为 Chart\nimport { BarChart } from 'echarts\u002Fcharts';\n\u002F\u002F 引入提示框，标题，直角坐标系组件，组件后缀都为 Component\nimport {\n TitleComponent,\n TooltipComponent,\n GridComponent\n} from 'echarts\u002Fcomponents';\n\u002F\u002F 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步\nimport { CanvasRenderer } from 'echarts\u002Frenderers';\n\n\u002F\u002F 注册必须的组件\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\n\u002F\u002F 接下来的使用就跟之前一样，初始化图表，设置配置项\nvar myChart = echarts.init(document.getElementById('main'));\nmyChart.setOption({\n \u002F\u002F ...\n});\n"}]}]},{type:a,value:c},{type:b,tag:"blockquote",props:{},children:[{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"需要注意的是注意为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入"},{type:b,tag:f,props:{},children:[{type:a,value:B}]},{type:a,value:z},{type:b,tag:f,props:{},children:[{type:a,value:"SVGRenderer"}]},{type:a,value:"作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的"},{type:b,tag:f,props:{},children:[{type:a,value:B}]},{type:a,value:"模块。"}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。"}]},{type:a,value:c},{type:b,tag:n,props:{id:x},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5",tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:y}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"对于使用了 TypeScript 来开发 ECharts 的开发者，我们提供了类型接口来组合出最小的"},{type:b,tag:f,props:{},children:[{type:a,value:"EChartsOption"}]},{type:a,value:"类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。"}]},{type:a,value:c},{type:b,tag:o,props:{className:[p]},children:[{type:b,tag:q,props:{lang:"ts","line-highlights":d,"file-name":d},children:[{type:a,value:"import * as echarts from 'echarts\u002Fcore';\nimport {\n BarChart,\n \u002F\u002F 系列类型的定义后缀都为 SeriesOption\n BarSeriesOption,\n LineChart,\n LineSeriesOption\n} from 'echarts\u002Fcharts';\nimport {\n TitleComponent,\n \u002F\u002F 组件类型的定义后缀都为 ComponentOption\n TitleComponentOption,\n GridComponent,\n GridComponentOption\n} from 'echarts\u002Fcomponents';\nimport { CanvasRenderer } from 'echarts\u002Frenderers';\n\n\u002F\u002F 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型\ntype ECOption = echarts.ComposeOption\u003C\n | BarSeriesOption\n | LineSeriesOption\n | TitleComponentOption\n | GridComponentOption\n\u003E;\n\n\u002F\u002F 注册必须的组件\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\nvar option: ECOption = {\n \u002F\u002F ...\n};\n"}]}]}]},dir:"\u002Fzh\u002Fbasics",path:"\u002Fzh\u002Fbasics\u002Fimport",extension:".md",createdAt:C,updatedAt:C},postPath:"zh\u002Fbasics\u002Fimport"}],fetch:{},mutations:[]}}("text","element","\n","","p","code","a","true",-1,"span","icon","icon-link",2,"h2","div","nuxt-content-highlight","md-code-block","npm-安装-echarts","NPM 安装 ECharts","引入-echarts","引入 ECharts","按需引入-echarts-图表和组件","按需引入 ECharts 图表和组件","在-typescript-中按需引入","在 TypeScript 中按需引入","或者","js","CanvasRenderer","2021-08-02T05:33:02.867Z"))); |