| <!doctype html> |
| <html data-n-head-ssr> |
| <head> |
| <link rel="stylesheet" type="text/css" href="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> |
| <link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css"> |
| <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"> |
| <title>在项目中引入 ECharts - 入门篇 - Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/4d2a12b.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8117eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1f3ef45.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/ba9ec8a.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1f3ef45.css"><link rel="stylesheet" href="/handbook/_nuxt/css/ba9ec8a.css"><link rel="stylesheet" href="/handbook/_nuxt/css/3556c50.css"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide">v5 升级指南</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">v4 升级 v5 指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图（玫瑰图）</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">动画</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/animation/transition" class="nav-link"><span class="title">数据过渡动画</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">智能指针吸附</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">在项目中引入 Apache ECharts</h1> <p>假如你的开发环境使用了 <code>npm</code> 或者 <code>yarn</code> 等包管理工具，并且使用 <code>webpack</code> 等打包工具进行构建，本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 tree-shaking 特性只打包需要的模块以减少包体积。</p> <h2 id="npm-%E5%AE%89%E8%A3%85-echarts" tabindex="-1">NPM 安装 ECharts</h2> <p>你可以使用如下命令通过 npm 安装 ECharts</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-text line-numbers"><code>npm install echarts --save</code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%E5%BC%95%E5%85%A5-echarts" tabindex="-1">引入 ECharts</h2> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts'</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// 基于准备好的dom，初始化echarts实例</span> |
| <span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token comment">// 绘制图表</span> |
| myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">text</span><span class="token operator">:</span> <span class="token string">'ECharts 入门示例'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">tooltip</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'衬衫'</span><span class="token punctuation">,</span> <span class="token string">'羊毛衫'</span><span class="token punctuation">,</span> <span class="token string">'雪纺衫'</span><span class="token punctuation">,</span> <span class="token string">'裤子'</span><span class="token punctuation">,</span> <span class="token string">'高跟鞋'</span><span class="token punctuation">,</span> <span class="token string">'袜子'</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'销量'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">,</span> <span class="token number">36</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">20</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <h2 id="%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="-1">按需引入 ECharts 图表和组件</h2> <p>上面的代码会引入 ECharts 中所有的图表和组件，如果你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。</span> |
| <span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/core'</span><span class="token punctuation">;</span> |
| <span class="token comment">// 引入柱状图图表，图表后缀都为 Chart</span> |
| <span class="token keyword">import</span> <span class="token punctuation">{</span> BarChart <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/charts'</span><span class="token punctuation">;</span> |
| <span class="token comment">// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component</span> |
| <span class="token keyword">import</span> <span class="token punctuation">{</span> |
| TitleComponent<span class="token punctuation">,</span> |
| TooltipComponent<span class="token punctuation">,</span> |
| GridComponent<span class="token punctuation">,</span> |
| DatasetComponent<span class="token punctuation">,</span> |
| TransformComponent |
| <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span> |
| <span class="token comment">// 标签自动布局、全局过渡动画等特性</span> |
| <span class="token keyword">import</span> <span class="token punctuation">{</span> LabelLayout<span class="token punctuation">,</span> UniversalTransition <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/features'</span><span class="token punctuation">;</span> |
| <span class="token comment">// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步</span> |
| <span class="token keyword">import</span> <span class="token punctuation">{</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// 注册必须的组件</span> |
| echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span> |
| TitleComponent<span class="token punctuation">,</span> |
| TooltipComponent<span class="token punctuation">,</span> |
| GridComponent<span class="token punctuation">,</span> |
| DatasetComponent<span class="token punctuation">,</span> |
| TransformComponent<span class="token punctuation">,</span> |
| BarChart<span class="token punctuation">,</span> |
| LabelLayout<span class="token punctuation">,</span> |
| UniversalTransition<span class="token punctuation">,</span> |
| CanvasRenderer |
| <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// 接下来的使用就跟之前一样，初始化图表，设置配置项</span> |
| <span class="token keyword">var</span> myChart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'main'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| myChart<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span><span class="token punctuation">{</span> |
| <span class="token comment">// ...</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote><p>需要注意的是为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入 <code>CanvasRenderer</code> 或者 <code>SVGRenderer</code> 作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的 <code>CanvasRenderer</code> 模块。</p></blockquote> <p>我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。</p> <h2 id="%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1">在 TypeScript 中按需引入</h2> <p>对于使用了 TypeScript 来开发 ECharts 的开发者，我们提供了类型接口来组合出最小的 <code>EChartsOption</code> 类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-ts line-numbers"><code><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> echarts <span class="token keyword">from</span> <span class="token string">'echarts/core'</span><span class="token punctuation">;</span> |
| <span class="token keyword">import</span> <span class="token punctuation">{</span> |
| BarChart<span class="token punctuation">,</span> |
| <span class="token comment">// 系列类型的定义后缀都为 SeriesOption</span> |
| BarSeriesOption<span class="token punctuation">,</span> |
| LineChart<span class="token punctuation">,</span> |
| LineSeriesOption |
| <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/charts'</span><span class="token punctuation">;</span> |
| <span class="token keyword">import</span> <span class="token punctuation">{</span> |
| TitleComponent<span class="token punctuation">,</span> |
| <span class="token comment">// 组件类型的定义后缀都为 ComponentOption</span> |
| TitleComponentOption<span class="token punctuation">,</span> |
| TooltipComponent<span class="token punctuation">,</span> |
| TooltipComponentOption<span class="token punctuation">,</span> |
| GridComponent<span class="token punctuation">,</span> |
| GridComponentOption<span class="token punctuation">,</span> |
| <span class="token comment">// 数据集组件</span> |
| DatasetComponent<span class="token punctuation">,</span> |
| DatasetComponentOption<span class="token punctuation">,</span> |
| <span class="token comment">// 内置数据转换器组件 (filter, sort)</span> |
| TransformComponent |
| <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/components'</span><span class="token punctuation">;</span> |
| <span class="token keyword">import</span> <span class="token punctuation">{</span> LabelLayout<span class="token punctuation">,</span> UniversalTransition <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/features'</span><span class="token punctuation">;</span> |
| <span class="token keyword">import</span> <span class="token punctuation">{</span> CanvasRenderer <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'echarts/renderers'</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型</span> |
| <span class="token keyword">type</span> <span class="token class-name">ECOption</span> <span class="token operator">=</span> echarts<span class="token punctuation">.</span>ComposeOption<span class="token operator"><</span> |
| <span class="token operator">|</span> BarSeriesOption |
| <span class="token operator">|</span> LineSeriesOption |
| <span class="token operator">|</span> TitleComponentOption |
| <span class="token operator">|</span> TooltipComponentOption |
| <span class="token operator">|</span> GridComponentOption |
| <span class="token operator">|</span> DatasetComponentOption |
| <span class="token operator">></span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// 注册必须的组件</span> |
| echarts<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span> |
| TitleComponent<span class="token punctuation">,</span> |
| TooltipComponent<span class="token punctuation">,</span> |
| GridComponent<span class="token punctuation">,</span> |
| DatasetComponent<span class="token punctuation">,</span> |
| TransformComponent<span class="token punctuation">,</span> |
| BarChart<span class="token punctuation">,</span> |
| LineChart<span class="token punctuation">,</span> |
| LabelLayout<span class="token punctuation">,</span> |
| UniversalTransition<span class="token punctuation">,</span> |
| CanvasRenderer |
| <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| |
| <span class="token keyword">const</span> option<span class="token operator">:</span> ECOption <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token comment">// ...</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/basics/import.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60" loading="lazy"> <span>plainheart</span></a><a href="https://github.com/michaelxiaohan" target="_blank" class="post-contributor"><img alt="michaelxiaohan" src="https://avatars.githubusercontent.com/michaelxiaohan?size=60" loading="lazy"> <span>michaelxiaohan</span></a><a href="https://github.com/aimuz" target="_blank" class="post-contributor"><img alt="aimuz" src="https://avatars.githubusercontent.com/aimuz?size=60" loading="lazy"> <span>aimuz</span></a><a href="https://github.com/vueadmin" target="_blank" class="post-contributor"><img alt="vueadmin" src="https://avatars.githubusercontent.com/vueadmin?size=60" loading="lazy"> <span>vueadmin</span></a><a href="https://github.com/gugujigua" target="_blank" class="post-contributor"><img alt="gugujigua" src="https://avatars.githubusercontent.com/gugujigua?size=60" loading="lazy"> <span>gugujigua</span></a><a href="https://github.com/Yechuanjie" target="_blank" class="post-contributor"><img alt="Yechuanjie" src="https://avatars.githubusercontent.com/Yechuanjie?size=60" loading="lazy"> <span>Yechuanjie</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,i,e,l,d,r,a,c,n,o,h,b,s,C,g,m,p,I,u,v,G,E,B,A,y,W,Z,L,J,X,R,w,Y,V,N,K,H,f,S,k,O,D,F,z,x,Q,M,j,P,q,T,U,_,$,tt,it,et,lt){return{layout:"default",data:[{html:'<h1 id="%E5%9C%A8%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%BC%95%E5%85%A5-apache-echarts" tabindex="-1">在项目中引入 Apache ECharts</h1>\n<p>假如你的开发环境使用了 <code>npm</code> 或者 <code>yarn</code> 等包管理工具，并且使用 <code>webpack</code> 等打包工具进行构建，本文将会介绍如何引入 Apache ECharts<sup>TM</sup> 并通过 tree-shaking 特性只打包需要的模块以减少包体积。</p>\n<h2 id="npm-%E5%AE%89%E8%A3%85-echarts" tabindex="-1">NPM 安装 ECharts</h2>\n<p>你可以使用如下命令通过 npm 安装 ECharts</p>\n<md-code-block lang="shell" code="\'bnBtIGluc3RhbGwgZWNoYXJ0cyAtLXNhdmU\'" line-highlights="\'\'" />\n<h2 id="%E5%BC%95%E5%85%A5-echarts" tabindex="-1">引入 ECharts</h2>\n<md-code-block lang="js" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzJzsKCi8vIOWfuuS6juWHhuWkh-WlveeahGRvbe-8jOWIneWni-WMlmVjaGFydHPlrp7kvosKdmFyIG15Q2hhcnQgPSBlY2hhcnRzLmluaXQoZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ21haW4nKSk7Ci8vIOe7mOWItuWbvuihqApteUNoYXJ0LnNldE9wdGlvbih7CiAgdGl0bGU6IHsKICAgIHRleHQ6ICdFQ2hhcnRzIOWFpemXqOekuuS-iycKICB9LAogIHRvb2x0aXA6IHt9LAogIHhBeGlzOiB7CiAgICBkYXRhOiBbJ-ihrOihqycsICfnvormr5vooasnLCAn6Zuq57q66KGrJywgJ-ijpOWtkCcsICfpq5jot5_pnosnLCAn6KKc5a2QJ10KICB9LAogIHlBeGlzOiB7fSwKICBzZXJpZXM6IFsKICAgIHsKICAgICAgbmFtZTogJ-mUgOmHjycsCiAgICAgIHR5cGU6ICdiYXInLAogICAgICBkYXRhOiBbNSwgMjAsIDM2LCAxMCwgMTAsIDIwXQogICAgfQogIF0KfSk7\'" line-highlights="\'\'" />\n<h2 id="%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="-1">按需引入 ECharts 图表和组件</h2>\n<p>上面的代码会引入 ECharts 中所有的图表和组件，如果你不想引入所有组件，也可以使用 ECharts 提供的按需引入的接口来打包必须的组件。</p>\n<md-code-block lang="js" code="\'Ly8g5byV5YWlIGVjaGFydHMg5qC45b-D5qih5Z2X77yM5qC45b-D5qih5Z2X5o-Q5L6b5LqGIGVjaGFydHMg5L2_55So5b-F6aG76KaB55qE5o6l5Y-j44CCCmltcG9ydCAqIGFzIGVjaGFydHMgZnJvbSAnZWNoYXJ0cy9jb3JlJzsKLy8g5byV5YWl5p-x54q25Zu-5Zu-6KGo77yM5Zu-6KGo5ZCO57yA6YO95Li6IENoYXJ0CmltcG9ydCB7IEJhckNoYXJ0IH0gZnJvbSAnZWNoYXJ0cy9jaGFydHMnOwovLyDlvJXlhaXmj5DnpLrmoYbvvIzmoIfpopjvvIznm7Top5LlnZDmoIfns7vvvIzmlbDmja7pm4bvvIzlhoXnva7mlbDmja7ovazmjaLlmajnu4Tku7bvvIznu4Tku7blkI7nvIDpg73kuLogQ29tcG9uZW50CmltcG9ydCB7CiAgVGl0bGVDb21wb25lbnQsCiAgVG9vbHRpcENvbXBvbmVudCwKICBHcmlkQ29tcG9uZW50LAogIERhdGFzZXRDb21wb25lbnQsCiAgVHJhbnNmb3JtQ29tcG9uZW50Cn0gZnJvbSAnZWNoYXJ0cy9jb21wb25lbnRzJzsKLy8g5qCH562-6Ieq5Yqo5biD5bGA44CB5YWo5bGA6L-H5rih5Yqo55S7562J54m55oCnCmltcG9ydCB7IExhYmVsTGF5b3V0LCBVbml2ZXJzYWxUcmFuc2l0aW9uIH0gZnJvbSAnZWNoYXJ0cy9mZWF0dXJlcyc7Ci8vIOW8leWFpSBDYW52YXMg5riy5p-T5Zmo77yM5rOo5oSP5byV5YWlIENhbnZhc1JlbmRlcmVyIOaIluiAhSBTVkdSZW5kZXJlciDmmK_lv4XpobvnmoTkuIDmraUKaW1wb3J0IHsgQ2FudmFzUmVuZGVyZXIgfSBmcm9tICdlY2hhcnRzL3JlbmRlcmVycyc7CgovLyDms6jlhozlv4XpobvnmoTnu4Tku7YKZWNoYXJ0cy51c2UoWwogIFRpdGxlQ29tcG9uZW50LAogIFRvb2x0aXBDb21wb25lbnQsCiAgR3JpZENvbXBvbmVudCwKICBEYXRhc2V0Q29tcG9uZW50LAogIFRyYW5zZm9ybUNvbXBvbmVudCwKICBCYXJDaGFydCwKICBMYWJlbExheW91dCwKICBVbml2ZXJzYWxUcmFuc2l0aW9uLAogIENhbnZhc1JlbmRlcmVyCl0pOwoKLy8g5o6l5LiL5p2l55qE5L2_55So5bCx6Lef5LmL5YmN5LiA5qC377yM5Yid5aeL5YyW5Zu-6KGo77yM6K6-572u6YWN572u6aG5CnZhciBteUNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdtYWluJykpOwpteUNoYXJ0LnNldE9wdGlvbih7CiAgLy8gLi4uCn0pOw\'" line-highlights="\'\'" />\n<blockquote>\n<p>需要注意的是为了保证打包的体积是最小的，ECharts 按需引入的时候不再提供任何渲染器，所以需要选择引入 <code>CanvasRenderer</code> 或者 <code>SVGRenderer</code> 作为渲染器。这样的好处是假如你只需要使用 svg 渲染模式，打包的结果中就不会再包含无需使用的 <code>CanvasRenderer</code> 模块。</p>\n</blockquote>\n<p>我们在示例编辑页的“完整代码”标签提供了非常方便的生成按需引入代码的功能。这个功能会根据当前的配置项动态生成最小的按需引入的代码。你可以直接在你的项目中使用。</p>\n<h2 id="%E5%9C%A8-typescript-%E4%B8%AD%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5" tabindex="-1">在 TypeScript 中按需引入</h2>\n<p>对于使用了 TypeScript 来开发 ECharts 的开发者，我们提供了类型接口来组合出最小的 <code>EChartsOption</code> 类型。这个更严格的类型可以有效帮助你检查出是否少加载了组件或者图表。</p>\n<md-code-block lang="ts" code="\'aW1wb3J0ICogYXMgZWNoYXJ0cyBmcm9tICdlY2hhcnRzL2NvcmUnOwppbXBvcnQgewogIEJhckNoYXJ0LAogIC8vIOezu-WIl-exu-Wei-eahOWumuS5ieWQjue8gOmDveS4uiBTZXJpZXNPcHRpb24KICBCYXJTZXJpZXNPcHRpb24sCiAgTGluZUNoYXJ0LAogIExpbmVTZXJpZXNPcHRpb24KfSBmcm9tICdlY2hhcnRzL2NoYXJ0cyc7CmltcG9ydCB7CiAgVGl0bGVDb21wb25lbnQsCiAgLy8g57uE5Lu257G75Z6L55qE5a6a5LmJ5ZCO57yA6YO95Li6IENvbXBvbmVudE9wdGlvbgogIFRpdGxlQ29tcG9uZW50T3B0aW9uLAogIFRvb2x0aXBDb21wb25lbnQsCiAgVG9vbHRpcENvbXBvbmVudE9wdGlvbiwKICBHcmlkQ29tcG9uZW50LAogIEdyaWRDb21wb25lbnRPcHRpb24sCiAgLy8g5pWw5o2u6ZuG57uE5Lu2CiAgRGF0YXNldENvbXBvbmVudCwKICBEYXRhc2V0Q29tcG9uZW50T3B0aW9uLAogIC8vIOWGhee9ruaVsOaNrui9rOaNouWZqOe7hOS7tiAoZmlsdGVyLCBzb3J0KQogIFRyYW5zZm9ybUNvbXBvbmVudAp9IGZyb20gJ2VjaGFydHMvY29tcG9uZW50cyc7CmltcG9ydCB7IExhYmVsTGF5b3V0LCBVbml2ZXJzYWxUcmFuc2l0aW9uIH0gZnJvbSAnZWNoYXJ0cy9mZWF0dXJlcyc7CmltcG9ydCB7IENhbnZhc1JlbmRlcmVyIH0gZnJvbSAnZWNoYXJ0cy9yZW5kZXJlcnMnOwoKLy8g6YCa6L-HIENvbXBvc2VPcHRpb24g5p2l57uE5ZCI5Ye65LiA5Liq5Y-q5pyJ5b-F6aG757uE5Lu25ZKM5Zu-6KGo55qEIE9wdGlvbiDnsbvlnosKdHlwZSBFQ09wdGlvbiA9IGVjaGFydHMuQ29tcG9zZU9wdGlvbjwKICB8IEJhclNlcmllc09wdGlvbgogIHwgTGluZVNlcmllc09wdGlvbgogIHwgVGl0bGVDb21wb25lbnRPcHRpb24KICB8IFRvb2x0aXBDb21wb25lbnRPcHRpb24KICB8IEdyaWRDb21wb25lbnRPcHRpb24KICB8IERhdGFzZXRDb21wb25lbnRPcHRpb24KPjsKCi8vIOazqOWGjOW_hemhu-eahOe7hOS7tgplY2hhcnRzLnVzZShbCiAgVGl0bGVDb21wb25lbnQsCiAgVG9vbHRpcENvbXBvbmVudCwKICBHcmlkQ29tcG9uZW50LAogIERhdGFzZXRDb21wb25lbnQsCiAgVHJhbnNmb3JtQ29tcG9uZW50LAogIEJhckNoYXJ0LAogIExpbmVDaGFydCwKICBMYWJlbExheW91dCwKICBVbml2ZXJzYWxUcmFuc2l0aW9uLAogIENhbnZhc1JlbmRlcmVyCl0pOwoKY29uc3Qgb3B0aW9uOiBFQ09wdGlvbiA9IHsKICAvLyAuLi4KfTs\'" line-highlights="\'\'" />\n',postPath:"zh/basics/import",title:"在项目中引入 ECharts - 入门篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:l},{title:"入门篇",dir:d,children:[{title:"获取 ECharts",dir:r},{title:"在项目中引入 ECharts",dir:a},{title:"资源列表",dir:c,draft:t},{title:"寻求帮助",dir:n},{title:"版本特性",dir:o,children:[{title:"ECharts 5 特性介绍",dir:h},{title:"v4 升级 v5 指南",dir:b},{title:5.2,dir:s},{title:5.3,dir:C},{title:5.4,dir:g}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:p},{title:"配置项",dir:I,draft:t},{title:"系列",dir:u,draft:t},{title:"样式",dir:v},{title:"数据集",dir:G},{title:"数据转换",dir:E},{title:"坐标系",dir:B,draft:t},{title:"坐标轴",dir:A},{title:"视觉映射",dir:e},{title:"图例",dir:y},{title:"事件与行为",dir:W}]},{title:"应用篇",dir:Z,children:[{title:"常用图表类型",dir:L,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:J},{title:"堆叠柱状图",dir:X},{title:"动态排序柱状图",dir:R},{title:"极坐标系柱状图",dir:w,draft:t},{title:"阶梯瀑布图",dir:Y},{title:"视觉映射的柱状图",dir:e,draft:t}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:N},{title:"堆叠折线图",dir:K},{title:"区域面积图",dir:H},{title:"平滑曲线图",dir:f},{title:"阶梯线图",dir:S}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:O},{title:"南丁格尔图（玫瑰图）",dir:D}]},{title:"散点图",dir:F,children:[{title:"基础散点图",dir:z}]}]},{title:x,dir:i,draft:t},{title:"跨平台方案",dir:Q,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:M},{title:"数据下钻",dir:j,draft:t}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"动画",dir:q,children:[{title:"数据过渡动画",dir:T}]},{title:"交互",dir:U,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:t},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:tt,children:[{title:x,dir:i,draft:t},{title:it,dir:et},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:lt}]}],en:[{title:"Get Started",dir:l},{title:"Basics",dir:d,children:[{title:"Download ECharts",dir:r},{title:"Import ECharts",dir:a},{title:"Resources",dir:c,draft:t},{title:"Get Help",dir:n},{title:"What's New",dir:o,children:[{title:"ECharts 5 Features",dir:h},{title:"Migration from v4 to v5",dir:b},{title:5.2,dir:s},{title:5.3,dir:C},{title:5.4,dir:g}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:p},{title:"Chart Option",dir:I,draft:t},{title:"Series",dir:u,draft:t},{title:"Style",dir:v},{title:"Dataset",dir:G},{title:"Data Transform",dir:E},{title:"Coordinate",dir:B,draft:t},{title:"Axis",dir:A},{title:"Visual Mapping",dir:e},{title:"Legend",dir:y},{title:"Event and Action",dir:W}]},{title:"How To Guides",dir:Z,children:[{title:"Common Charts",dir:L,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:J},{title:"Stacked Bar",dir:X},{title:"Bar Racing",dir:R},{title:"Bar Polar",dir:w,draft:t},{title:"Waterfall",dir:Y}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:N},{title:"Stacked Line",dir:K},{title:"Area Chart",dir:H},{title:"Smoothed Line",dir:f},{title:"Step Line",dir:S}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:O},{title:"Rose Style",dir:D}]},{title:"Scatter",dir:F,children:[{title:"Basic Scatter",dir:z}]}]},{title:"Mobile",dir:i,draft:t},{title:"Cross Platform",dir:Q,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:M},{title:"Drilldown",dir:j,draft:t}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Animation",dir:q,children:[{title:"Data Transition",dir:T}]},{title:"Interaction",dir:U,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:t},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:tt,children:[{title:"Mobile Optimization",dir:i,draft:t},{title:it,dir:et},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:lt}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:t,routePath:"/zh/basics/import",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","how-to","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/4d2a12b.js" defer></script><script src="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" defer></script><script src="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" defer></script><script src="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" defer></script> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| <script src="https://fastly.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> |
| <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> |
| <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script> |
| <script>var _hmt=_hmt||[];function gtag(){dataLayer.push(arguments)}!function(){var e=document.createElement("script"),t=(e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395",document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}(),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-141228404-1")</script> |
| </body> |
| </html> |
