<!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://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/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="description" name="description" content=""><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="en"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/b561b82.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/f74f8c0f406ea2522d04.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8b5c6d8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/e96421e0f27cc5a35348.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/35be9a3.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/d6226697ecb43e03cd0d.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/5da5a8e.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/2ce97fcdefb3b7b018fe.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/a9c5fa4.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/4f3ab71f990e271ccbe4.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8b5c6d8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/35be9a3.css"><link rel="stylesheet" href="/handbook/_nuxt/css/5da5a8e.css"><link rel="stylesheet" href="/handbook/_nuxt/css/a9c5fa4.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/en/index.html" class="navbar-brand"><img src="https://echarts.apache.org/en/images/logo.png" 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/en/index.html">Home</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Docs<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/feature.html">Features</a></li><li><a href="https://echarts.apache.org/handbook/en/get-started/">Handbook<span class="new">new</span></a></li><li><a href="https://echarts.apache.org/en/api.html">API</a></li><li><a href="https://echarts.apache.org/en/option.html">Chart Configuration</a></li><li><a href="https://echarts.apache.org/en/changelog.html">Changelog</a></li><li><a href="https://echarts.apache.org/en/faq.html">FAQ</a></li><li><a href="https://echarts.apache.org/handbook/en/basics/release-note/v5-upgrade-guide">V5 Upgrade Guide</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Download<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/download.html">Download</a></li><li><a href="https://echarts.apache.org/en/download-theme.html">Download Themes</a></li><li><a href="https://echarts.apache.org/en/download-extension.html">Download Extensions</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/en/index.html">Examples</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Resources<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/spreadsheet.html">Spread Sheet Tool</a></li><li><a href="https://echarts.apache.org/en/theme-builder.html">Theme Builder</a></li><li><a href="https://echarts.apache.org/en/cheat-sheet.html">Cheat Sheet</a></li><li><a href="https://echarts.apache.org/en/resources.html">More Resources</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Community<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/en/events.html">Events</a></li><li><a href="https://echarts.apache.org/en/committers.html">Committers</a></li><li><a href="https://echarts.apache.org/en/maillist.html">Mailing List</a></li><li><a href="https://echarts.apache.org/en/contributing.html">How to Contribute</a></li><li><a href="https://echarts.apache.org/en/dependencies.html">Dependencies</a></li><li><a href="https://echarts.apache.org/en/coding-standard.html">Code Standard</a></li><li><a href="https://github.com/apache/echarts" target="_blank">Source Code (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/en/security.html">Security</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">License<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">Events<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">Sponsorship<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">Thanks<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("zh")'>中文</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="Search Handbook"> <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/en/get-started" class="nav-link"><span class="title">Get Started</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Basics</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/basics/download" class="nav-link"><span class="title">Download ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/import" class="nav-link"><span class="title">Import ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/basics/help" class="nav-link"><span class="title">Get Help</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">What's New</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/en/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 Features</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">Migration from v4 to v5</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/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/en/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></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">Concepts</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/concepts/chart-size" class="nav-link"><span class="title">Chart Container</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/en/concepts/style" class="nav-link"><span class="title">Style</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/dataset" class="nav-link"><span class="title">Dataset</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/data-transform" class="nav-link"><span class="title">Data Transform</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/concepts/axis" class="nav-link"><span class="title">Axis</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/visual-map" class="nav-link"><span class="title">Visual Mapping</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/legend" class="nav-link"><span class="title">Legend</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/concepts/event" class="nav-link"><span class="title">Event and Action</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">How To Guides</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">Common Charts</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">Bar</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/en/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">Basic Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">Stacked Bar</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">Bar Racing</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/en/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">Waterfall</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">Line</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/en/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">Basic Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">Stacked Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/area-line" class="nav-link"><span class="title">Area Chart</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">Smoothed Line</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/line/step-line" class="nav-link"><span class="title">Step Line</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">Pie</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/en/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">Basic Pie</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">Ring Style</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/en/how-to/chart-types/pie/rose" class="nav-link"><span class="title">Rose Style</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">Scatter</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/en/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">Basic Scatter</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">Cross Platform</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/en/how-to/cross-platform/server" class="nav-link"><span class="title">Server Side Rendering</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">Data</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/en/how-to/data/dynamic-data" class="nav-link"><span class="title">Dynamic Data</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">Label</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/en/how-to/label/rich-text" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">Rich Text</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">Animation</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/en/how-to/animation/transition" class="nav-link"><span class="title">Data Transition</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">Interaction</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/en/how-to/interaction/drag" class="nav-link"><span class="title">Drag</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">Best Practices</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/en/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/en/best-practices/aria" class="nav-link"><span class="title">Aria</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">Edit Handbook</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/en/meta/edit-guide" class="nav-link"><span class="title">Edit Guide</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="rich-text" tabindex="-1">Rich Text</h1> <p>Rich text can be used in Apache ECharts<sup>TM</sup> labels of series, axis or other components since v3.7. Which supports:</p> <ul><li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li> <li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fragments of text.</li> <li>Image can be used in text as icon or background.</li> <li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li></ul> <p>At the beginning, the meanings of two terms that will be used below should be clarified:</p> <ul><li>Text Block: The whole block of label text.</li> <li>Text fragment: Some piece of text in a text block.</li></ul> <p>For example:</p> <p><iframe width="400" height="300" src=""></iframe></p> <h2 id="options-about-text" tabindex="-1">Options about Text</h2> <p>echarts provides plenty of text options, including:</p> <ul><li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li> <li>Fill of text: <code>color</code>.</li> <li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li> <li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li> <li>Box size of text block or text fragment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li> <li>Alignment of text block or text fragment: <code>align</code>, <code>verticalAlign</code>.</li> <li>Border, background (color or image) of text block or text fragment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li> <li>Shadow of text block or text fragment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li> <li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li></ul> <p>User can defined styles for text fragment in <code>rich</code> property. For example, <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p> <p>For example:</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">// Styles defined in 'rich' can be applied to some fragments</span>
  <span class="token comment">// of text by adding some markers to those fragment, like</span>
  <span class="token comment">// `{styleName|text content text content}`.</span>
  <span class="token comment">// `'\n'` is the newline character.</span>
  formatter<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">'{a|Style "a" is applied to this fragment}'</span><span class="token punctuation">,</span>
    <span class="token string">'{b|Style "b" is applied to this fragment}This fragment use default style{x|use style "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">// Styles for the whole text block are defined here:</span>
  color<span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span>
  fontSize<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
  fontFamily<span class="token operator">:</span> <span class="token string">'Arial'</span><span class="token punctuation">,</span>
  borderWidth<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
  backgroundColor<span class="token operator">:</span> <span class="token string">'#984455'</span><span class="token punctuation">,</span>
  padding<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>
  lineHeight<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>

  <span class="token comment">// Styles for text fragments are defined here:</span>
  rich<span class="token operator">:</span> <span class="token punctuation">{</span>
    a<span class="token operator">:</span> <span class="token punctuation">{</span>
      color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">,</span>
      lineHeight<span class="token operator">:</span> <span class="token number">10</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    b<span class="token operator">:</span> <span class="token punctuation">{</span>
      backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span>
        image<span class="token operator">:</span> <span class="token string">'xxx/xxx.jpg'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      height<span class="token operator">:</span> <span class="token number">40</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    x<span class="token operator">:</span> <span class="token punctuation">{</span>
      fontSize<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
      fontFamily<span class="token operator">:</span> <span class="token string">'Microsoft YaHei'</span><span class="token punctuation">,</span>
      borderColor<span class="token operator">:</span> <span class="token string">'#449933'</span><span class="token punctuation">,</span>
      borderRadius<span class="token operator">:</span> <span class="token number">4</span>
    <span class="token punctuation">}</span>
    <span class="token comment">// ...</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <blockquote><p>Notice: <code>width</code> 和 <code>height</code> only work when <code>rich</code> specified.</p></blockquote> <h2 id="basic-styles-of-text%2C-text-block-and-text-fragment" tabindex="-1">Basic Styles of Text, Text Block and Text Fragment</h2> <p>Basic font style can be set to text: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</p> <p>Fill color and stroke color can be set to text: <code>color</code>, <code>textBorderColor</code>, <code>textBorderWidth</code>.</p> <p>Border style and background style can be set to text block: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p> <p>Border style and background style can be set to text fragment too: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p> <p>For example:</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: {
            normal: {
              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>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
      symbolSize<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          value<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>
          label<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
              show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
              formatter<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>
              backgroundColor<span class="token operator">:</span> <span class="token string">'#eee'</span><span class="token punctuation">,</span>
              borderColor<span class="token operator">:</span> <span class="token string">'#333'</span><span class="token punctuation">,</span>
              borderWidth<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
              borderRadius<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
              padding<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
              color<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
              fontSize<span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span>
              shadowBlur<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
              shadowColor<span class="token operator">:</span> <span class="token string">'#888'</span><span class="token punctuation">,</span>
              shadowOffsetX<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
              shadowOffsetY<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
              lineHeight<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
              rich<span class="token operator">:</span> <span class="token punctuation">{</span>
                textBorder<span class="token operator">:</span> <span class="token punctuation">{</span>
                  fontSize<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
                  textBorderColor<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
                  textBorderWidth<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
                  color<span class="token operator">:</span> <span class="token string">'#fff'</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                textShadow<span class="token operator">:</span> <span class="token punctuation">{</span>
                  fontSize<span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
                  textShadowBlur<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
                  textShadowColor<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
                  textShadowOffsetX<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
                  textShadowOffsetY<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
                  color<span class="token operator">:</span> <span class="token string">'#fff'</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                bg<span class="token operator">:</span> <span class="token punctuation">{</span>
                  backgroundColor<span class="token operator">:</span> <span class="token string">'#339911'</span><span class="token punctuation">,</span>
                  color<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
                  borderRadius<span class="token operator">:</span> <span class="token number">15</span><span class="token punctuation">,</span>
                  padding<span class="token operator">:</span> <span class="token number">5</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                border<span class="token operator">:</span> <span class="token punctuation">{</span>
                  color<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
                  borderColor<span class="token operator">:</span> <span class="token string">'#449911'</span><span class="token punctuation">,</span>
                  borderWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
                  borderRadius<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
                  padding<span class="token operator">:</span> <span class="token number">5</span>
                <span class="token punctuation">}</span><span class="token punctuation">,</span>
                shadow<span class="token operator">:</span> <span class="token punctuation">{</span>
                  backgroundColor<span class="token operator">:</span> <span class="token string">'#992233'</span><span class="token punctuation">,</span>
                  padding<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
                  color<span class="token operator">:</span> <span class="token string">'#fff'</span><span class="token punctuation">,</span>
                  shadowBlur<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
                  shadowColor<span class="token operator">:</span> <span class="token string">'#336699'</span><span class="token punctuation">,</span>
                  shadowOffsetX<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
                  shadowOffsetY<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 punctuation">,</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    min<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>
    max<span class="token operator">:</span> <span class="token number">1</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    min<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>
    max<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="label-position" tabindex="-1">Label Position</h2> <p><code>label</code> option can be use in charts like <code>bar</code>, <code>line</code>, <code>scatter</code>, etc. The position of a label, can be specified by <a href="option.html#series-scatter.label.position">label.position</a>、<a href="option.html#series-scatter.label.distance">label.distance</a>.</p> <p>Try to modify the <code>position</code> and <code>distance</code> option in the following example:</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: {
        normal: {
          // Options: '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>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
      symbolSize<span class="token operator">:</span> <span class="token number">160</span><span class="token punctuation">,</span>
      symbol<span class="token operator">:</span> <span class="token string">'roundRect'</span><span class="token punctuation">,</span>
      data<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>
      label<span class="token operator">:</span> <span class="token punctuation">{</span>
        normal<span class="token operator">:</span> <span class="token punctuation">{</span>
          <span class="token comment">// Options: 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'</span>
          position<span class="token operator">:</span> <span class="token string">'top'</span><span class="token punctuation">,</span>
          distance<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>

          show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          formatter<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>
          backgroundColor<span class="token operator">:</span> <span class="token string">'#eee'</span><span class="token punctuation">,</span>
          borderColor<span class="token operator">:</span> <span class="token string">'#555'</span><span class="token punctuation">,</span>
          borderWidth<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
          borderRadius<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
          padding<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
          fontSize<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
          shadowBlur<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
          shadowColor<span class="token operator">:</span> <span class="token string">'#888'</span><span class="token punctuation">,</span>
          shadowOffsetX<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
          shadowOffsetY<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
          textBorderColor<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
          textBorderWidth<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
          color<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 punctuation">,</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    max<span class="token operator">:</span> <span class="token number">2</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    max<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>Notice, there are different optional values of <code>position</code> by different chart types. And <code>distance</code> is not supported in every chart. More detailed info can be checked in <a href="https://echarts.apache.org/option.html">option doc</a>.</p></blockquote> <h2 id="label-rotation" tabindex="-1">Label Rotation</h2> <p>Sometimes label is needed to be rotated. For example:</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>
  show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
  rotate<span class="token operator">:</span> <span class="token number">90</span><span class="token punctuation">,</span>
  formatter<span class="token operator">:</span> <span class="token string">'{c}  {name|{a}}'</span><span class="token punctuation">,</span>
  fontSize<span class="token operator">:</span> <span class="token number">16</span><span class="token punctuation">,</span>
  rich<span class="token operator">:</span> <span class="token punctuation">{</span>
    name<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>
  xAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span>
      data<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>
  yAxis<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<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>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      name<span class="token operator">:</span> <span class="token string">'Forest'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      barGap<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> labelOption<span class="token punctuation">,</span>
      emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
        focus<span class="token operator">:</span> <span class="token string">'series'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      data<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>
      name<span class="token operator">:</span> <span class="token string">'Steppe'</span><span class="token punctuation">,</span>
      type<span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> labelOption<span class="token punctuation">,</span>
      emphasis<span class="token operator">:</span> <span class="token punctuation">{</span>
        focus<span class="token operator">:</span> <span class="token string">'series'</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      data<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> and<a href="option.html#series-bar.label.verticalAlign">verticalAlign</a> can be used to adjust location of label in this scenario.</p> <p>Notice, <code>align</code> and <code>verticalAlign</code> are applied firstly, then rotate.</p> <h2 id="layout-and-alignment-of-text-fragment" tabindex="-1">Layout and Alignment of Text fragment</h2> <p>To understand the layout rule, every text fragment can be imagined as a <code>inline-block</code> dom element in CSS.</p> <p><code>content box size</code> of a text fragment is determined by its font size by default. It can also be specified directly by <code>width</code> and <code>height</code>, although they are rarely set. <code>border box size</code> of a text fragment is calculated by adding the <code>border box size</code> and <code>padding</code>.</p> <p>Only <code>'\n'</code> is the newline character, which breaks a line.</p> <p>Multiple text fragment exist in a single line. The height of a line is determined by the biggest <code>lineHeight</code> of text fragments. <code>lineHeight</code> of a text fragment can be specified in <code>rich</code>, or in the parent level of <code>rich</code>, otherwise using <code>box size</code> of the text fragment.</p> <p>Having <code>lineHeight</code> determined, the vertical position of text fragments can be determined by <code>verticalAlign</code> (there is a little different from the rule in CSS):</p> <ul><li><code>'bottom'</code>: The bottom edge of the text fragment sticks to the bottom edge of the line.</li> <li><code>'top'</code>: The top edge of the text fragment sticks to the top edge of the line.</li> <li><code>'middle'</code>: In the middle of the line.</li></ul> <p>The width of a text block can be specified by <code>width</code>, otherwise, by the longest line. Having the width determined, text fragment can be placed in each line, where the horizontal position of text fragments can be determined by its <code>align</code>.</p> <ul><li>Firstly, place text fragments whose <code>align</code> is <code>'left'</code> from left to right continuously.</li> <li>Secondly, place text fragments whose <code>align</code> is <code>'right'</code> from right to left continuously.</li> <li>Finally, the text fragments remained will be sticked and placed in the center of the rest of space.</li></ul> <p>The position of text in a text fragment:</p> <ul><li>If <code>align</code> is <code>'center'</code>, text aligns at the center of the text fragment box.</li> <li>If <code>align</code> is <code>'left'</code>, text aligns at the left of the text fragment box.</li> <li>If <code>align</code> is <code>'right'</code>, text aligns at the right of the text fragment box.</li></ul> <h2 id="effects%3A-icon%2C-horizontal-rule%2C-title-block%2C-simple-table" tabindex="-1">Effects: Icon, Horizontal Rule, Title Block, Simple Table</h2> <p>See example:</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: {
            normal: {
              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: {
            normal: {
              formatter: [
                '{titleBg|Left Title}',
                '  Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|}  ',
                '{hr|}',
                '  xxxxx {showers|} xxxxxxxx  xxxxxxxxx  '
              ].join('\n')
            }
          }
        },
        {
          value: [0, 2],
          label: {
            normal: {
              formatter: [
                '{titleBg|Right Title}',
                '  Content text xxxxxxxx {sunny|} xxxxxxxx {cloudy|}  ',
                '{hr|}',
                '  xxxxx {showers|} xxxxxxxx  xxxxxxxxx  '
              ].join('\n'),
              rich: {
                titleBg: {
                  align: 'right'
                }
              }
            }
          }
        }
      ],
      symbolSize: 1,
      label: {
        normal: {
          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>
  series<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      type<span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span>
      data<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          value<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>
          label<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
              formatter<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>
              rich<span class="token operator">:</span> <span class="token punctuation">{</span>
                titleBg<span class="token operator">:</span> <span class="token punctuation">{</span>
                  align<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 punctuation">{</span>
          value<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>
          label<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
              formatter<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 punctuation">{</span>
          value<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>
          label<span class="token operator">:</span> <span class="token punctuation">{</span>
            normal<span class="token operator">:</span> <span class="token punctuation">{</span>
              formatter<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>
              rich<span class="token operator">:</span> <span class="token punctuation">{</span>
                titleBg<span class="token operator">:</span> <span class="token punctuation">{</span>
                  align<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 punctuation">,</span>
      symbolSize<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      label<span class="token operator">:</span> <span class="token punctuation">{</span>
        normal<span class="token operator">:</span> <span class="token punctuation">{</span>
          show<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
          backgroundColor<span class="token operator">:</span> <span class="token string">'#ddd'</span><span class="token punctuation">,</span>
          borderColor<span class="token operator">:</span> <span class="token string">'#555'</span><span class="token punctuation">,</span>
          borderWidth<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
          borderRadius<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
          color<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
          fontSize<span class="token operator">:</span> <span class="token number">14</span><span class="token punctuation">,</span>
          rich<span class="token operator">:</span> <span class="token punctuation">{</span>
            titleBg<span class="token operator">:</span> <span class="token punctuation">{</span>
              backgroundColor<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
              height<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
              borderRadius<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>
              padding<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>
              width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
              color<span class="token operator">:</span> <span class="token string">'#eee'</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            tc<span class="token operator">:</span> <span class="token punctuation">{</span>
              align<span class="token operator">:</span> <span class="token string">'center'</span><span class="token punctuation">,</span>
              color<span class="token operator">:</span> <span class="token string">'#eee'</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            hr<span class="token operator">:</span> <span class="token punctuation">{</span>
              borderColor<span class="token operator">:</span> <span class="token string">'#777'</span><span class="token punctuation">,</span>
              width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
              borderWidth<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
              height<span class="token operator">:</span> <span class="token number">0</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span>
            sunny<span class="token operator">:</span> <span class="token punctuation">{</span>
              height<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
              align<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
              backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span>
                image<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>
            cloudy<span class="token operator">:</span> <span class="token punctuation">{</span>
              height<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
              align<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
              backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span>
                image<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>
            showers<span class="token operator">:</span> <span class="token punctuation">{</span>
              height<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
              align<span class="token operator">:</span> <span class="token string">'left'</span><span class="token punctuation">,</span>
              backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span>
                image<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 punctuation">,</span>
  xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    min<span class="token operator">:</span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">,</span>
    max<span class="token operator">:</span> <span class="token number">1</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
    show<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    min<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    max<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    inverse<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>Icon is implemented by using image in <code>backgroundColor</code>.</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>rich<span class="token operator">:</span> <span class="token punctuation">{</span>
    Sunny<span class="token operator">:</span> <span class="token punctuation">{</span>
        backgroundColor<span class="token operator">:</span> <span class="token punctuation">{</span>
            image<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">// Can only height specified, but leave width auto obtained</span>
        <span class="token comment">// from the image, where the aspect ratio kept.</span>
        height<span class="token operator">:</span> <span class="token number">30</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>Horizontal rule (like HTML &lt;hr> tag) can be implemented by border:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>rich<span class="token operator">:</span> <span class="token punctuation">{</span>
    hr<span class="token operator">:</span> <span class="token punctuation">{</span>
        borderColor<span class="token operator">:</span> <span class="token string">'#777'</span><span class="token punctuation">,</span>
        <span class="token comment">// width is set as '100%' to fullfill the text block.</span>
        <span class="token comment">// Notice, the percentage is based on the content box, without</span>
        <span class="token comment">// padding. Although it is a little different from CSS rule,</span>
        <span class="token comment">// it is convinent in most cases.</span>
        width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
        borderWidth<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
        height<span class="token operator">:</span> <span class="token number">0</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>Title block can be implemented by <code>backgroundColor</code>:</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// Title is at left.</span>
formatter<span class="token operator">:</span> <span class="token string">'{titleBg|Left Title}'</span><span class="token punctuation">,</span>
rich<span class="token operator">:</span> <span class="token punctuation">{</span>
    titleBg<span class="token operator">:</span> <span class="token punctuation">{</span>
        backgroundColor<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
        height<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
        borderRadius<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>
        padding<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>
        width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
        color<span class="token operator">:</span> <span class="token string">'#eee'</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token comment">// Title is in the center of the line.</span>
<span class="token comment">// This implementation is a little tricky, but is works</span>
<span class="token comment">// without more complicated layout mechanism involved.</span>
formatter<span class="token operator">:</span> <span class="token string">'{tc|Center Title}{titleBg|}'</span><span class="token punctuation">,</span>
rich<span class="token operator">:</span> <span class="token punctuation">{</span>
    titleBg<span class="token operator">:</span> <span class="token punctuation">{</span>
        align<span class="token operator">:</span> <span class="token string">'right'</span><span class="token punctuation">,</span>
        backgroundColor<span class="token operator">:</span> <span class="token string">'#000'</span><span class="token punctuation">,</span>
        height<span class="token operator">:</span> <span class="token number">30</span><span class="token punctuation">,</span>
        borderRadius<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>
        padding<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>
        width<span class="token operator">:</span> <span class="token string">'100%'</span><span class="token punctuation">,</span>
        color<span class="token operator">:</span> <span class="token string">'#eee'</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>Simple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=pie-rich-text">example</a>.</p></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">Contributors</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/en/how-to/label/rich-text.md" title="Edit this Document" 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">Edit this page on GitHub</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <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,e,A,i,t,o,d,l,c,n,a,r,s,h,b,m,p,B,Z,G,y,w,f,H,W,x,J,R,v,u,K,V,Y,z,X,k,M,N,S,L,F,O,D,U,T,j,E,Q,P,q,_,$,gg,Ig,Cg,eg,Ag){return{layout:"default",data:[{html:'<h1 id="rich-text" tabindex="-1">Rich Text</h1>\n<p>Rich text can be used in Apache ECharts<sup>TM</sup> labels of series, axis or other components since v3.7. Which supports:</p>\n<ul>\n<li>Box styles (background, border, shadow, etc.), rotation, position of a text block can be specified.</li>\n<li>Styles (color, font, width/height, background, shadow, etc.) and alignment can be customzied on fragments of text.</li>\n<li>Image can be used in text as icon or background.</li>\n<li>Combine these configurations, some special effects can be made, such as simple table, horizontal rule (hr).</li>\n</ul>\n<p>At the beginning, the meanings of two terms that will be used below should be clarified:</p>\n<ul>\n<li>Text Block: The whole block of label text.</li>\n<li>Text fragment: Some piece of text in a text block.</li>\n</ul>\n<p>For example:</p>\n<p><md-example src="doc-example/text-block-fragment" width="400" height="300"></md-example></p>\n<h2 id="options-about-text" tabindex="-1">Options about Text</h2>\n<p>echarts provides plenty of text options, including:</p>\n<ul>\n<li>Basic font style: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</li>\n<li>Fill of text: <code>color</code>.</li>\n<li>Stroke of text: <code>textBorderColor</code>, <code>textBorderWidth</code>.</li>\n<li>Shadow of text: <code>textShadowColor</code>, <code>textShadowBlur</code>, <code>textShadowOffsetX</code>, <code>textShadowOffsetY</code>.</li>\n<li>Box size of text block or text fragment: <code>lineHeight</code>, <code>width</code>, <code>height</code>, <code>padding</code>.</li>\n<li>Alignment of text block or text fragment: <code>align</code>, <code>verticalAlign</code>.</li>\n<li>Border, background (color or image) of text block or text fragment: <code>backgroundColor</code>, <code>borderColor</code>, <code>borderWidth</code>, <code>borderRadius</code>.</li>\n<li>Shadow of text block or text fragment: <code>shadowColor</code>, <code>shadowBlur</code>, <code>shadowOffsetX</code>, <code>shadowOffsetY</code>.</li>\n<li>Position and rotation of text block: <code>position</code>, <code>distance</code>, <code>rotate</code>.</li>\n</ul>\n<p>User can defined styles for text fragment in <code>rich</code> property. For example, <a href="option.html#series-bar.label.rich">series-bar.label.rich</a></p>\n<p>For example:</p>\n<md-code-block lang="js" code="\'bGFiZWxPcHRpb24gPSB7CiAgLy8gU3R5bGVzIGRlZmluZWQgaW4gJ3JpY2gnIGNhbiBiZSBhcHBsaWVkIHRvIHNvbWUgZnJhZ21lbnRzCiAgLy8gb2YgdGV4dCBieSBhZGRpbmcgc29tZSBtYXJrZXJzIHRvIHRob3NlIGZyYWdtZW50LCBsaWtlCiAgLy8gYHtzdHlsZU5hbWV8dGV4dCBjb250ZW50IHRleHQgY29udGVudH1gLgogIC8vIGAnXG4nYCBpcyB0aGUgbmV3bGluZSBjaGFyYWN0ZXIuCiAgZm9ybWF0dGVyOiBbCiAgICAne2F8U3R5bGUgImEiIGlzIGFwcGxpZWQgdG8gdGhpcyBmcmFnbWVudH0nLAogICAgJ3tifFN0eWxlICJiIiBpcyBhcHBsaWVkIHRvIHRoaXMgZnJhZ21lbnR9VGhpcyBmcmFnbWVudCB1c2UgZGVmYXVsdCBzdHlsZXt4fHVzZSBzdHlsZSAieCJ9JwogIF0uam9pbignXG4nKSwKCiAgLy8gU3R5bGVzIGZvciB0aGUgd2hvbGUgdGV4dCBibG9jayBhcmUgZGVmaW5lZCBoZXJlOgogIGNvbG9yOiAnIzMzMycsCiAgZm9udFNpemU6IDUsCiAgZm9udEZhbWlseTogJ0FyaWFsJywKICBib3JkZXJXaWR0aDogMywKICBiYWNrZ3JvdW5kQ29sb3I6ICcjOTg0NDU1JywKICBwYWRkaW5nOiBbMywgMTAsIDEwLCA1XSwKICBsaW5lSGVpZ2h0OiAyMCwKCiAgLy8gU3R5bGVzIGZvciB0ZXh0IGZyYWdtZW50cyBhcmUgZGVmaW5lZCBoZXJlOgogIHJpY2g6IHsKICAgIGE6IHsKICAgICAgY29sb3I6ICdyZWQnLAogICAgICBsaW5lSGVpZ2h0OiAxMAogICAgfSwKICAgIGI6IHsKICAgICAgYmFja2dyb3VuZENvbG9yOiB7CiAgICAgICAgaW1hZ2U6ICd4eHgveHh4LmpwZycKICAgICAgfSwKICAgICAgaGVpZ2h0OiA0MAogICAgfSwKICAgIHg6IHsKICAgICAgZm9udFNpemU6IDE4LAogICAgICBmb250RmFtaWx5OiAnTWljcm9zb2Z0IFlhSGVpJywKICAgICAgYm9yZGVyQ29sb3I6ICcjNDQ5OTMzJywKICAgICAgYm9yZGVyUmFkaXVzOiA0CiAgICB9CiAgICAvLyAuLi4KICB9Cn07\'" line-highlights="\'\'" />\n<blockquote>\n<p>Notice: <code>width</code> 和 <code>height</code> only work when <code>rich</code> specified.</p>\n</blockquote>\n<h2 id="basic-styles-of-text%2C-text-block-and-text-fragment" tabindex="-1">Basic Styles of Text, Text Block and Text Fragment</h2>\n<p>Basic font style can be set to text: <code>fontStyle</code>, <code>fontWeight</code>, <code>fontSize</code>, <code>fontFamily</code>.</p>\n<p>Fill color and stroke color can be set to text: <code>color</code>, <code>textBorderColor</code>, <code>textBorderWidth</code>.</p>\n<p>Border style and background style can be set to text block: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>Border style and background style can be set to text fragment too: <code>borderColor</code>, <code>borderWidth</code>, <code>backgroundColor</code>, <code>padding</code>.</p>\n<p>For example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICdQbGFpbiB0ZXh0JywKICAgICAgICAgICAgICAgICd7dGV4dEJvcmRlcnx0ZXh0Qm9yZGVyQ29sb3IgKyB0ZXh0Qm9yZGVyV2lkdGh9JywKICAgICAgICAgICAgICAgICd7dGV4dFNoYWRvd3x0ZXh0U2hhZG93Q29sb3IgKyB0ZXh0U2hhZG93Qmx1ciArIHRleHRTaGFkb3dPZmZzZXRYICsgdGV4dFNoYWRvd09mZnNldFl9JywKICAgICAgICAgICAgICAgICd7Ymd8YmFja2dyb3VuZENvbG9yICsgYm9yZGVyUmFkaXVzICsgcGFkZGluZ30nLAogICAgICAgICAgICAgICAgJ3tib3JkZXJ8Ym9yZGVyQ29sb3IgKyBib3JkZXJXaWR0aCArIGJvcmRlclJhZGl1cyArIHBhZGRpbmd9JywKICAgICAgICAgICAgICAgICd7c2hhZG93fHNoYWRvd0NvbG9yICsgc2hhZG93Qmx1ciArIHNoYWRvd09mZnNldFggKyBzaGFkb3dPZmZzZXRZfScKICAgICAgICAgICAgICBdLmpvaW4oJ1xuJyksCiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2VlZScsCiAgICAgICAgICAgICAgYm9yZGVyQ29sb3I6ICcjMzMzJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMiwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICAgICAgcGFkZGluZzogMTAsCiAgICAgICAgICAgICAgY29sb3I6ICcjMDAwJywKICAgICAgICAgICAgICBmb250U2l6ZTogMTQsCiAgICAgICAgICAgICAgc2hhZG93Qmx1cjogMywKICAgICAgICAgICAgICBzaGFkb3dDb2xvcjogJyM4ODgnLAogICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDAsCiAgICAgICAgICAgICAgc2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICBsaW5lSGVpZ2h0OiAzMCwKICAgICAgICAgICAgICByaWNoOiB7CiAgICAgICAgICAgICAgICB0ZXh0Qm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGZvbnRTaXplOiAyMCwKICAgICAgICAgICAgICAgICAgdGV4dEJvcmRlckNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRCb3JkZXJXaWR0aDogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIHRleHRTaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgZm9udFNpemU6IDE2LAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93Qmx1cjogNSwKICAgICAgICAgICAgICAgICAgdGV4dFNoYWRvd0NvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIHRleHRTaGFkb3dPZmZzZXRYOiAzLAogICAgICAgICAgICAgICAgICB0ZXh0U2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgIGJnOiB7CiAgICAgICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogJyMzMzk5MTEnLAogICAgICAgICAgICAgICAgICBjb2xvcjogJyNmZmYnLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDE1LAogICAgICAgICAgICAgICAgICBwYWRkaW5nOiA1CiAgICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgICAgYm9yZGVyOiB7CiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzQ0OTkxMScsCiAgICAgICAgICAgICAgICAgIGJvcmRlcldpZHRoOiAxLAogICAgICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IDMsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgICBzaGFkb3c6IHsKICAgICAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzk5MjIzMycsCiAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDUsCiAgICAgICAgICAgICAgICAgIGNvbG9yOiAnI2ZmZicsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0JsdXI6IDUsCiAgICAgICAgICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzMzNjY5OScsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFg6IDYsCiAgICAgICAgICAgICAgICAgIHNoYWRvd09mZnNldFk6IDYKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0KICAgIH0KICBdLAogIHhBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9LAogIHlBeGlzOiB7CiAgICBzaG93OiBmYWxzZSwKICAgIG1pbjogLTEsCiAgICBtYXg6IDEKICB9Cn07\'" v-bind="{}" />\n<h2 id="label-position" tabindex="-1">Label Position</h2>\n<p><code>label</code> option can be use in charts like <code>bar</code>, <code>line</code>, <code>scatter</code>, etc. The position of a label, can be specified by <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>Try to modify the <code>position</code> and <code>distance</code> option in the following example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIHN5bWJvbFNpemU6IDE2MCwKICAgICAgc3ltYm9sOiAncm91bmRSZWN0JywKICAgICAgZGF0YTogW1sxLCAxXV0sCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAvLyBPcHRpb25zOiAnbGVmdCcsICdyaWdodCcsICd0b3AnLCAnYm90dG9tJywgJ2luc2lkZScsICdpbnNpZGVUb3AnLCAnaW5zaWRlTGVmdCcsICdpbnNpZGVSaWdodCcsICdpbnNpZGVCb3R0b20nLCAnaW5zaWRlVG9wTGVmdCcsICdpbnNpZGVUb3BSaWdodCcsICdpbnNpZGVCb3R0b21MZWZ0JywgJ2luc2lkZUJvdHRvbVJpZ2h0JwogICAgICAgICAgcG9zaXRpb246ICd0b3AnLAogICAgICAgICAgZGlzdGFuY2U6IDEwLAoKICAgICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgICBmb3JtYXR0ZXI6IFsnTGFiZWwgVGV4dCddLmpvaW4oJ1xuJyksCiAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6ICcjZWVlJywKICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzU1NScsCiAgICAgICAgICBib3JkZXJXaWR0aDogMiwKICAgICAgICAgIGJvcmRlclJhZGl1czogNSwKICAgICAgICAgIHBhZGRpbmc6IDEwLAogICAgICAgICAgZm9udFNpemU6IDE4LAogICAgICAgICAgc2hhZG93Qmx1cjogMywKICAgICAgICAgIHNoYWRvd0NvbG9yOiAnIzg4OCcsCiAgICAgICAgICBzaGFkb3dPZmZzZXRYOiAwLAogICAgICAgICAgc2hhZG93T2Zmc2V0WTogMywKICAgICAgICAgIHRleHRCb3JkZXJDb2xvcjogJyMwMDAnLAogICAgICAgICAgdGV4dEJvcmRlcldpZHRoOiAzLAogICAgICAgICAgY29sb3I6ICcjZmZmJwogICAgICAgIH0KICAgICAgfQogICAgfQogIF0sCiAgeEF4aXM6IHsKICAgIG1heDogMgogIH0sCiAgeUF4aXM6IHsKICAgIG1heDogMgogIH0KfTs\'" v-bind="{}" />\n<blockquote>\n<p>Notice, there are different optional values of <code>position</code> by different chart types. And <code>distance</code> is not supported in every chart. More detailed info can be checked in <a href="https://echarts.apache.org/option.html">option doc</a>.</p>\n</blockquote>\n<h2 id="label-rotation" tabindex="-1">Label Rotation</h2>\n<p>Sometimes label is needed to be rotated. For example:</p>\n<md-live lang="js" code="\'Y29uc3QgbGFiZWxPcHRpb24gPSB7CiAgc2hvdzogdHJ1ZSwKICByb3RhdGU6IDkwLAogIGZvcm1hdHRlcjogJ3tjfSAge25hbWV8e2F9fScsCiAgZm9udFNpemU6IDE2LAogIHJpY2g6IHsKICAgIG5hbWU6IHt9CiAgfQp9OwoKb3B0aW9uID0gewogIHhBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICdjYXRlZ29yeScsCiAgICAgIGRhdGE6IFsnMjAxMicsICcyMDEzJywgJzIwMTQnLCAnMjAxNScsICcyMDE2J10KICAgIH0KICBdLAogIHlBeGlzOiBbCiAgICB7CiAgICAgIHR5cGU6ICd2YWx1ZScKICAgIH0KICBdLAogIHNlcmllczogWwogICAgewogICAgICBuYW1lOiAnRm9yZXN0JywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGJhckdhcDogMCwKICAgICAgbGFiZWw6IGxhYmVsT3B0aW9uLAogICAgICBlbXBoYXNpczogewogICAgICAgIGZvY3VzOiAnc2VyaWVzJwogICAgICB9LAogICAgICBkYXRhOiBbMzIwLCAzMzIsIDMwMSwgMzM0LCAzOTBdCiAgICB9LAogICAgewogICAgICBuYW1lOiAnU3RlcHBlJywKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIGxhYmVsOiBsYWJlbE9wdGlvbiwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycKICAgICAgfSwKICAgICAgZGF0YTogWzIyMCwgMTgyLCAxOTEsIDIzNCwgMjkwXQogICAgfQogIF0KfTs\'" v-bind="{layout: \'lr\'}" />\n<p><a href="option.html#series-bar.label.align">align</a> and<a href="option.html#series-bar.label.verticalAlign">verticalAlign</a> can be used to adjust location of label in this scenario.</p>\n<p>Notice, <code>align</code> and <code>verticalAlign</code> are applied firstly, then rotate.</p>\n<h2 id="layout-and-alignment-of-text-fragment" tabindex="-1">Layout and Alignment of Text fragment</h2>\n<p>To understand the layout rule, every text fragment can be imagined as a <code>inline-block</code> dom element in CSS.</p>\n<p><code>content box size</code> of a text fragment is determined by its font size by default. It can also be specified directly by <code>width</code> and <code>height</code>, although they are rarely set. <code>border box size</code> of a text fragment is calculated by adding the <code>border box size</code> and <code>padding</code>.</p>\n<p>Only <code>\'\\n\'</code> is the newline character, which breaks a line.</p>\n<p>Multiple text fragment exist in a single line. The height of a line is determined by the biggest <code>lineHeight</code> of text fragments. <code>lineHeight</code> of a text fragment can be specified in <code>rich</code>, or in the parent level of <code>rich</code>, otherwise using <code>box size</code> of the text fragment.</p>\n<p>Having <code>lineHeight</code> determined, the vertical position of text fragments can be determined by <code>verticalAlign</code> (there is a little different from the rule in CSS):</p>\n<ul>\n<li><code>\'bottom\'</code>: The bottom edge of the text fragment sticks to the bottom edge of the line.</li>\n<li><code>\'top\'</code>: The top edge of the text fragment sticks to the top edge of the line.</li>\n<li><code>\'middle\'</code>: In the middle of the line.</li>\n</ul>\n<p>The width of a text block can be specified by <code>width</code>, otherwise, by the longest line. Having the width determined, text fragment can be placed in each line, where the horizontal position of text fragments can be determined by its <code>align</code>.</p>\n<ul>\n<li>Firstly, place text fragments whose <code>align</code> is <code>\'left\'</code> from left to right continuously.</li>\n<li>Secondly, place text fragments whose <code>align</code> is <code>\'right\'</code> from right to left continuously.</li>\n<li>Finally, the text fragments remained will be sticked and placed in the center of the rest of space.</li>\n</ul>\n<p>The position of text in a text fragment:</p>\n<ul>\n<li>If <code>align</code> is <code>\'center\'</code>, text aligns at the center of the text fragment box.</li>\n<li>If <code>align</code> is <code>\'left\'</code>, text aligns at the left of the text fragment box.</li>\n<li>If <code>align</code> is <code>\'right\'</code>, text aligns at the right of the text fragment box.</li>\n</ul>\n<h2 id="effects%3A-icon%2C-horizontal-rule%2C-title-block%2C-simple-table" tabindex="-1">Effects: Icon, Horizontal Rule, Title Block, Simple Table</h2>\n<p>See example:</p>\n<md-live lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogWwogICAgewogICAgICB0eXBlOiAnc2NhdHRlcicsCiAgICAgIGRhdGE6IFsKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDBdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RjfENlbnRlciBUaXRsZX17dGl0bGVCZ3x9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9LAogICAgICAgIHsKICAgICAgICAgIHZhbHVlOiBbMCwgMV0sCiAgICAgICAgICBsYWJlbDogewogICAgICAgICAgICBub3JtYWw6IHsKICAgICAgICAgICAgICBmb3JtYXR0ZXI6IFsKICAgICAgICAgICAgICAgICd7dGl0bGVCZ3xMZWZ0IFRpdGxlfScsCiAgICAgICAgICAgICAgICAnICBDb250ZW50IHRleHQgeHh4eHh4eHgge3N1bm55fH0geHh4eHh4eHgge2Nsb3VkeXx9ICAnLAogICAgICAgICAgICAgICAgJ3tocnx9JywKICAgICAgICAgICAgICAgICcgIHh4eHh4IHtzaG93ZXJzfH0geHh4eHh4eHggIHh4eHh4eHh4eCAgJwogICAgICAgICAgICAgIF0uam9pbignXG4nKQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfSwKICAgICAgICB7CiAgICAgICAgICB2YWx1ZTogWzAsIDJdLAogICAgICAgICAgbGFiZWw6IHsKICAgICAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICAgICAgZm9ybWF0dGVyOiBbCiAgICAgICAgICAgICAgICAne3RpdGxlQmd8UmlnaHQgVGl0bGV9JywKICAgICAgICAgICAgICAgICcgIENvbnRlbnQgdGV4dCB4eHh4eHh4eCB7c3Vubnl8fSB4eHh4eHh4eCB7Y2xvdWR5fH0gICcsCiAgICAgICAgICAgICAgICAne2hyfH0nLAogICAgICAgICAgICAgICAgJyAgeHh4eHgge3Nob3dlcnN8fSB4eHh4eHh4eCAgeHh4eHh4eHh4ICAnCiAgICAgICAgICAgICAgXS5qb2luKCdcbicpLAogICAgICAgICAgICAgIHJpY2g6IHsKICAgICAgICAgICAgICAgIHRpdGxlQmc6IHsKICAgICAgICAgICAgICAgICAgYWxpZ246ICdyaWdodCcKICAgICAgICAgICAgICAgIH0KICAgICAgICAgICAgICB9CiAgICAgICAgICAgIH0KICAgICAgICAgIH0KICAgICAgICB9CiAgICAgIF0sCiAgICAgIHN5bWJvbFNpemU6IDEsCiAgICAgIGxhYmVsOiB7CiAgICAgICAgbm9ybWFsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnI2RkZCcsCiAgICAgICAgICBib3JkZXJDb2xvcjogJyM1NTUnLAogICAgICAgICAgYm9yZGVyV2lkdGg6IDEsCiAgICAgICAgICBib3JkZXJSYWRpdXM6IDUsCiAgICAgICAgICBjb2xvcjogJyMwMDAnLAogICAgICAgICAgZm9udFNpemU6IDE0LAogICAgICAgICAgcmljaDogewogICAgICAgICAgICB0aXRsZUJnOiB7CiAgICAgICAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBib3JkZXJSYWRpdXM6IFs1LCA1LCAwLCAwXSwKICAgICAgICAgICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgICAgICAgIGNvbG9yOiAnI2VlZScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgdGM6IHsKICAgICAgICAgICAgICBhbGlnbjogJ2NlbnRlcicsCiAgICAgICAgICAgICAgY29sb3I6ICcjZWVlJwogICAgICAgICAgICB9LAogICAgICAgICAgICBocjogewogICAgICAgICAgICAgIGJvcmRlckNvbG9yOiAnIzc3NycsCiAgICAgICAgICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgICAgICAgICBib3JkZXJXaWR0aDogMC41LAogICAgICAgICAgICAgIGhlaWdodDogMAogICAgICAgICAgICB9LAogICAgICAgICAgICBzdW5ueTogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zdW5ueV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgY2xvdWR5OiB7CiAgICAgICAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICAgICAgICBhbGlnbjogJ2xlZnQnLAogICAgICAgICAgICAgIGJhY2tncm91bmRDb2xvcjogewogICAgICAgICAgICAgICAgaW1hZ2U6CiAgICAgICAgICAgICAgICAgICdodHRwczovL2VjaGFydHMuYXBhY2hlLm9yZy9leGFtcGxlcy9kYXRhL2Fzc2V0L2ltZy93ZWF0aGVyL2Nsb3VkeV8xMjgucG5nJwogICAgICAgICAgICAgIH0KICAgICAgICAgICAgfSwKICAgICAgICAgICAgc2hvd2VyczogewogICAgICAgICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgICAgICAgYWxpZ246ICdsZWZ0JywKICAgICAgICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgICAgIGltYWdlOgogICAgICAgICAgICAgICAgICAnaHR0cHM6Ly9lY2hhcnRzLmFwYWNoZS5vcmcvZXhhbXBsZXMvZGF0YS9hc3NldC9pbWcvd2VhdGhlci9zaG93ZXJzXzEyOC5wbmcnCiAgICAgICAgICAgICAgfQogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXSwKICB4QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IC0xLAogICAgbWF4OiAxCiAgfSwKICB5QXhpczogewogICAgc2hvdzogZmFsc2UsCiAgICBtaW46IDAsCiAgICBtYXg6IDIsCiAgICBpbnZlcnNlOiB0cnVlCiAgfQp9Ow\'" v-bind="{layout: \'lr\'}" />\n<p>Icon is implemented by using image in <code>backgroundColor</code>.</p>\n<md-code-block lang="js" code="\'cmljaDogewogICAgU3Vubnk6IHsKICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgICAgICAgICAgaW1hZ2U6ICcuL2RhdGEvYXNzZXQvaW1nL3dlYXRoZXIvc3VubnlfMTI4LnBuZycKICAgICAgICB9LAogICAgICAgIC8vIENhbiBvbmx5IGhlaWdodCBzcGVjaWZpZWQsIGJ1dCBsZWF2ZSB3aWR0aCBhdXRvIG9idGFpbmVkCiAgICAgICAgLy8gZnJvbSB0aGUgaW1hZ2UsIHdoZXJlIHRoZSBhc3BlY3QgcmF0aW8ga2VwdC4KICAgICAgICBoZWlnaHQ6IDMwCiAgICB9Cn0\'" line-highlights="\'\'" />\n<p>Horizontal rule (like HTML &lt;hr&gt; tag) can be implemented by border:</p>\n<md-code-block lang="js" code="\'cmljaDogewogICAgaHI6IHsKICAgICAgICBib3JkZXJDb2xvcjogJyM3NzcnLAogICAgICAgIC8vIHdpZHRoIGlzIHNldCBhcyAnMTAwJScgdG8gZnVsbGZpbGwgdGhlIHRleHQgYmxvY2suCiAgICAgICAgLy8gTm90aWNlLCB0aGUgcGVyY2VudGFnZSBpcyBiYXNlZCBvbiB0aGUgY29udGVudCBib3gsIHdpdGhvdXQKICAgICAgICAvLyBwYWRkaW5nLiBBbHRob3VnaCBpdCBpcyBhIGxpdHRsZSBkaWZmZXJlbnQgZnJvbSBDU1MgcnVsZSwKICAgICAgICAvLyBpdCBpcyBjb252aW5lbnQgaW4gbW9zdCBjYXNlcy4KICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgIGJvcmRlcldpZHRoOiAwLjUsCiAgICAgICAgaGVpZ2h0OiAwCiAgICB9Cn0\'" line-highlights="\'\'" />\n<p>Title block can be implemented by <code>backgroundColor</code>:</p>\n<md-code-block lang="js" code="\'Ly8gVGl0bGUgaXMgYXQgbGVmdC4KZm9ybWF0dGVyOiAne3RpdGxlQmd8TGVmdCBUaXRsZX0nLApyaWNoOiB7CiAgICB0aXRsZUJnOiB7CiAgICAgICAgYmFja2dyb3VuZENvbG9yOiAnIzAwMCcsCiAgICAgICAgaGVpZ2h0OiAzMCwKICAgICAgICBib3JkZXJSYWRpdXM6IFs1LCA1LCAwLCAwXSwKICAgICAgICBwYWRkaW5nOiBbMCwgMTAsIDAsIDEwXSwKICAgICAgICB3aWR0aDogJzEwMCUnLAogICAgICAgIGNvbG9yOiAnI2VlZScKICAgIH0KfQoKLy8gVGl0bGUgaXMgaW4gdGhlIGNlbnRlciBvZiB0aGUgbGluZS4KLy8gVGhpcyBpbXBsZW1lbnRhdGlvbiBpcyBhIGxpdHRsZSB0cmlja3ksIGJ1dCBpcyB3b3JrcwovLyB3aXRob3V0IG1vcmUgY29tcGxpY2F0ZWQgbGF5b3V0IG1lY2hhbmlzbSBpbnZvbHZlZC4KZm9ybWF0dGVyOiAne3RjfENlbnRlciBUaXRsZX17dGl0bGVCZ3x9JywKcmljaDogewogICAgdGl0bGVCZzogewogICAgICAgIGFsaWduOiAncmlnaHQnLAogICAgICAgIGJhY2tncm91bmRDb2xvcjogJyMwMDAnLAogICAgICAgIGhlaWdodDogMzAsCiAgICAgICAgYm9yZGVyUmFkaXVzOiBbNSwgNSwgMCwgMF0sCiAgICAgICAgcGFkZGluZzogWzAsIDEwLCAwLCAxMF0sCiAgICAgICAgd2lkdGg6ICcxMDAlJywKICAgICAgICBjb2xvcjogJyNlZWUnCiAgICB9Cn0\'" line-highlights="\'\'" />\n<p>Simple table can be implemented by specify the same width to text fragments that are in the same column of different lines. See the <a href="https://echarts.apache.org/examples/en/editor.html?c=pie-rich-text">example</a>.</p>\n',postPath:"en/how-to/label/rich-text"}],fetch:{},error:e,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:A},{title:"入门篇",dir:i,children:[{title:"获取 ECharts",dir:t},{title:"在项目中引入 ECharts",dir:o},{title:"资源列表",dir:d,draft:g},{title:"寻求帮助",dir:l},{title:"版本特性",dir:c,children:[{title:"ECharts 5 特性介绍",dir:n},{title:"v4 升级 v5 指南",dir:a},{title:5.2,dir:r},{title:5.3,dir:s}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:b},{title:"配置项",dir:m,draft:g},{title:"系列",dir:p,draft:g},{title:"样式",dir:B},{title:"数据集",dir:Z},{title:"数据转换",dir:G},{title:"坐标系",dir:y,draft:g},{title:"坐标轴",dir:w},{title:"视觉映射",dir:C},{title:"图例",dir:f},{title:"事件与行为",dir:H}]},{title:"应用篇",dir:W,children:[{title:"常用图表类型",dir:x,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:J},{title:"堆叠柱状图",dir:R},{title:"动态排序柱状图",dir:v},{title:"极坐标系柱状图",dir:u,draft:g},{title:"阶梯瀑布图",dir:K},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:V,children:[{title:"基础折线图",dir:Y},{title:"堆叠折线图",dir:z},{title:"区域面积图",dir:X},{title:"平滑曲线图",dir:k},{title:"阶梯线图",dir:M}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:N},{title:"圆环图",dir:S},{title:"南丁格尔图（玫瑰图）",dir:L}]},{title:"散点图",dir:F,children:[{title:"基础散点图",dir:O}]}]},{title:D,dir:I,draft:g},{title:"跨平台方案",dir:U,children:[{title:"服务端渲染",dir:T},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:j,children:[{title:"动态的异步数据",dir:E},{title:"数据下钻",dir:Q,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:P}]},{title:"动画",dir:q,children:[{title:"数据过渡动画",dir:_}]},{title:"交互",dir:$,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:gg,draft:g}]}]},{title:"最佳实践",dir:Ig,children:[{title:D,dir:I,draft:g},{title:Cg,dir:eg},{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:t},{title:"Import ECharts",dir:o},{title:"Resources",dir:d,draft:g},{title:"Get Help",dir:l},{title:"What's New",dir:c,children:[{title:"ECharts 5 Features",dir:n},{title:"Migration from v4 to v5",dir:a},{title:5.2,dir:r},{title:5.3,dir:s}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:b},{title:"Chart Option",dir:m,draft:g},{title:"Series",dir:p,draft:g},{title:"Style",dir:B},{title:"Dataset",dir:Z},{title:"Data Transform",dir:G},{title:"Coordinate",dir:y,draft:g},{title:"Axis",dir:w},{title:"Visual Mapping",dir:C},{title:"Legend",dir:f},{title:"Event and Action",dir:H}]},{title:"How To Guides",dir:W,children:[{title:"Common Charts",dir:x,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:J},{title:"Stacked Bar",dir:R},{title:"Bar Racing",dir:v},{title:"Bar Polar",dir:u,draft:g},{title:"Waterfall",dir:K}]},{title:"Line",dir:V,children:[{title:"Basic Line",dir:Y},{title:"Stacked Line",dir:z},{title:"Area Chart",dir:X},{title:"Smoothed Line",dir:k},{title:"Step Line",dir:M}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:N},{title:"Ring Style",dir:S},{title:"Rose Style",dir:L}]},{title:"Scatter",dir:F,children:[{title:"Basic Scatter",dir:O}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:U,children:[{title:"Server Side Rendering",dir:T}]},{title:"Data",dir:j,children:[{title:"Dynamic Data",dir:E},{title:"Drilldown",dir:Q,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:P}]},{title:"Animation",dir:q,children:[{title:"Data Transition",dir:_}]},{title:"Interaction",dir:$,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:gg,draft:g}]}]},{title:"Best Practices",dir:Ig,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:Cg,dir:eg},{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:"/en/how-to/label/rich-text",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:e}}}}(!0,"mobile","visual-map",null,"get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-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","server","data","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/b561b82.js" defer></script><script src="/handbook/_nuxt/js/2ce97fcdefb3b7b018fe.js" defer></script><script src="/handbook/_nuxt/js/4f3ab71f990e271ccbe4.js" defer></script><script src="/handbook/_nuxt/js/f74f8c0f406ea2522d04.js" defer></script><script src="/handbook/_nuxt/js/e96421e0f27cc5a35348.js" defer></script><script src="/handbook/_nuxt/js/d6226697ecb43e03cd0d.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");e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395";var t=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>