| <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://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/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/zh/tutorial.html">教程</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/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></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 border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><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> <!----></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> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></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> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></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> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></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-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></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> <!----></li></ul></li></ul></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"><h1 id="图例"><a aria-hidden="true" href="#%E5%9B%BE%E4%BE%8B" tabindex="-1"><span class="icon icon-link"></span></a>图例</h1> |
| <p>当图表只有一种数据信息时，用图表标题说明数据信息即可。建议此时不要加上图例。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/concepts/legend#%E5%B8%83%E5%B1%80">布局</a></li><li class="toc2"><a href="/handbook/zh/concepts/legend#%E6%A0%B7%E5%BC%8F">样式</a></li><li class="toc2"><a href="/handbook/zh/concepts/legend#%E4%BA%A4%E4%BA%92">交互</a></li><li class="toc2"><a href="/handbook/zh/concepts/legend#%E5%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9">图例注意事项</a></li></ul></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/concepts/legend.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/Ovilia" target="_blank" class="post-contributor"><img alt="Ovilia" src="https://avatars.githubusercontent.com/Ovilia?size=60"> <span>Ovilia</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a><a href="https://github.com/yufeng04" target="_blank" class="post-contributor"><img alt="yufeng04" src="https://avatars.githubusercontent.com/yufeng04?size=60"> <span>yufeng04</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(t,e,i,r,a,l,d,n,p,c,s,o,h,g,y,u,m,v,f,b,B,E,x,C,A,S,k,P,w,N,R,L,D,H,I,_,z,T,M,G,V,F,U,O,W,Z,$,j,X,q,J,K,Q,Y,tt,et,it,rt,at,lt,dt,nt,pt,ct,st,ot,ht,gt,yt,ut,mt,vt,ft,bt){return{layout:"default",data:[{article:{slug:E,toc:[{id:v,depth:2,text:v},{id:c,depth:2,text:c},{id:s,depth:2,text:s},{id:f,depth:2,text:f}],body:{type:"root",children:[{type:e,tag:"h1",props:{id:x},children:[{type:e,tag:o,props:{ariaHidden:h,href:"#%E5%9B%BE%E4%BE%8B",tabIndex:-1},children:[{type:e,tag:g,props:{className:[y,u]},children:[]}]},{type:t,value:x}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。"}]},{type:t,value:r},{type:e,tag:b,props:{id:v},children:[{type:e,tag:o,props:{ariaHidden:h,href:"#%E5%B8%83%E5%B1%80",tabIndex:-1},children:[{type:e,tag:g,props:{className:[y,u]},children:[]}]},{type:t,value:v}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式："}]},{type:t,value:r},{type:e,tag:d,props:{className:[n]},children:[{type:e,tag:"md-live",props:{lang:p,layout:"tb"},children:[{type:t,value:"option = {\n legend: {\n // Try 'horizontal'\n orient: 'vertical',\n right: 10,\n top: 'center'\n },\n dataset: {\n source: [\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n },\n xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n"}]}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"对于图例较多时，可以使用可滚动翻页的图例"}]},{type:t,value:r},{type:e,tag:d,props:{className:[n]},children:[{type:e,tag:m,props:{lang:p,"line-highlights":a,"file-name":a},children:[{type:t,value:"option = {\n legend: {\n type: 'scroll',\n orient: 'vertical',\n right: 10,\n top: 20,\n bottom: 20,\n data: ['图例一', '图例二', '图例三' /* ... */, , '图例n']\n // ...\n }\n // ...\n};\n"}]}]},{type:t,value:r},{type:e,tag:b,props:{id:c},children:[{type:e,tag:o,props:{ariaHidden:h,href:"#%E6%A0%B7%E5%BC%8F",tabIndex:-1},children:[{type:e,tag:g,props:{className:[y,u]},children:[]}]},{type:t,value:c}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"在深色系背景下、为了方便阅读，建议给图例加上半透明的浅色背景层，文字颜色设置为浅色。"}]},{type:t,value:r},{type:e,tag:d,props:{className:[n]},children:[{type:e,tag:m,props:{lang:p,"line-highlights":a,"file-name":a},children:[{type:t,value:"option = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n backgroundColor: '#ccc',\n textStyle: {\n color: '#ccc'\n // ...\n }\n // ...\n }\n // ...\n};\n"}]}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。"}]},{type:t,value:r},{type:e,tag:"img",props:{"max-width":"830",width:"80%",height:"80%",src:"images/design/legend/charts_sign_img04.png"},children:[]},{type:t,value:r},{type:e,tag:d,props:{className:[n]},children:[{type:e,tag:m,props:{lang:p,"line-highlights":a,"file-name":a},children:[{type:t,value:"option = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n icon: 'rect'\n // ...\n }\n // ...\n};\n"}]}]},{type:t,value:r},{type:e,tag:b,props:{id:s},children:[{type:e,tag:o,props:{ariaHidden:h,href:"#%E4%BA%A4%E4%BA%92",tabIndex:-1},children:[{type:e,tag:g,props:{className:[y,u]},children:[]}]},{type:t,value:s}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"根据场景需要，图例可支持交互操作，点击控制显示或隐藏对应的数据列；"}]},{type:t,value:r},{type:e,tag:d,props:{className:[n]},children:[{type:e,tag:m,props:{lang:p,"line-highlights":a,"file-name":a},children:[{type:t,value:"option = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n selected: {\n 图例一: true,\n 图例二: true,\n 图例三: false\n }\n // ...\n }\n // ...\n};\n"}]}]},{type:t,value:r},{type:e,tag:b,props:{id:f},children:[{type:e,tag:o,props:{ariaHidden:h,href:"#%E5%9B%BE%E4%BE%8B%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9",tabIndex:-1},children:[{type:e,tag:g,props:{className:[y,u]},children:[]}]},{type:t,value:f}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"图例要要注意视情况使用，有些双轴图包含了多种图表类型，不同类型的图例样式要有所区分。"}]},{type:t,value:r},{type:e,tag:d,props:{className:[n]},children:[{type:e,tag:m,props:{lang:p,"line-highlights":a,"file-name":a},children:[{type:t,value:"option = {\n legend: {\n data: [\n {\n name: '图例一',\n icon: 'rect'\n },\n {\n name: '图例二',\n icon: 'circle'\n },\n {\n name: '图例三',\n icon: 'pin'\n }\n ]\n // ...\n },\n series: [\n {\n name: '图例一'\n // ...\n },\n {\n name: '图例二'\n // ...\n },\n {\n name: '图例三'\n // ...\n }\n ]\n // ...\n};\n"}]}]},{type:t,value:r},{type:e,tag:l,props:{},children:[{type:t,value:"当图表只有一种数据信息时，用图表标题说明数据信息即可。建议此时不要加上图例。"}]}]},dir:"/zh/concepts",path:A,extension:".md",createdAt:"2021-06-04T12:26:37.934Z",updatedAt:"2021-07-21T13:04:56.122Z"},postPath:"zh/concepts/legend"}],fetch:{},error:S,state:{filled:!1,docVersion:a,ghVersion:a,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:k},{title:"入门篇",dir:P,children:[{title:"获取 ECharts",dir:w},{title:"在项目中引入 ECharts",dir:N},{title:"资源列表",dir:R,draft:i},{title:"获取灵感",dir:L},{title:"寻求帮助",dir:D},{title:"版本介绍",dir:H,children:[{title:I,draft:i,dir:_},{title:"ECharts 5 新特性",dir:z},{title:"ECharts 5 升级指南",dir:T}]}]},{title:"概念篇",dir:M,children:[{title:"图表容器及大小",dir:G},{title:"配置项",dir:V,draft:i},{title:"系列",dir:F,draft:i},{title:c,dir:U},{title:"数据集",dir:O},{title:"数据转换",dir:W},{title:"坐标系",dir:Z,draft:i},{title:"坐标轴",dir:$},{title:"视觉映射",dir:C},{title:x,dir:E},{title:"事件与行为",dir:j}]},{title:"应用篇",dir:X,children:[{title:"常用图表类型",dir:q,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:J},{title:"堆叠柱状图",dir:K},{title:"动态排序柱状图",dir:Q,draft:i},{title:"极坐标系柱状图",dir:Y,draft:i},{title:"瀑布图",dir:tt,draft:i},{title:"视觉映射的柱状图",dir:C,draft:i}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:et},{title:"堆叠折线图",dir:it},{title:"区域面积图",dir:rt},{title:"平滑曲线图",dir:at},{title:"阶梯线图",dir:lt}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:dt},{title:"圆环图",dir:nt},{title:"南丁格尔图（玫瑰图）",dir:"rose"}]},{title:"散点图",dir:pt,children:[{title:"基础散点图",dir:ct}]}]},{title:"移动端优化",dir:B,draft:i},{title:"跨平台方案",dir:st,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:ot},{title:"数据下钻",dir:ht,draft:i}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:gt}]},{title:s,dir:yt,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:ut,draft:i}]}]},{title:"最佳实践",dir:mt,children:[{title:"移动端优化",dir:B,draft:i},{title:vt,dir:ft},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:bt}]}],en:[{title:"Get Started",dir:k},{title:"Basics",dir:P,children:[{title:"Download ECharts",dir:w},{title:"Import ECharts",dir:N},{title:"Resources",dir:R,draft:i},{title:"Inspiration",dir:L},{title:"Get Help",dir:D},{title:"Release Note",dir:H,children:[{title:I,draft:i,dir:_},{title:"ECharts 5 Features",dir:z},{title:"ECharts 5 Upgrade Guide",dir:T}]}]},{title:"Concepts",dir:M,children:[{title:"Chart Container",dir:G},{title:"Chart Option",dir:V,draft:i},{title:"Series",dir:F,draft:i},{title:"Style",dir:U},{title:"Dataset",dir:O},{title:"Data Transform",dir:W},{title:"Coordinate",dir:Z,draft:i},{title:"Axis",dir:$},{title:"Visual Mapping",dir:C},{title:"Legend",dir:E},{title:"Event and Action",dir:j}]},{title:"Application",dir:X,children:[{title:"Common Charts",dir:q,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:J},{title:"Stacked Bar",dir:K},{title:"Bar Racing",dir:Q,draft:i},{title:"Bar Polar",dir:Y,draft:i},{title:"Waterfall",dir:tt,draft:i}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:et},{title:"Stacked Line",dir:it},{title:"Area Chart",dir:rt},{title:"Smoothed Line",dir:at},{title:"Step Line",dir:lt}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:dt},{title:"Ring Style",dir:nt},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:pt,children:[{title:"Basic Scatter",dir:ct}]}]},{title:"Mobile",dir:B,draft:i},{title:"Cross Platform",dir:st,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:ot},{title:"Drilldown",dir:ht,draft:i}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:gt}]},{title:"Interaction",dir:yt,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:ut,draft:i}]}]},{title:"Best Practice",dir:mt,children:[{title:"Mobile Optimization",dir:B,draft:i},{title:vt,dir:ft},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:bt}]}]},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:i,routePath:A,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:S},content:{dbHash:"570e7c13"}}}}("text","element",!0,"\n","","p","div","nuxt-content-highlight","js","样式","交互","a","true","span","icon","icon-link","md-code-block","布局","图例注意事项","h2","mobile","legend","图例","visual-map","/zh/concepts/legend",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","event","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script> |
