| __NUXT_JSONP__("/en/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:"use-apache-echarts-with-bundler-and-npm"},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#use-apache-echarts-with-bundler-and-npm",tabIndex:i},children:[{type:b,tag:j,props:{className:[k,l]},children:[]}]},{type:a,value:"Use Apache ECharts with bundler and NPM"}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"If your development environment uses a package management tool like "},{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:" and builds with a packaging tool like Webpack, this article will describe how to get a minimal bundle of Apache ECharts"},{type:b,tag:"sup",props:{},children:[{type:a,value:"TM"}]},{type:a,value:" via treeshaking."}]},{type:a,value:c},{type:b,tag:n,props:{id:r},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#npm-installation-of-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:"You can install ECharts via npm using the following command"}]},{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:"#introduce-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 initialize the echarts instance\nvar myChart = echarts.init(document.getElementById('main'));\n\u002F\u002F Draw the chart\nmyChart.setOption({\n title: {\n text: 'ECharts Getting Started Example'\n },\n tooltip: {},\n xAxis: {\n data: ['shirt', 'cardigan', 'chiffon', '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"}]}]},{type:a,value:c},{type:b,tag:n,props:{id:v},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#importing-required-charts-and-components-to-have-minimal-bundle",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:"The above code will import all the charts and components in ECharts, but if you don't want to bring in all the components, you can use the tree-shakeable interface provided by ECharts to bundle the required components and get a minimal bundle."}]},{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 Import the echarts core module, which provides the necessary interfaces for using echarts.\nimport * as echarts from 'echarts\u002Fcore';\n\u002F\u002F Import bar charts, all with Chart suffix\nimport { BarChart } from 'echarts\u002Fcharts';\n\u002F\u002F import the tooltip, title, and rectangular coordinate system components, all suffixed with Component\nimport {\n TitleComponent,\n TooltipComponent,\n GridComponent\n} from 'echarts\u002Fcomponents';\n\u002F\u002F Import the Canvas renderer, note that introducing the CanvasRenderer or SVGRenderer is a required step\nimport { CanvasRenderer } from 'echarts\u002Frenderers';\n\n\u002F\u002F Register the required components\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\n\u002F\u002F The next step is the same as before, initialize the chart and set the configuration items\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:"Note that in order to keep the size of the package to a minimum, ECharts does not provide any renderer in tree-shakeable interface, so you need to choose to import "},{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:" as the renderer. The advantage of this is that if you only need to use the svg rendering mode, the bundle will not include the "},{type:b,tag:f,props:{},children:[{type:a,value:B}]},{type:a,value:" module, which is not needed."}]},{type:a,value:c}]},{type:a,value:c},{type:b,tag:e,props:{},children:[{type:a,value:"The \"Full Code\" tab on our sample editor page provides a very convenient way to generate a tree-shakable code. It will generate tree-shakable code based on the current option dynamically. You can use it directly in your project."}]},{type:a,value:c},{type:b,tag:n,props:{id:x},children:[{type:b,tag:g,props:{ariaHidden:h,href:"#minimal-option-type-in-typescript",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:"For developers who are using TypeScript to develop ECharts, we provide a type interface to combine the minimal "},{type:b,tag:f,props:{},children:[{type:a,value:"EChartsOption"}]},{type:a,value:" type. This stricter type can effectively help you check for missing components or charts."}]},{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 The series types are defined with the SeriesOption suffix\n BarSeriesOption,\n LineChart,\n LineSeriesOption\n} from 'echarts\u002Fcharts';\nimport {\n TitleComponent,\n \u002F\u002F The component types are defined with the suffix ComponentOption\n TitleComponentOption,\n GridComponent,\n GridComponentOption\n} from 'echarts\u002Fcomponents';\nimport { CanvasRenderer } from 'echarts\u002Frenderers';\n\n\u002F\u002F Combine an Option type with only required components and charts via ComposeOption\ntype ECOption = echarts.ComposeOption\u003C\n | BarSeriesOption\n | LineSeriesOption\n | TitleComponentOption\n | GridComponentOption\n\u003E;\n\n\u002F\u002F Register the required components\necharts.use([\n TitleComponent,\n TooltipComponent,\n GridComponent,\n BarChart,\n CanvasRenderer\n]);\n\nvar option: ECOption = {\n \u002F\u002F ...\n};\n"}]}]}]},dir:"\u002Fen\u002Fbasics",path:"\u002Fen\u002Fbasics\u002Fimport",extension:".md",createdAt:C,updatedAt:C},postPath:"en\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-installation-of-echarts","NPM Installation of ECharts","introduce-echarts","Introduce ECharts","importing-required-charts-and-components-to-have-minimal-bundle","Importing Required Charts and Components to Have Minimal Bundle.","minimal-option-type-in-typescript","Minimal Option Type in TypeScript"," or ","js","CanvasRenderer","2021-08-02T05:33:02.863Z"))); |