| <!doctype html> |
| <html data-n-head-ssr lang="zh-CN" data-n-head="%7B%22lang%22:%7B%22ssr%22:%22zh-CN%22%7D%7D"> |
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <title>富文本标签 - 标签 - 应用篇 - 使用手册 - Apache ECharts</title><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="shortcut icon" type="image/png" href="https://echarts.apache.org/zh/images/favicon.png"><link data-n-head="ssr" rel="stylesheet" href="//echarts.apache.org/zh/js/vendors/bootstrap@3.3.7/css/bootstrap.min.css"><link data-n-head="ssr" rel="stylesheet" href="https://echarts.apache.org/zh/css/main.css"><link data-n-head="ssr" rel="stylesheet" href="//echarts.apache.org/zh/js/vendors/docsearch.js@2.6.3/dist/cdn/docsearch.min.css"><script data-n-head="ssr">window.ECHARTS_WWW_VENDORS_CDN_ROOT="//echarts.apache.org/zh/js/vendors/"</script><script data-n-head="ssr" src="//echarts.apache.org/zh/js/vendors/jquery@3.7.1/dist/jquery.min.js"></script><script data-n-head="ssr" src="//echarts.apache.org/zh/js/vendors/bootstrap@3.3.7/js/bootstrap.min.js"></script><script data-n-head="ssr" src="//echarts.apache.org/zh/js/vendors/docsearch.js@2.6.3/dist/cdn/docsearch.min.js"></script><link rel="preload" href="/handbook/_nuxt/e47e243.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/6b95e13.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5065b3fcfb135aeca141.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/be446d2.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5df72fc39d1af2ed5977.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/c4dea9e2e5641ecc29b6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/6b95e13.css"><link rel="stylesheet" href="/handbook/_nuxt/css/be446d2.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_=20240226" 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/v6-upgrade-guide">v6 升级指南</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><li id="nav-github"><a href="https://github.com/apache/echarts" target="_blank"><svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-262.000000, -2480.000000)" fill="#333"><g transform="translate(252.000000, 2470.000000)"><path d="M29.9006449,27.904446 C28.5016932,29.8668872 26.6944882,31.2248797 24.4790301,31.9784237 C24.2211218,32.0272886 24.0325745,31.9931534 23.9133882,31.876018 C23.7942019,31.7588827 23.7346171,31.6119968 23.7346338,31.4353603 L23.7346338,28.3376019 C23.7346338,27.3880159 23.4865017,26.6930482 22.9902375,26.2526987 C23.5347812,26.1938141 24.024319,26.1058042 24.458851,25.9886688 C24.893383,25.8715335 25.3422785,25.680801 25.8055376,25.4164714 C26.2687966,25.1521418 26.6556591,24.8267354 26.9661251,24.4402521 C27.276591,24.0537688 27.5296112,23.5398222 27.7251857,22.8984123 C27.9207602,22.2570024 28.0185475,21.5203805 28.0185475,20.6885464 C28.0185475,19.504056 27.6414612,18.4959023 26.8872886,17.6640854 C27.240536,16.7733669 27.2023419,15.7752328 26.7727063,14.6696833 C26.5050218,14.5813565 26.1181593,14.6352226 25.6121189,14.8312818 C25.1060784,15.0273409 24.6669591,15.2428141 24.2947609,15.4777015 L23.7502256,15.8300324 C22.8622108,15.5757225 21.9454689,15.4485675 21,15.4485675 C20.0545311,15.4485675 19.1377892,15.5757225 18.2497744,15.8300324 C18.0969813,15.7223001 17.8940788,15.5901353 17.641067,15.433538 C17.3880551,15.2769408 16.9892689,15.0884007 16.4447085,14.8679176 C15.9001481,14.6474346 15.4894467,14.5813479 15.2126043,14.6696576 C14.7921266,15.7758408 14.7588206,16.7739749 15.1126863,17.6640597 C14.3585137,18.4958938 13.9814275,19.5040475 13.9814275,20.6885208 C13.9814275,21.5203548 14.0792147,22.2544676 14.2747892,22.8908591 C14.4703637,23.5272505 14.720944,24.0411971 15.0265302,24.4326988 C15.3321164,24.8242005 15.7165391,25.1521076 16.1797981,25.41642 C16.6430571,25.6807325 17.0919527,25.871465 17.5264847,25.9886174 C17.9610167,26.1057699 18.4505545,26.1937799 18.9950982,26.2526473 C18.6131238,26.60467 18.3790461,27.1085884 18.292865,27.7644025 C18.0924107,27.8621152 17.8775846,27.935404 17.6483866,27.984269 C17.4191886,28.0331339 17.1469167,28.0575663 16.831571,28.0575663 C16.5162253,28.0575663 16.203612,27.9523346 15.8937309,27.7418712 C15.5838499,27.5314078 15.3189144,27.225424 15.0989244,26.8239198 C14.9174043,26.5107253 14.6857747,26.2564154 14.4040358,26.0609899 C14.1222969,25.8655645 13.8860801,25.7481209 13.6953854,25.708659 L13.4084408,25.6644956 C13.2079866,25.6644956 13.069557,25.6864188 12.9931521,25.7302654 C12.9167472,25.7741119 12.8929083,25.8304873 12.9216353,25.8993914 C12.9503623,25.9682956 12.9934529,26.0368829 13.050907,26.1051533 C13.1083611,26.1734238 13.1703941,26.2319915 13.2370061,26.2808564 L13.336924,26.3541538 C13.5471712,26.4518665 13.7549701,26.6378974 13.9603209,26.9122466 C14.1656716,27.1865958 14.3160164,27.4362043 14.4113555,27.661072 L14.554364,27.9983735 C14.67843,28.3704354 14.8886689,28.6714094 15.1850804,28.9012955 C15.481492,29.1311815 15.8014334,29.2780674 16.1449045,29.3419532 C16.4883756,29.405839 16.8202406,29.4399742 17.1404995,29.4443589 C17.4607584,29.4487435 17.7256939,29.4315218 17.935306,29.3926936 L18.2644137,29.3335008 C18.2644137,29.7055627 18.2668619,30.1412107 18.2717584,30.6404447 C18.2766548,31.1396787 18.279103,31.4040083 18.279103,31.4334334 C18.279103,31.6094533 18.21707,31.7563392 18.093004,31.8740912 C17.9689379,31.9918431 17.7779507,32.0259784 17.5200424,31.9764969 C15.3045843,31.22297 13.4973793,29.8649774 12.0984276,27.9025191 C10.6994759,25.9400608 10,23.7305118 10,21.2738721 C10,19.2281225 10.4916769,17.3417791 11.4750308,15.6148418 C12.4583846,13.8879045 13.7928551,12.5202092 15.4784422,11.5117558 C17.1640293,10.5033024 19.0045486,9.99938397 21,10.0000006 C22.9954514,10.0006172 24.8359707,10.5045356 26.5215578,11.5117558 C28.2071449,12.518976 29.5416154,13.8866713 30.5249692,15.6148418 C31.5083231,17.3430123 32,19.2293557 32,21.2738721 C31.9990725,23.7324558 31.2995966,25.9420048 29.9006449,27.904446 Z"></path></g></g></g></svg></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="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" 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/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/v6-feature" class="nav-link"><span class="title">ECharts 6 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v6-upgrade-guide" class="nav-link"><span class="title">v5 升级 v6 指南</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-feature" class="nav-link"><span class="title">5.0</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><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-5-0" class="nav-link"><span class="title">5.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/5-6-0" class="nav-link"><span class="title">5.6</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-up"></span></a> <ul class="nav bd-sidenav level2"><li class="nav-item"><a href="/handbook/zh/how-to/label/rich-text" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><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%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE" tabindex="-1">富文本标签</h1> <p>Apache ECharts<sup>TM</sup> 中的文本标签从 v3.7 开始支持富文本模式，能够：</p> <ul><li>定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。</li> <li>对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。</li> <li>在文本中使用图片做小图标或者背景。</li> <li>特定组合以上的规则，可以做出简单表格、分割线等效果。</li></ul> <p>开始下面的介绍之前，先说明一下下面会使用的两个名词的含义：</p> <ul><li>文本块（Text Block）：文本标签块整体。</li> <li>文本片段（Text fragment）：文本标签块中的部分文本。</li></ul> <p>如下图示例：</p> <p><iframe width="450" height="300" src=""></iframe></p> <h2 id="%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9" tabindex="-1">文本样式相关的配置项</h2> <p>echarts 提供了丰富的文本标签配置项，包括：</p> <ul><li>字体基本样式设置：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li> <li>文字颜色：<code>color</code>。</li> <li>文字描边：<code>textBorderColor</code>、<code>textBorderWidth</code>。</li> <li>文字阴影：<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li> <li>文本块或文本片段大小：<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li> <li>文本块或文本片段的对齐：<code>align</code>、<code>verticalAlign</code>。</li> <li>文本块或文本片段的边框、背景（颜色或图片）：<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li> <li>文本块或文本片段的阴影：<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li> <li>文本块的位置和旋转：<code>position</code>、<code>distance</code>、<code>rotate</code>。</li></ul> <p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p> <p>例如：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 在文本中，可以对部分文本采用 rich 中定义样式。</span> |
| <span class="token comment">// 这里需要在文本中使用标记符号：</span> |
| <span class="token comment">// `{styleName|text content text content}` 标记样式名。</span> |
| <span class="token comment">// 注意，换行仍是使用 '\n'。</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token string">'{a|这段文本采用样式a}'</span><span class="token punctuation">,</span> |
| <span class="token string">'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'</span> |
| <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> |
| |
| <span class="token comment">// 这里是文本块的样式设置：</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fontFamily</span><span class="token operator">:</span> <span class="token string">'Arial'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#984455'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">3</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">5</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> |
| |
| <span class="token comment">// rich 里是文本片段的样式设置：</span> |
| <span class="token literal-property property">rich</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">a</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token number">10</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">b</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">image</span><span class="token operator">:</span> <span class="token string">'xxx/xxx.jpg'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">40</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fontFamily</span><span class="token operator">:</span> <span class="token string">'Microsoft YaHei'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#449933'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token number">4</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> <blockquote><p>注意：如果不定义 <code>rich</code>，不能指定文字块的 <code>width</code> 和 <code>height</code>。</p></blockquote> <h2 id="%E6%96%87%E6%9C%AC%E3%80%81%E6%96%87%E6%9C%AC%E6%A1%86%E3%80%81%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%A0%B7%E5%BC%8F%E5%92%8C%E8%A3%85%E9%A5%B0" tabindex="-1">文本、文本框、文本片段的基本样式和装饰</h2> <p>每个文本可以设置基本的字体样式：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p> <p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p> <p>文本框可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p> <p>文本片段也可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p> <p>例如：</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = { |
| series: [ |
| { |
| type: 'scatter', |
| symbolSize: 1, |
| data: [ |
| { |
| value: [0, 0], |
| label: { |
| show: true, |
| formatter: [ |
| 'Plain text', |
| '{textBorder|textBorderColor + textBorderWidth}', |
| '{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}', |
| '{bg|backgroundColor + borderRadius + padding}', |
| '{border|borderColor + borderWidth + borderRadius + padding}', |
| '{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}' |
| ].join('\n'), |
| backgroundColor: '#eee', |
| borderColor: '#333', |
| borderWidth: 2, |
| borderRadius: 5, |
| padding: 10, |
| color: '#000', |
| fontSize: 14, |
| shadowBlur: 3, |
| shadowColor: '#888', |
| shadowOffsetX: 0, |
| shadowOffsetY: 3, |
| lineHeight: 30, |
| rich: { |
| textBorder: { |
| fontSize: 20, |
| textBorderColor: '#000', |
| textBorderWidth: 3, |
| color: '#fff' |
| }, |
| textShadow: { |
| fontSize: 16, |
| textShadowBlur: 5, |
| textShadowColor: '#000', |
| textShadowOffsetX: 3, |
| textShadowOffsetY: 3, |
| color: '#fff' |
| }, |
| bg: { |
| backgroundColor: '#339911', |
| color: '#fff', |
| borderRadius: 15, |
| padding: 5 |
| }, |
| border: { |
| color: '#000', |
| borderColor: '#449911', |
| borderWidth: 1, |
| borderRadius: 3, |
| padding: 5 |
| }, |
| shadow: { |
| backgroundColor: '#992233', |
| padding: 5, |
| color: '#fff', |
| shadowBlur: 5, |
| shadowColor: '#336699', |
| shadowOffsetX: 6, |
| shadowOffsetY: 6 |
| } |
| } |
| } |
| } |
| ] |
| } |
| ], |
| xAxis: { |
| show: false, |
| min: -1, |
| max: 1 |
| }, |
| yAxis: { |
| show: false, |
| min: -1, |
| max: 1 |
| } |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</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">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">symbolSize</span><span class="token operator">:</span> <span class="token number">1</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 punctuation">{</span> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token string">'Plain text'</span><span class="token punctuation">,</span> |
| <span class="token string">'{textBorder|textBorderColor + textBorderWidth}'</span><span class="token punctuation">,</span> |
| <span class="token string">'{textShadow|textShadowColor + textShadowBlur + textShadowOffsetX + textShadowOffsetY}'</span><span class="token punctuation">,</span> |
| <span class="token string">'{bg|backgroundColor + borderRadius + padding}'</span><span class="token punctuation">,</span> |
| <span class="token string">'{border|borderColor + borderWidth + borderRadius + padding}'</span><span class="token punctuation">,</span> |
| <span class="token string">'{shadow|shadowColor + shadowBlur + shadowOffsetX + shadowOffsetY}'</span> |
| <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#eee'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowBlur</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowColor</span><span class="token operator">:</span> <span class="token string">'#888'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowOffsetX</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowOffsetY</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">lineHeight</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">rich</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">textBorder</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">textBorderColor</span><span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">textBorderWidth</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#fff'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">textShadow</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">textShadowBlur</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">textShadowColor</span><span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">textShadowOffsetX</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">textShadowOffsetY</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#fff'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">bg</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#339911'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">5</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">border</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#449911'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">5</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadow</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#992233'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowBlur</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowColor</span><span class="token operator">:</span> <span class="token string">'#336699'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowOffsetX</span><span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowOffsetY</span><span class="token operator">:</span> <span class="token number">6</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> |
| <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">show</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">1</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 literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">1</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</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> <div class="md-live-preview"></div></div> <h2 id="%E6%A0%87%E7%AD%BE%E7%9A%84%E4%BD%8D%E7%BD%AE" tabindex="-1">标签的位置</h2> <p>对于折线图、柱状图、散点图等，均可以使用 <code>label</code> 来设置标签。标签的相对于图形元素的位置，一般使用 <a href="option.html#series-scatter.label.position">label.position</a>、<a href="option.html#series-scatter.label.distance">label.distance</a> 来配置。</p> <p>试试在下面例子中修改<code>position</code>和<code>distance</code> 属性：</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = { |
| series: [ |
| { |
| type: 'scatter', |
| symbolSize: 160, |
| symbol: 'roundRect', |
| data: [[1, 1]], |
| label: { |
| // 修改 position 和 distance 的值试试 |
| // 支持：'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight' |
| position: 'top', |
| distance: 10, |
| |
| show: true, |
| formatter: ['Label Text'].join('\n'), |
| backgroundColor: '#eee', |
| borderColor: '#555', |
| borderWidth: 2, |
| borderRadius: 5, |
| padding: 10, |
| fontSize: 18, |
| shadowBlur: 3, |
| shadowColor: '#888', |
| shadowOffsetX: 0, |
| shadowOffsetY: 3, |
| textBorderColor: '#000', |
| textBorderWidth: 3, |
| color: '#fff' |
| } |
| } |
| ], |
| xAxis: { |
| max: 2 |
| }, |
| yAxis: { |
| max: 2 |
| } |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</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">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">symbolSize</span><span class="token operator">:</span> <span class="token number">160</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">symbol</span><span class="token operator">:</span> <span class="token string">'roundRect'</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 punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 修改 position 和 distance 的值试试</span> |
| <span class="token comment">// 支持：'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'</span> |
| <span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token string">'top'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">distance</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> |
| |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'Label Text'</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#eee'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#555'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowBlur</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowColor</span><span class="token operator">:</span> <span class="token string">'#888'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowOffsetX</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowOffsetY</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">textBorderColor</span><span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">textBorderWidth</span><span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#fff'</span> |
| <span class="token punctuation">}</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">max</span><span class="token operator">:</span> <span class="token number">2</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 literal-property property">max</span><span class="token operator">:</span> <span class="token number">2</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</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> <div class="md-live-preview"></div></div> <blockquote><p>注意：<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href="https://echarts.apache.org/option.html">option 文档</a>。</p></blockquote> <h2 id="%E6%A0%87%E7%AD%BE%E7%9A%84%E6%97%8B%E8%BD%AC" tabindex="-1">标签的旋转</h2> <p>某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">const labelOption = { |
| show: true, |
| rotate: 90, |
| formatter: '{c} {name|{a}}', |
| fontSize: 16, |
| rich: { |
| name: {} |
| } |
| }; |
| |
| option = { |
| xAxis: [ |
| { |
| type: 'category', |
| data: ['2012', '2013', '2014', '2015', '2016'] |
| } |
| ], |
| yAxis: [ |
| { |
| type: 'value' |
| } |
| ], |
| series: [ |
| { |
| name: 'Forest', |
| type: 'bar', |
| barGap: 0, |
| label: labelOption, |
| emphasis: { |
| focus: 'series' |
| }, |
| data: [320, 332, 301, 334, 390] |
| }, |
| { |
| name: 'Steppe', |
| type: 'bar', |
| label: labelOption, |
| emphasis: { |
| focus: 'series' |
| }, |
| data: [220, 182, 191, 234, 290] |
| } |
| ] |
| };</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">const</span> labelOption <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">rotate</span><span class="token operator">:</span> <span class="token number">90</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'{c} {name|{a}}'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">rich</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</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> |
| |
| option <span class="token operator">=</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 punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'category'</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">'2012'</span><span class="token punctuation">,</span> <span class="token string">'2013'</span><span class="token punctuation">,</span> <span class="token string">'2014'</span><span class="token punctuation">,</span> <span class="token string">'2015'</span><span class="token punctuation">,</span> <span class="token string">'2016'</span><span class="token punctuation">]</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 literal-property property">type</span><span class="token operator">:</span> <span class="token string">'value'</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">'Forest'</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">barGap</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</span><span class="token operator">:</span> labelOption<span class="token punctuation">,</span> |
| <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">focus</span><span class="token operator">:</span> <span class="token string">'series'</span> |
| <span class="token punctuation">}</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">320</span><span class="token punctuation">,</span> <span class="token number">332</span><span class="token punctuation">,</span> <span class="token number">301</span><span class="token punctuation">,</span> <span class="token number">334</span><span class="token punctuation">,</span> <span class="token number">390</span><span class="token punctuation">]</span> |
| <span class="token punctuation">}</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">'Steppe'</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">label</span><span class="token operator">:</span> labelOption<span class="token punctuation">,</span> |
| <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">focus</span><span class="token operator">:</span> <span class="token string">'series'</span> |
| <span class="token punctuation">}</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">220</span><span class="token punctuation">,</span> <span class="token number">182</span><span class="token punctuation">,</span> <span class="token number">191</span><span class="token punctuation">,</span> <span class="token number">234</span><span class="token punctuation">,</span> <span class="token number">290</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><br></pre></div></div></div> <div class="md-live-tag">live</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> <div class="md-live-preview"></div></div> <p>这种场景下，可以结合 <a href="option.html#series-bar.label.align">align</a> 和 <a href="option.html#series-bar.label.verticalAlign">verticalAlign</a> 来调整标签位置。</p> <p>注意，逻辑是，先使用 <code>align</code> 和 <code>verticalAlign</code> 定位，再旋转。</p> <h2 id="%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E6%8E%92%E7%89%88%E5%92%8C%E5%AF%B9%E9%BD%90" tabindex="-1">文本片段的排版和对齐</h2> <p>关于排版方式，每个文本片段，可以想象成 CSS 中的 <code>inline-block</code>，在文档流中按行放置。</p> <p>每个文本片段的内容盒尺寸（<code>content box size</code>），默认是根据文字大小决定的。但是，也可以设置 <code>width</code>、<code>height</code> 来强制指定，虽然一般不会这么做（参见下文）。文本片段的边框盒尺寸（<code>border box size</code>），由上述本身尺寸，加上文本片段的 <code>padding</code> 来得到。</p> <p>只有 <code>'\n'</code> 是换行符，能导致换行。</p> <p>一行内，会有多个文本片段。每行的实际高度，由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定，也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中，如果都不指定，则取文本片段的边框盒尺寸（<code>border box size</code>）。</p> <p>在一行的 <code>lineHeight</code> 被决定后，一行内，文本片段的竖直位置，由文本片段的 <code>verticalAlign</code> 来指定（这里和 CSS 中的规则稍有不同）：</p> <ul><li><code>'bottom'</code>：文本片段的盒的底边贴住行底。</li> <li><code>'top'</code>：文本片段的盒的顶边贴住行顶。</li> <li><code>'middle'</code>：居行中。</li></ul> <p>文本块的宽度，可以直接由文本块的 <code>width</code> 指定，否则，由最长的行决定。宽度决定后，在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置：</p> <ul><li>首先，从左向右连续紧靠放置 <code>align</code> 为 <code>'left'</code> 的文本片段盒。</li> <li>然后，从右向左连续紧靠放置 <code>align</code> 为 <code>'right'</code> 的文本片段盒。</li> <li>最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置。</li></ul> <p>关于文字在文本片段盒中的位置：</p> <ul><li>如果 <code>align</code> 为 <code>'center'</code>，则文字在文本片段盒中是居中的。</li> <li>如果 <code>align</code> 为 <code>'left'</code>，则文字在文本片段盒中是居左的。</li> <li>如果 <code>align</code> 为 <code>'right'</code>，则文字在文本片段盒中是居右的。</li></ul> <h2 id="%E7%89%B9%E6%AE%8A%E6%95%88%E6%9E%9C%EF%BC%9A%E5%9B%BE%E6%A0%87%E3%80%81%E5%88%86%E5%89%B2%E7%BA%BF%E3%80%81%E6%A0%87%E9%A2%98%E5%9D%97%E3%80%81%E7%AE%80%E5%8D%95%E8%A1%A8%E6%A0%BC" tabindex="-1">特殊效果：图标、分割线、标题块、简单表格</h2> <p>看下面的例子：</p> <div class="md-live layout-lr"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">option = { |
| series: [ |
| { |
| type: 'scatter', |
| data: [ |
| { |
| value: [0, 0], |
| label: { |
| formatter: [ |
| '{tc|Center Title}{titleBg|}', |
| ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ', |
| '{hr|}', |
| ' xxxxx {showers|} xxxxxxxx xxxxxxxxx ' |
| ].join('\n'), |
| rich: { |
| titleBg: { |
| align: 'right' |
| } |
| } |
| } |
| }, |
| { |
| value: [0, 1], |
| label: { |
| formatter: [ |
| '{titleBg|Left Title}', |
| ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ', |
| '{hr|}', |
| ' xxxxx {showers|} xxxxxxxx xxxxxxxxx ' |
| ].join('\n') |
| } |
| }, |
| { |
| value: [0, 2], |
| label: { |
| formatter: [ |
| '{titleBg|Right Title}', |
| ' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} ', |
| '{hr|}', |
| ' xxxxx {showers|} xxxxxxxx xxxxxxxxx ' |
| ].join('\n'), |
| rich: { |
| titleBg: { |
| align: 'right' |
| } |
| } |
| } |
| } |
| ], |
| symbolSize: 1, |
| label: { |
| show: true, |
| backgroundColor: '#ddd', |
| borderColor: '#555', |
| borderWidth: 1, |
| borderRadius: 5, |
| color: '#000', |
| fontSize: 14, |
| rich: { |
| titleBg: { |
| backgroundColor: '#000', |
| height: 30, |
| borderRadius: [5, 5, 0, 0], |
| padding: [0, 10, 0, 10], |
| width: '100%', |
| color: '#eee' |
| }, |
| tc: { |
| align: 'center', |
| color: '#eee' |
| }, |
| hr: { |
| borderColor: '#777', |
| width: '100%', |
| borderWidth: 0.5, |
| height: 0 |
| }, |
| sunny: { |
| height: 30, |
| align: 'left', |
| backgroundColor: { |
| image: |
| 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png' |
| } |
| }, |
| cloudy: { |
| height: 30, |
| align: 'left', |
| backgroundColor: { |
| image: |
| 'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png' |
| } |
| }, |
| showers: { |
| height: 30, |
| align: 'left', |
| backgroundColor: { |
| image: |
| 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png' |
| } |
| } |
| } |
| } |
| } |
| ], |
| xAxis: { |
| show: false, |
| min: -1, |
| max: 1 |
| }, |
| yAxis: { |
| show: false, |
| min: 0, |
| max: 2, |
| inverse: true |
| } |
| };</textarea><pre data-testid="preview" class="prism-editor__editor">option <span class="token operator">=</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">type</span><span class="token operator">:</span> <span class="token string">'scatter'</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 punctuation">{</span> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token string">'{tc|Center Title}{titleBg|}'</span><span class="token punctuation">,</span> |
| <span class="token string">' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} '</span><span class="token punctuation">,</span> |
| <span class="token string">'{hr|}'</span><span class="token punctuation">,</span> |
| <span class="token string">' xxxxx {showers|} xxxxxxxx xxxxxxxxx '</span> |
| <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">rich</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">titleBg</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'right'</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> |
| <span class="token literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token string">'{titleBg|Left Title}'</span><span class="token punctuation">,</span> |
| <span class="token string">' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} '</span><span class="token punctuation">,</span> |
| <span class="token string">'{hr|}'</span><span class="token punctuation">,</span> |
| <span class="token string">' xxxxx {showers|} xxxxxxxx xxxxxxxxx '</span> |
| <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</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 literal-property property">value</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token string">'{titleBg|Right Title}'</span><span class="token punctuation">,</span> |
| <span class="token string">' Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|} '</span><span class="token punctuation">,</span> |
| <span class="token string">'{hr|}'</span><span class="token punctuation">,</span> |
| <span class="token string">' xxxxx {showers|} xxxxxxxx xxxxxxxxx '</span> |
| <span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">rich</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">titleBg</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'right'</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> |
| <span class="token literal-property property">symbolSize</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#ddd'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#555'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderRadius</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">fontSize</span><span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">rich</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">titleBg</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderRadius</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">5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#eee'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">tc</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#eee'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">hr</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#777'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">0</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">sunny</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">image</span><span class="token operator">:</span> |
| <span class="token string">'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">cloudy</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">image</span><span class="token operator">:</span> |
| <span class="token string">'https://echarts.apache.org/examples/data/asset/img/weather/cloudy_128.png'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">showers</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">image</span><span class="token operator">:</span> |
| <span class="token string">'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'</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><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">show</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">1</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 literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">min</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">max</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">inverse</span><span class="token operator">:</span> <span class="token boolean">true</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span><br></pre></div></div></div> <div class="md-live-tag">live</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> <div class="md-live-preview"></div></div> <p>文本片段的 <code>backgroundColor</code> 可以指定为图片后，就可以在文本中使用图标了：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">rich</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">Sunny</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 这样设定 backgroundColor 就可以是图片了。</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">image</span><span class="token operator">:</span> <span class="token string">'./data/asset/img/weather/sunny_128.png'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">// 可以只指定图片的高度，从而图片的宽度根据图片的长宽比自动得到。</span> |
| <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">30</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> <p>分割线实际是用 border 实现的：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">rich</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">hr</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">borderColor</span><span class="token operator">:</span> <span class="token string">'#777'</span><span class="token punctuation">,</span> |
| <span class="token comment">// 这里把 width 设置为 '100%'，表示分割线的长度充满文本块。</span> |
| <span class="token comment">// 注意，这里是文本块内容盒（content box）的 100%，而不包含 padding。</span> |
| <span class="token comment">// 虽然这和 CSS 相关的定义有所不同，但是在这类场景中更加方便。</span> |
| <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderWidth</span><span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">0</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> <p>标题块是使用 <code>backgroundColor</code> 实现的：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>labelOption <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 标题文字居左</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'{titleBg|Left Title}'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">rich</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">titleBg</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderRadius</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">5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#eee'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">;</span> |
| |
| <span class="token comment">// 标题文字居中。</span> |
| <span class="token comment">// 这个实现有些 tricky，但是，能够不引入更复杂的排版规则而实现这个效果。</span> |
| labelOption <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'{tc|Center Title}{titleBg|}'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">rich</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">titleBg</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">align</span><span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">borderRadius</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">5</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">padding</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#eee'</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> <p>简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 <a href="https://echarts.apache.org/examples/zh/editor.html?c=pie-rich-text">该例子</a></p></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/how-to/label/rich-text.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/plainheart" target="_blank" class="post-contributor"><span>plainheart</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><span>pissang</span></a></div></div></div></div></div></div></div></div></div></div><script>window.__NUXT__=function(g,I,C,A,i,e,d,o,t,l,c,a,n,r,h,s,b,p,Z,m,B,G,H,y,W,w,v,J,Y,u,E,L,R,M,K,D,z,x,f,N,O,V,X,S,j,k,F,Q,T,U,q,P,_,$,gg,Ig,Cg,Ag,ig,eg){return{layout:"default",data:[{html:'<h1 id="%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE" tabindex="-1">富文本标签</h1>\n<p>Apache ECharts<sup>TM</sup> 中的文本标签从 v3.7 开始支持富文本模式，能够：</p>\n<ul>\n<li>定制文本块整体的样式（如背景、边框、阴影等）、位置、旋转等。</li>\n<li>对文本块中个别片段定义样式（如颜色、字体、高宽、背景、阴影等）、对齐方式等。</li>\n<li>在文本中使用图片做小图标或者背景。</li>\n<li>特定组合以上的规则，可以做出简单表格、分割线等效果。</li>\n</ul>\n<p>开始下面的介绍之前，先说明一下下面会使用的两个名词的含义：</p>\n<ul>\n<li>文本块（Text Block）：文本标签块整体。</li>\n<li>文本片段（Text fragment）：文本标签块中的部分文本。</li>\n</ul>\n<p>如下图示例：</p>\n<p><md-example src="doc-example/text-block-fragment" width="450" height="300"></md-example></p>\n<h2 id="%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F%E7%9B%B8%E5%85%B3%E7%9A%84%E9%85%8D%E7%BD%AE%E9%A1%B9" tabindex="-1">文本样式相关的配置项</h2>\n<p>echarts 提供了丰富的文本标签配置项，包括：</p>\n<ul>\n<li>字体基本样式设置：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</li>\n<li>文字颜色：<code>color</code>。</li>\n<li>文字描边：<code>textBorderColor</code>、<code>textBorderWidth</code>。</li>\n<li>文字阴影：<code>textShadowColor</code>、<code>textShadowBlur</code>、<code>textShadowOffsetX</code>、<code>textShadowOffsetY</code>。</li>\n<li>文本块或文本片段大小：<code>lineHeight</code>、<code>width</code>、<code>height</code>、<code>padding</code>。</li>\n<li>文本块或文本片段的对齐：<code>align</code>、<code>verticalAlign</code>。</li>\n<li>文本块或文本片段的边框、背景（颜色或图片）：<code>backgroundColor</code>、<code>borderColor</code>、<code>borderWidth</code>、<code>borderRadius</code>。</li>\n<li>文本块或文本片段的阴影：<code>shadowColor</code>、<code>shadowBlur</code>、<code>shadowOffsetX</code>、<code>shadowOffsetY</code>。</li>\n<li>文本块的位置和旋转：<code>position</code>、<code>distance</code>、<code>rotate</code>。</li>\n</ul>\n<p>可以在各处的 <code>rich</code> 属性中定义文本片段样式。例如 <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p>\n<p>例如：</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgLy8g5Zyo5paH5pys5Lit77yM5Y-v5Lul5a-56YOo5YiG5paH5pys6YeH55SoIHJpY2gg5Lit5a6a5LmJ5qC35byP44CCCiAgLy8g6L-Z6YeM6ZyA6KaB5Zyo5paH5pys5Lit5L2_55So5qCH6K6w56ym5Y-377yaCiAgLy8gYHtzdHlsZU5hbWV8dGV4dCBjb250ZW50IHRleHQgY29udGVudH1gIOagh-iusOagt-W8j-WQjeOAggogIC8vIOazqOaEj--8jOaNouihjOS7jeaYr-S9v-eUqCAnXG4n44CCCiAgZm9ybWF0dGVyOiBbCiAgICAne2F86L-Z5q615paH5pys6YeH55So5qC35byPYX0nLAogICAgJ3tifOi_meauteaWh-acrOmHh-eUqOagt-W8j2J96L-Z5q6155So6buY6K6k5qC35byPe3h86L-Z5q6155So5qC35byPeH0nCiAgXS5qb2luKCdcbicpLAoKICAvLyDov5nph4zmmK_mlofmnKzlnZfnmoTmoLflvI_orr7nva7vvJoKICBjb2xvcjogJyMzMzMnLAogIGZvbnRTaXplOiA1LAogIGZvbnRGYW1pbHk6ICdBcmlhbCcsCiAgYm9yZGVyV2lkdGg6IDMsCiAgYmFja2dyb3VuZENvbG9yOiAnIzk4NDQ1NScsCiAgcGFkZGluZzogWzMsIDEwLCAxMCwgNV0sCiAgbGluZUhlaWdodDogMjAsCgogIC8vIHJpY2gg6YeM5piv5paH5pys54mH5q6155qE5qC35byP6K6-572u77yaCiAgcmljaDogewogICAgYTogewogICAgICBjb2xvcjogJ3JlZCcsCiAgICAgIGxpbmVIZWlnaHQ6IDEwCiAgICB9LAogICAgYjogewogICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICBpbWFnZTogJ3h4eC94eHguanBnJwogICAgICB9LAogICAgICBoZWlnaHQ6IDQwCiAgICB9LAogICAgeDogewogICAgICBmb250U2l6ZTogMTgsCiAgICAgIGZvbnRGYW1pbHk6ICdNaWNyb3NvZnQgWWFIZWknLAogICAgICBib3JkZXJDb2xvcjogJyM0NDk5MzMnLAogICAgICBib3JkZXJSYWRpdXM6IDQKICAgIH0KICB9Cn07\'" line-highlights="\'\'" />\n<blockquote>\n<p>注意：如果不定义 <code>rich</code>，不能指定文字块的 <code>width</code> 和 <code>height</code>。</p>\n</blockquote>\n<h2 id="%E6%96%87%E6%9C%AC%E3%80%81%E6%96%87%E6%9C%AC%E6%A1%86%E3%80%81%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%A0%B7%E5%BC%8F%E5%92%8C%E8%A3%85%E9%A5%B0" tabindex="-1">文本、文本框、文本片段的基本样式和装饰</h2>\n<p>每个文本可以设置基本的字体样式：<code>fontStyle</code>、<code>fontWeight</code>、<code>fontSize</code>、<code>fontFamily</code>。</p>\n<p>可以设置文字的颜色 <code>color</code> 和边框的颜色 <code>textBorderColor</code>、<code>textBorderWidth</code>。</p>\n<p>文本框可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>文本片段也可以设置边框和背景的样式：<code>borderColor</code>、<code>borderWidth</code>、<code>backgroundColor</code>、<code>padding</code>。</p>\n<p>例如：</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgJ1BsYWluIHRleHQnLAogICAgICAgICAgICAgICd7dGV4dEJvcmRlcnx0ZXh0Qm9yZGVyQ29sb3IgKyB0ZXh0Qm9yZGVyV2lkdGh9JywKICAgICAgICAgICAgICAne3RleHRTaGFkb3d8dGV4dFNoYWRvd0NvbG9yICsgdGV4dFNoYWRvd0JsdXIgKyB0ZXh0U2hhZG93T2Zmc2V0WCArIHRleHRTaGFkb3dPZmZzZXRZfScsCiAgICAgICAgICAgICAgJ3tiZ3xiYWNrZ3JvdW5kQ29sb3IgKyBib3JkZXJSYWRpdXMgKyBwYWRkaW5nfScsCiAgICAgICAgICAgICAgJ3tib3JkZXJ8Ym9yZGVyQ29sb3IgKyBib3JkZXJXaWR0aCArIGJvcmRlclJhZGl1cyArIHBhZGRpbmd9JywKICAgICAgICAgICAgICAne3NoYWRvd3xzaGFkb3dDb2xvciArIHNoYWRvd0JsdXIgKyBzaGFkb3dPZmZzZXRYICsgc2hhZG93T2Zmc2V0WX0nCiAgICAgICAgICAgIF0uam9pbignXG4nKSwKICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2VlZScsCiAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzMzMycsCiAgICAgICAgICAgIGJvcmRlcldpZHRoOiAyLAogICAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICAgIHBhZGRpbmc6IDEwLAogICAgICAgICAgICBjb2xvcjogJyMwMDAnLAogICAgICAgICAgICBmb250U2l6ZTogMTQsCiAgICAgICAgICAgIHNoYWRvd0JsdXI6IDMsCiAgICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzg4OCcsCiAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDAsCiAgICAgICAgICAgIHNoYWRvd09mZnNldFk6IDMsCiAgICAgICAgICAgIGxpbmVIZWlnaHQ6IDMwLAogICAgICAgICAgICByaWNoOiB7CiAgICAgICAgICAgICAgdGV4dEJvcmRlcjogewogICAgICAgICAgICAgICAgZm9udFNpemU6IDIwLAogICAgICAgICAgICAgICAgdGV4dEJvcmRlckNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICB0ZXh0Qm9yZGVyV2lkdGg6IDMsCiAgICAgICAgICAgICAgICBjb2xvcjogJyNmZmYnCiAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICB0ZXh0U2hhZG93OiB7CiAgICAgICAgICAgICAgICBmb250U2l6ZTogMTYsCiAgICAgICAgICAgICAgICB0ZXh0U2hhZG93Qmx1cjogNSwKICAgICAgICAgICAgICAgIHRleHRTaGFkb3dDb2xvcjogJyMwMDAnLAogICAgICAgICAgICAgICAgdGV4dFNoYWRvd09mZnNldFg6IDMsCiAgICAgICAgICAgICAgICB0ZXh0U2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICAgIGNvbG9yOiAnI2ZmZicKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIGJnOiB7CiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICcjMzM5OTExJywKICAgICAgICAgICAgICAgIGNvbG9yOiAnI2ZmZicsCiAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDE1LAogICAgICAgICAgICAgICAgcGFkZGluZzogNQogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgYm9yZGVyOiB7CiAgICAgICAgICAgICAgICBjb2xvcjogJyMwMDAnLAogICAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICcjNDQ5OTExJywKICAgICAgICAgICAgICAgIGJvcmRlcldpZHRoOiAxLAogICAgICAgICAgICAgICAgYm9yZGVyUmFkaXVzOiAzLAogICAgICAgICAgICAgICAgcGFkZGluZzogNQogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgc2hhZG93OiB7CiAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICcjOTkyMjMzJywKICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUsCiAgICAgICAgICAgICAgICBjb2xvcjogJyNmZmYnLAogICAgICAgICAgICAgICAgc2hhZG93Qmx1cjogNSwKICAgICAgICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzMzNjY5OScsCiAgICAgICAgICAgICAgICBzaGFkb3dPZmZzZXRYOiA2LAogICAgICAgICAgICAgICAgc2hhZG93T2Zmc2V0WTogNgogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfQogICAgICAgICAgfQogICAgICAgIH0KICAgICAgXQogICAgfQogIF0sCiAgeEF4aXM6IHsKICAgIHNob3c6IGZhbHNlLAogICAgbWluOiAtMSwKICAgIG1heDogMQogIH0sCiAgeUF4aXM6IHsKICAgIHNob3c6IGZhbHNlLAogICAgbWluOiAtMSwKICAgIG1heDogMQogIH0KfTs\'" v-bind="{}" />\n<h2 id="%E6%A0%87%E7%AD%BE%E7%9A%84%E4%BD%8D%E7%BD%AE" tabindex="-1">标签的位置</h2>\n<p>对于折线图、柱状图、散点图等，均可以使用 <code>label</code> 来设置标签。标签的相对于图形元素的位置，一般使用 <a href="option.html#series-scatter.label.position">label.position</a>、<a href="option.html#series-scatter.label.distance">label.distance</a> 来配置。</p>\n<p>试试在下面例子中修改<code>position</code>和<code>distance</code> 属性：</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDE2MCwKICAgICAgc3ltYm9sOiAncm91bmRSZWN0JywKICAgICAgZGF0YTogW1sxLCAxXV0sCiAgICAgIGxhYmVsOiB7CiAgICAgICAgLy8g5L-u5pS5IHBvc2l0aW9uIOWSjCBkaXN0YW5jZSDnmoTlgLzor5Xor5UKICAgICAgICAvLyDmlK_mjIHvvJonbGVmdCcsICdyaWdodCcsICd0b3AnLCAnYm90dG9tJywgJ2luc2lkZScsICdpbnNpZGVUb3AnLCAnaW5zaWRlTGVmdCcsICdpbnNpZGVSaWdodCcsICdpbnNpZGVCb3R0b20nLCAnaW5zaWRlVG9wTGVmdCcsICdpbnNpZGVUb3BSaWdodCcsICdpbnNpZGVCb3R0b21MZWZ0JywgJ2luc2lkZUJvdHRvbVJpZ2h0JwogICAgICAgIHBvc2l0aW9uOiAndG9wJywKICAgICAgICBkaXN0YW5jZTogMTAsCgogICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgZm9ybWF0dGVyOiBbJ0xhYmVsIFRleHQnXS5qb2luKCdcbicpLAogICAgICAgIGJhY2tncm91bmRDb2xvcjogJyNlZWUnLAogICAgICAgIGJvcmRlckNvbG9yOiAnIzU1NScsCiAgICAgICAgYm9yZGVyV2lkdGg6IDIsCiAgICAgICAgYm9yZGVyUmFkaXVzOiA1LAogICAgICAgIHBhZGRpbmc6IDEwLAogICAgICAgIGZvbnRTaXplOiAxOCwKICAgICAgICBzaGFkb3dCbHVyOiAzLAogICAgICAgIHNoYWRvd0NvbG9yOiAnIzg4OCcsCiAgICAgICAgc2hhZG93T2Zmc2V0WDogMCwKICAgICAgICBzaGFkb3dPZmZzZXRZOiAzLAogICAgICAgIHRleHRCb3JkZXJDb2xvcjogJyMwMDAnLAogICAgICAgIHRleHRCb3JkZXJXaWR0aDogMywKICAgICAgICBjb2xvcjogJyNmZmYnCiAgICAgIH0KICAgIH0KICBdLAogIHhBeGlzOiB7CiAgICBtYXg6IDIKICB9LAogIHlBeGlzOiB7CiAgICBtYXg6IDIKICB9Cn07\'" v-bind="{}" />\n<blockquote>\n<p>注意：<code>position</code> 在不同的图中可取值有所不同。<code>distance</code> 并不是在每个图中都支持。详情请参见 <a href="https://echarts.apache.org/option.html">option 文档</a>。</p>\n</blockquote>\n<h2 id="%E6%A0%87%E7%AD%BE%E7%9A%84%E6%97%8B%E8%BD%AC" tabindex="-1">标签的旋转</h2>\n<p>某些图中，为了能有足够长的空间来显示标签，需要对标签进行旋转。例如：</p>\n<md-live lang="js" code="\'Y29uc3QgbGFiZWxPcHRpb24gPSB7CiAgc2hvdzogdHJ1ZSwKICByb3RhdGU6IDkwLAogIGZvcm1hdHRlcjogJ3tjfSAge25hbWV8e2F9fScsCiAgZm9udFNpemU6IDE2LAogIHJpY2g6IHsKICAgIG5hbWU6IHt9CiAgfQp9OwoKb3B0aW9uID0gewogIHhBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICAgIGRhdGE6IFsnMjAxMicsICcyMDEzJywgJzIwMTQnLCAnMjAxNScsICcyMDE2J10KICAgIH0KICBdLAogIHlBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScKICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnRm9yZXN0JywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGJhckdhcDogMCwKICAgICAgbGFiZWw6IGxhYmVsT3B0aW9uLAogICAgICBlbXBoYXNpczogewogICAgICAgIGZvY3VzOiAnc2VyaWVzJwogICAgICB9LAogICAgICBkYXRhOiBbMzIwLCAzMzIsIDMwMSwgMzM0LCAzOTBdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnU3RlcHBlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGxhYmVsOiBsYWJlbE9wdGlvbiwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycKICAgICAgfSwKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwXQogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p>这种场景下，可以结合 <a href="option.html#series-bar.label.align">align</a> 和 <a href="option.html#series-bar.label.verticalAlign">verticalAlign</a> 来调整标签位置。</p>\n<p>注意，逻辑是，先使用 <code>align</code> 和 <code>verticalAlign</code> 定位，再旋转。</p>\n<h2 id="%E6%96%87%E6%9C%AC%E7%89%87%E6%AE%B5%E7%9A%84%E6%8E%92%E7%89%88%E5%92%8C%E5%AF%B9%E9%BD%90" tabindex="-1">文本片段的排版和对齐</h2>\n<p>关于排版方式，每个文本片段，可以想象成 CSS 中的 <code>inline-block</code>，在文档流中按行放置。</p>\n<p>每个文本片段的内容盒尺寸（<code>content box size</code>），默认是根据文字大小决定的。但是，也可以设置 <code>width</code>、<code>height</code> 来强制指定，虽然一般不会这么做（参见下文）。文本片段的边框盒尺寸（<code>border box size</code>），由上述本身尺寸，加上文本片段的 <code>padding</code> 来得到。</p>\n<p>只有 <code>\'\\n\'</code> 是换行符，能导致换行。</p>\n<p>一行内，会有多个文本片段。每行的实际高度，由 <code>lineHeight</code> 最大的文本片段决定。文本片段的 <code>lineHeight</code> 可直接在 <code>rich</code> 中指定，也可以在 <code>rich</code> 的父层级中统一指定而采用到 <code>rich</code> 的所有项中，如果都不指定，则取文本片段的边框盒尺寸（<code>border box size</code>）。</p>\n<p>在一行的 <code>lineHeight</code> 被决定后，一行内，文本片段的竖直位置，由文本片段的 <code>verticalAlign</code> 来指定（这里和 CSS 中的规则稍有不同）：</p>\n<ul>\n<li><code>\'bottom\'</code>：文本片段的盒的底边贴住行底。</li>\n<li><code>\'top\'</code>：文本片段的盒的顶边贴住行顶。</li>\n<li><code>\'middle\'</code>：居行中。</li>\n</ul>\n<p>文本块的宽度，可以直接由文本块的 <code>width</code> 指定，否则，由最长的行决定。宽度决定后，在一行中进行文本片段的放置。文本片段的 <code>align</code> 决定了文本片段在行中的水平位置：</p>\n<ul>\n<li>首先，从左向右连续紧靠放置 <code>align</code> 为 <code>\'left\'</code> 的文本片段盒。</li>\n<li>然后，从右向左连续紧靠放置 <code>align</code> 为 <code>\'right\'</code> 的文本片段盒。</li>\n<li>最后，剩余的没处理的文本片段盒，紧贴着，在中间剩余的区域中居中放置。</li>\n</ul>\n<p>关于文字在文本片段盒中的位置：</p>\n<ul>\n<li>如果 <code>align</code> 为 <code>\'center\'</code>，则文字在文本片段盒中是居中的。</li>\n<li>如果 <code>align</code> 为 <code>\'left\'</code>，则文字在文本片段盒中是居左的。</li>\n<li>如果 <code>align</code> 为 <code>\'right\'</code>，则文字在文本片段盒中是居右的。</li>\n</ul>\n<h2 id="%E7%89%B9%E6%AE%8A%E6%95%88%E6%9E%9C%EF%BC%9A%E5%9B%BE%E6%A0%87%E3%80%81%E5%88%86%E5%89%B2%E7%BA%BF%E3%80%81%E6%A0%87%E9%A2%98%E5%9D%97%E3%80%81%E7%AE%80%E5%8D%95%E8%A1%A8%E6%A0%BC" tabindex="-1">特殊效果：图标、分割线、标题块、简单表格</h2>\n<p>看下面的例子：</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgJ3t0Y3xDZW50ZXIgVGl0bGV9e3RpdGxlQmd8fScsCiAgICAgICAgICAgICAgJyAgQ29udGVudCB0ZXh0IHh4eHh4eHh4IHtzdW5ueXx9IHh4eHh4eHh4IHtjbG91ZHl8fSAgJywKICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICcgIHh4eHh4IHtzaG93ZXJzfH0geHh4eHh4eHggIHh4eHh4eHh4eCAgJwogICAgICAgICAgICBdLmpvaW4oJ1xuJyksCiAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICB0aXRsZUJnOiB7CiAgICAgICAgICAgICAgICBhbGlnbjogJ3JpZ2h0JwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfQogICAgICAgICAgfQogICAgICAgIH0sCiAgICAgICAgewogICAgICAgICAgdmFsdWU6IFswLCAxXSwKICAgICAgICAgIGxhYmVsOiB7CiAgICAgICAgICAgIGZvcm1hdHRlcjogWwogICAgICAgICAgICAgICd7dGl0bGVCZ3xMZWZ0IFRpdGxlfScsCiAgICAgICAgICAgICAgJyAgQ29udGVudCB0ZXh0IHh4eHh4eHh4IHtzdW5ueXx9IHh4eHh4eHh4IHtjbG91ZHl8fSAgJywKICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICcgIHh4eHh4IHtzaG93ZXJzfH0geHh4eHh4eHggIHh4eHh4eHh4eCAgJwogICAgICAgICAgICBdLmpvaW4oJ1xuJykKICAgICAgICAgIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiBbMCwgMl0sCiAgICAgICAgICBsYWJlbDogewogICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAne3RpdGxlQmd8UmlnaHQgVGl0bGV9JywKICAgICAgICAgICAgICAnICBDb250ZW50IHRleHQgeHh4eHh4eHgge3N1bm55fH0geHh4eHh4eHgge2Nsb3VkeXx9ICAnLAogICAgICAgICAgICAgICd7aHJ8fScsCiAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgIF0uam9pbignXG4nKSwKICAgICAgICAgICAgcmljaDogewogICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgIGFsaWduOiAncmlnaHQnCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICBdLAogICAgICBzeW1ib2xTaXplOiAxLAogICAgICBsYWJlbDogewogICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2RkZCcsCiAgICAgICAgYm9yZGVyQ29sb3I6ICcjNTU1JywKICAgICAgICBib3JkZXJXaWR0aDogMSwKICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgY29sb3I6ICcjMDAwJywKICAgICAgICBmb250U2l6ZTogMTQsCiAgICAgICAgcmljaDogewogICAgICAgICAgdGl0bGVCZzogewogICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICcjMDAwJywKICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgYm9yZGVyUmFkaXVzOiBbNSwgNSwgMCwgMF0sCiAgICAgICAgICAgIHBhZGRpbmc6IFswLCAxMCwgMCwgMTBdLAogICAgICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgICAgICBjb2xvcjogJyNlZWUnCiAgICAgICAgICB9LAogICAgICAgICAgdGM6IHsKICAgICAgICAgICAgYWxpZ246ICdjZW50ZXInLAogICAgICAgICAgICBjb2xvcjogJyNlZWUnCiAgICAgICAgICB9LAogICAgICAgICAgaHI6IHsKICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICcjNzc3JywKICAgICAgICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgICAgICAgYm9yZGVyV2lkdGg6IDAuNSwKICAgICAgICAgICAgaGVpZ2h0OiAwCiAgICAgICAgICB9LAogICAgICAgICAgc3Vubnk6IHsKICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiB7CiAgICAgICAgICAgICAgaW1hZ2U6CiAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zdW5ueV8xMjgucG5nJwogICAgICAgICAgICB9CiAgICAgICAgICB9LAogICAgICAgICAgY2xvdWR5OiB7CiAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgIGFsaWduOiAnbGVmdCcsCiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogewogICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgJ2h0dHBzOi8vZWNoYXJ0cy5hcGFjaGUub3JnL2V4YW1wbGVzL2RhdGEvYXNzZXQvaW1nL3dlYXRoZXIvY2xvdWR5XzEyOC5wbmcnCiAgICAgICAgICAgIH0KICAgICAgICAgIH0sCiAgICAgICAgICBzaG93ZXJzOiB7CiAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgIGFsaWduOiAnbGVmdCcsCiAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogewogICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgJ2h0dHBzOi8vZWNoYXJ0cy5hcGFjaGUub3JnL2V4YW1wbGVzL2RhdGEvYXNzZXQvaW1nL3dlYXRoZXIvc2hvd2Vyc18xMjgucG5nJwogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXSwKICB4QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IC0xLAogICAgbWF4OiAxCiAgfSwKICB5QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IDAsCiAgICBtYXg6IDIsCiAgICBpbnZlcnNlOiB0cnVlCiAgfQp9Ow\'" v-bind="{layout: \'lr\'}" />\n<p>文本片段的 <code>backgroundColor</code> 可以指定为图片后，就可以在文本中使用图标了：</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgcmljaDogewogICAgU3Vubnk6IHsKICAgICAgLy8g6L-Z5qC36K6-5a6aIGJhY2tncm91bmRDb2xvciDlsLHlj6_ku6XmmK_lm77niYfkuobjgIIKICAgICAgYmFja2dyb3VuZENvbG9yOiB7CiAgICAgICAgaW1hZ2U6ICcuL2RhdGEvYXNzZXQvaW1nL3dlYXRoZXIvc3VubnlfMTI4LnBuZycKICAgICAgfSwKICAgICAgLy8g5Y-v5Lul5Y-q5oyH5a6a5Zu-54mH55qE6auY5bqm77yM5LuO6ICM5Zu-54mH55qE5a695bqm5qC55o2u5Zu-54mH55qE6ZW_5a695q-U6Ieq5Yqo5b6X5Yiw44CCCiAgICAgIGhlaWdodDogMzAKICAgIH0KICB9Cn07\'" line-highlights="\'\'" />\n<p>分割线实际是用 border 实现的：</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgcmljaDogewogICAgaHI6IHsKICAgICAgYm9yZGVyQ29sb3I6ICcjNzc3JywKICAgICAgLy8g6L-Z6YeM5oqKIHdpZHRoIOiuvue9ruS4uiAnMTAwJSfvvIzooajnpLrliIblibLnur_nmoTplb_luqblhYXmu6HmlofmnKzlnZfjgIIKICAgICAgLy8g5rOo5oSP77yM6L-Z6YeM5piv5paH5pys5Z2X5YaF5a6555uS77yIY29udGVudCBib3jvvInnmoQgMTAwJe-8jOiAjOS4jeWMheWQqyBwYWRkaW5n44CCCiAgICAgIC8vIOiZveeEtui_meWSjCBDU1Mg55u45YWz55qE5a6a5LmJ5pyJ5omA5LiN5ZCM77yM5L2G5piv5Zyo6L-Z57G75Zy65pmv5Lit5pu05Yqg5pa55L6_44CCCiAgICAgIHdpZHRoOiAnMTAwJScsCiAgICAgIGJvcmRlcldpZHRoOiAwLjUsCiAgICAgIGhlaWdodDogMAogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>标题块是使用 <code>backgroundColor</code> 实现的：</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgLy8g5qCH6aKY5paH5a2X5bGF5bemCiAgZm9ybWF0dGVyOiAne3RpdGxlQmd8TGVmdCBUaXRsZX0nLAogIHJpY2g6IHsKICAgIHRpdGxlQmc6IHsKICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgIGhlaWdodDogMzAsCiAgICAgIGJvcmRlclJhZGl1czogWzUsIDUsIDAsIDBdLAogICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgY29sb3I6ICcjZWVlJwogICAgfQogIH0KfTsKCi8vIOagh-mimOaWh-Wtl-WxheS4reOAggovLyDov5nkuKrlrp7njrDmnInkupsgdHJpY2t577yM5L2G5piv77yM6IO95aSf5LiN5byV5YWl5pu05aSN5p2C55qE5o6S54mI6KeE5YiZ6ICM5a6e546w6L-Z5Liq5pWI5p6c44CCCmxhYmVsT3B0aW9uID0gewogIGZvcm1hdHRlcjogJ3t0Y3xDZW50ZXIgVGl0bGV9e3RpdGxlQmd8fScsCiAgcmljaDogewogICAgdGl0bGVCZzogewogICAgICBhbGlnbjogJ3JpZ2h0JywKICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgIGhlaWdodDogMzAsCiAgICAgIGJvcmRlclJhZGl1czogWzUsIDUsIDAsIDBdLAogICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgY29sb3I6ICcjZWVlJwogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>简单表格的设定，其实就是给不同行上纵向对应的文本片段设定同样的宽度就可以了。见 <a href="https://echarts.apache.org/examples/zh/editor.html?c=pie-rich-text">该例子</a></p>\n',postPath:"zh/how-to/label/rich-text",title:"富文本标签 - 标签 - 应用篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:A},{title:"入门篇",dir:i,children:[{title:"获取 ECharts",dir:e},{title:"在项目中引入 ECharts",dir:d},{title:"资源列表",dir:o,draft:g},{title:"寻求帮助",dir:t},{title:"版本特性",dir:l,children:[{title:"ECharts 6 特性介绍",dir:c},{title:"v5 升级 v6 指南",dir:a},{title:"5.0",dir:n},{title:"v4 升级 v5 指南",dir:r},{title:5.2,dir:h},{title:5.3,dir:s},{title:5.4,dir:b},{title:5.5,dir:p},{title:5.6,dir:Z}]}]},{title:"概念篇",dir:m,children:[{title:"图表容器及大小",dir:B},{title:"配置项",dir:G,draft:g},{title:"系列",dir:H,draft:g},{title:"样式",dir:y},{title:"数据集",dir:W},{title:"数据转换",dir:w},{title:"坐标系",dir:v,draft:g},{title:"坐标轴",dir:J},{title:"视觉映射",dir:C},{title:"图例",dir:Y},{title:"事件与行为",dir:u}]},{title:"应用篇",dir:E,children:[{title:"常用图表类型",dir:L,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:R},{title:"堆叠柱状图",dir:M},{title:"动态排序柱状图",dir:K},{title:"极坐标系柱状图",dir:D,draft:g},{title:"阶梯瀑布图",dir:z},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:x,children:[{title:"基础折线图",dir:f},{title:"堆叠折线图",dir:N},{title:"区域面积图",dir:O},{title:"平滑曲线图",dir:V},{title:"阶梯线图",dir:X}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:S},{title:"圆环图",dir:j},{title:"南丁格尔图（玫瑰图）",dir:"rose"}]},{title:"散点图",dir:k,children:[{title:"基础散点图",dir:F}]}]},{title:"移动端优化",dir:I,draft:g},{title:"跨平台方案",dir:Q,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:T},{title:"数据下钻",dir:U,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:q}]},{title:"动画",dir:P,children:[{title:"数据过渡动画",dir:_}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:gg,draft:g},{title:"智能指针吸附",dir:Ig}]}]},{title:"最佳实践",dir:Cg,children:[{title:"移动端优化",dir:I,draft:g},{title:Ag,dir:ig},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:eg}]}],en:[{title:"Get Started",dir:A},{title:"Basics",dir:i,children:[{title:"Download ECharts",dir:e},{title:"Import ECharts",dir:d},{title:"Resources",dir:o,draft:g},{title:"Get Help",dir:t},{title:"What's New",dir:l,children:[{title:"ECharts 6 Features",dir:c},{title:"Migration from v5 to v6",dir:a},{title:"5.0",dir:n},{title:"Migration from v4 to v5",dir:r},{title:5.2,dir:h},{title:5.3,dir:s},{title:5.4,dir:b},{title:5.5,dir:p},{title:5.6,dir:Z}]}]},{title:"Concepts",dir:m,children:[{title:"Chart Container",dir:B},{title:"Chart Option",dir:G,draft:g},{title:"Series",dir:H,draft:g},{title:"Style",dir:y},{title:"Dataset",dir:W},{title:"Data Transform",dir:w},{title:"Coordinate",dir:v,draft:g},{title:"Axis",dir:J},{title:"Visual Mapping",dir:C},{title:"Legend",dir:Y},{title:"Event and Action",dir:u}]},{title:"How To Guides",dir:E,children:[{title:"Common Charts",dir:L,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:R},{title:"Stacked Bar",dir:M},{title:"Bar Racing",dir:K},{title:"Bar Polar",dir:D,draft:g},{title:"Waterfall",dir:z}]},{title:"Line",dir:x,children:[{title:"Basic Line",dir:f},{title:"Stacked Line",dir:N},{title:"Area Chart",dir:O},{title:"Smoothed Line",dir:V},{title:"Step Line",dir:X}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:S},{title:"Ring Style",dir:j},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:k,children:[{title:"Basic Scatter",dir:F}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:Q,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:T},{title:"Drilldown",dir:U,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:q}]},{title:"Animation",dir:P,children:[{title:"Data Transition",dir:_}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:gg,draft:g},{title:"Intelligent Pointer Snapping",dir:Ig}]}]},{title:"Best Practices",dir:Cg,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:Ag,dir:ig},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:eg}]}]},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:g,routePath:"/zh/how-to/label/rich-text",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v6-feature","v6-upgrade-guide","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","5-5-0","5-6-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","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/e47e243.js" defer></script><script src="/handbook/_nuxt/js/5df72fc39d1af2ed5977.js" defer></script><script src="/handbook/_nuxt/js/c4dea9e2e5641ecc29b6.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/5065b3fcfb135aeca141.js" defer></script><noscript data-n-head="ssr" data-body="true"><div class="no-script"><strong>很抱歉，Apache ECharts 网站需要启用 JavaScript 才能正常运行。</strong></div></noscript> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| </body> |
| </html> |
