| <!doctype html> |
| <html data-n-head-ssr> |
| <head> |
| <link rel="stylesheet" type="text/css" href="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> |
| <link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css"> |
| <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"> |
| <title>富文本标签 - 标签 - 应用篇 - Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/4d2a12b.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8117eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1f3ef45.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/ba9ec8a.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1f3ef45.css"><link rel="stylesheet" href="/handbook/_nuxt/css/ba9ec8a.css"><link rel="stylesheet" href="/handbook/_nuxt/css/3556c50.css"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide">v5 升级指南</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" 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/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">v4 升级 v5 指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" class="nav-link"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图（玫瑰图）</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-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"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60" loading="lazy"> <span>plainheart</span></a><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60" loading="lazy"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(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,J,v,Y,u,E,L,R,M,K,D,z,x,N,O,V,X,f,S,j,k,F,Q,T,U,q,P,_,$,gg,Ig,Cg,Ag){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 5 特性介绍",dir:c},{title:"v4 升级 v5 指南",dir:a},{title:5.2,dir:n},{title:5.3,dir:r},{title:5.4,dir:h}]}]},{title:"概念篇",dir:s,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:p,draft:g},{title:"系列",dir:Z,draft:g},{title:"样式",dir:m},{title:"数据集",dir:B},{title:"数据转换",dir:G},{title:"坐标系",dir:H,draft:g},{title:"坐标轴",dir:y},{title:"视觉映射",dir:C},{title:"图例",dir:W},{title:"事件与行为",dir:w}]},{title:"应用篇",dir:J,children:[{title:"常用图表类型",dir:v,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:Y},{title:"堆叠柱状图",dir:u},{title:"动态排序柱状图",dir:E},{title:"极坐标系柱状图",dir:L,draft:g},{title:"阶梯瀑布图",dir:R},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:M,children:[{title:"基础折线图",dir:K},{title:"堆叠折线图",dir:D},{title:"区域面积图",dir:z},{title:"平滑曲线图",dir:x},{title:"阶梯线图",dir:N}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:O},{title:"圆环图",dir:V},{title:"南丁格尔图（玫瑰图）",dir:X}]},{title:"散点图",dir:f,children:[{title:"基础散点图",dir:S}]}]},{title:j,dir:I,draft:g},{title:"跨平台方案",dir:k,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:F},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:T}]},{title:"动画",dir:U,children:[{title:"数据过渡动画",dir:q}]},{title:"交互",dir:P,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:gg,children:[{title:j,dir:I,draft:g},{title:Ig,dir:Cg},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Ag}]}],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 5 Features",dir:c},{title:"Migration from v4 to v5",dir:a},{title:5.2,dir:n},{title:5.3,dir:r},{title:5.4,dir:h}]}]},{title:"Concepts",dir:s,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:p,draft:g},{title:"Series",dir:Z,draft:g},{title:"Style",dir:m},{title:"Dataset",dir:B},{title:"Data Transform",dir:G},{title:"Coordinate",dir:H,draft:g},{title:"Axis",dir:y},{title:"Visual Mapping",dir:C},{title:"Legend",dir:W},{title:"Event and Action",dir:w}]},{title:"How To Guides",dir:J,children:[{title:"Common Charts",dir:v,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:Y},{title:"Stacked Bar",dir:u},{title:"Bar Racing",dir:E},{title:"Bar Polar",dir:L,draft:g},{title:"Waterfall",dir:R}]},{title:"Line",dir:M,children:[{title:"Basic Line",dir:K},{title:"Stacked Line",dir:D},{title:"Area Chart",dir:z},{title:"Smoothed Line",dir:x},{title:"Step Line",dir:N}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:O},{title:"Ring Style",dir:V},{title:"Rose Style",dir:X}]},{title:"Scatter",dir:f,children:[{title:"Basic Scatter",dir:S}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:k,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:F},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:T}]},{title:"Animation",dir:U,children:[{title:"Data Transition",dir:q}]},{title:"Interaction",dir:P,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:gg,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:Ig,dir:Cg},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Ag}]}]},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","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","how-to","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/4d2a12b.js" defer></script><script src="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" defer></script><script src="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" defer></script><script src="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" defer></script> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| <script src="https://fastly.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> |
| <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> |
| <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script> |
| <script>var _hmt=_hmt||[];function gtag(){dataLayer.push(arguments)}!function(){var e=document.createElement("script"),t=(e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395",document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}(),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-141228404-1")</script> |
| </body> |
| </html> |
