| <!doctype html> | |
| <html data-n-head-ssr> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> | |
| <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/css/main.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="Apache ECharts Handbook"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/a9bbbfa.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/846067a4901846a78c55.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/08bb349.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/cff74c8.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/ef651565e34f4fce561e.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/792c393.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/5f203866781801df115b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1c37eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/08bb349.css"><link rel="stylesheet" href="/handbook/_nuxt/css/cff74c8.css"><link rel="stylesheet" href="/handbook/_nuxt/css/792c393.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1c37eb7.css"> | |
| </head> | |
| <body> | |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html">教程</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/zh/tutorial.html#ECharts%205%20升级指南">v5 升级指南<span class="new">new</span></a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar border-bottom-0 col-sm-3 col-sm-9 col-md-2 col-md-10"><div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <!----></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/basics/inspiration" class="nav-link"><span class="title">获取灵感</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">版本介绍</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <!----></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">样式</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <!----></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practice/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <!----></li><li class="nav-item"><a href="/handbook/zh/best-practice/aria" class="nav-link"><span class="title">无障碍访问</span></a> <!----></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <!----></li></ul></li></ul></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><div class="nuxt-content"><h1 id="echarts-中的样式简介"><a href="#echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>ECharts 中的样式简介</h1> | |
| <p>本文主要是大略概述，用哪些方法，可以在 Apache ECharts<sup>TM</sup> 中设置样式，改变图形元素或者文字的颜色、明暗、大小等。</p> | |
| <blockquote> | |
| <p>之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。</p> | |
| </blockquote> | |
| <p>本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。</p> | |
| <ul> | |
| <li>颜色主题（Theme）</li> | |
| <li>调色盘</li> | |
| <li>直接样式设置（itemStyle、lineStyle、areaStyle、label、...）</li> | |
| <li>视觉映射（visualMap）</li> | |
| </ul> | |
| <h2 id="颜色主题（theme）"><a href="#%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>颜色主题（Theme）</h2> | |
| <p>最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 <a href="$%7BwebsitePath%7D/examples">示例集合</a> 中，可以通过切换深色模式，直接看到采用主题的效果。</p> | |
| <p>ECharts5 除了一贯的默认主题外，还内置了<code>'dark'</code>主题。可以如下切换成深色模式：</p> | |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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></div> | |
| <p>其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 <a href="https://echarts.apache.org/theme-builder.html" rel="nofollow noopener noreferrer" target="_blank">主题编辑器</a> 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：</p> | |
| <p>如果主题保存为 JSON 文件，那么可以自行加载和注册，例如：</p> | |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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></div> | |
| <p>如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可：</p> | |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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></div> | |
| <h2 id="调色盘"><a href="#%E8%B0%83%E8%89%B2%E7%9B%98" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>调色盘</h2> | |
| <p>调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。 | |
| 可以设置全局的调色盘，也可以设置系列自己专属的调色盘。</p> | |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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></div> | |
| <h2 id="直接的样式设置-itemstyle-linestyle-areastyle-label-"><a href="#%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle-linestyle-areastyle-label-" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</h2> | |
| <p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href="https://echarts.apache.org/option.html#" rel="nofollow noopener noreferrer" target="_blank">option</a> 中，很多地方可以设置 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle" rel="nofollow noopener noreferrer" target="_blank">itemStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.lineStyle" rel="nofollow noopener noreferrer" target="_blank">lineStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.areaStyle" rel="nofollow noopener noreferrer" target="_blank">areaStyle</a>、<a href="https://echarts.apache.org/option.html#series-bar.label" rel="nofollow noopener noreferrer" target="_blank">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p> | |
| <p>一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p> | |
| <p>在下面例子中我们给气泡图设置了阴影，渐变色等复杂的样式，你可以修改代码中的样式看修改后的效果：</p> | |
| <div class="nuxt-content-highlight"><!----></div> | |
| <h2 id="高亮的样式：emphasis"><a href="#%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>高亮的样式：emphasis</h2> | |
| <p>在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 <a href="https://echarts.apache.org/option.html#series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphasis</a> 属性来定制。<a href="https://echarts.apache.org/option.html#series-bar.emphasis" rel="nofollow noopener noreferrer" target="_blank">emphsis</a> 中的结构，和普通样式的结构相同，例如：</p> | |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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></div> | |
| <p>注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：</p> | |
| <div class="nuxt-content-highlight"><div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code></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></div> | |
| <p>这种写法 <strong>仍然被兼容</strong>，但是，不再推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 <code>normal</code> 的配置方法（即本文开头的那种写法），使得配置项更扁平简单。</p> | |
| <h2 id="通过-visualmap-组件设定样式"><a href="#%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>通过 visualMap 组件设定样式</h2> | |
| <p><a href="https://echarts.apache.org/option.html#visualMap" rel="nofollow noopener noreferrer" target="_blank">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则，详见 <a href="zh/concepts/visual-map">数据的视觉映射</a>。</p></div> <div class="table-of-contents"><h4 class="toc-container-header">本页目录</h4> <ul><li class="toc2"><a href="/handbook/zh/concepts/style#%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89">颜色主题（Theme）</a></li><li class="toc2"><a href="/handbook/zh/concepts/style#%E8%B0%83%E8%89%B2%E7%9B%98">调色盘</a></li><li class="toc2"><a href="/handbook/zh/concepts/style#%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle-linestyle-areastyle-label-">直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...</a></li><li class="toc2"><a href="/handbook/zh/concepts/style#%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis">高亮的样式：emphasis</a></li><li class="toc2"><a href="/handbook/zh/concepts/style#%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F">通过 visualMap 组件设定样式</a></li></ul></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/concepts/style.md" title="编辑本文" class="inline-block align-middle text-sm"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-8 w-8 inline-block align-middle"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path></svg> <span class="inline-block align-middle">在 GitHub 上编辑本页</span></a></h3> <div class="post-contributors-list"><a href="https://github.com/pissang" target="_blank" class="post-contributor"><img alt="pissang" src="https://avatars.githubusercontent.com/pissang?size=60"> <span>pissang</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(e,t,a,r,i,n,l,p,d,s,o,h,c,y,u,g,v,m,f,b,E,B,S,C,A,x,w,N,k,F,P,D,T,I,M,L,R,H,z,J,O,U,G,_,K,V,Z,$,j,q,Y,W,X,Q,ee,te,ae,re,ie,ne,le,pe,de,se,oe,he,ce,ye,ue,ge,ve,me,fe,be,Ee,Be,Se,Ce,Ae,xe,we,Ne,ke,Fe,Pe){return{layout:"default",data:[{article:{slug:k,toc:[{id:D,depth:2,text:F},{id:E,depth:2,text:E},{id:T,depth:2,text:I},{id:S,depth:2,text:S},{id:M,depth:2,text:L}],body:{type:"root",children:[{type:t,tag:"h1",props:{id:"echarts-中的样式简介"},children:[{type:t,tag:i,props:{href:"#echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B",ariaHidden:u,tabIndex:g},children:[{type:t,tag:v,props:{className:[m,f]},children:[]}]},{type:e,value:"ECharts 中的样式简介"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"本文主要是大略概述，用哪些方法，可以在 Apache ECharts"},{type:t,tag:"sup",props:{},children:[{type:e,value:"TM"}]},{type:e,value:" 中设置样式，改变图形元素或者文字的颜色、明暗、大小等。"}]},{type:e,value:a},{type:t,tag:"blockquote",props:{},children:[{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"之所以用“样式”这种可能不很符合数据可视化思维的词，是因为，比较通俗易懂。"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。"}]},{type:e,value:a},{type:t,tag:"ul",props:{},children:[{type:e,value:a},{type:t,tag:C,props:{},children:[{type:e,value:F}]},{type:e,value:a},{type:t,tag:C,props:{},children:[{type:e,value:E}]},{type:e,value:a},{type:t,tag:C,props:{},children:[{type:e,value:"直接样式设置（itemStyle、lineStyle、areaStyle、label、...）"}]},{type:e,value:a},{type:t,tag:C,props:{},children:[{type:e,value:"视觉映射（visualMap）"}]},{type:e,value:a}]},{type:e,value:a},{type:t,tag:B,props:{id:D},children:[{type:t,tag:i,props:{href:"#%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89",ariaHidden:u,tabIndex:g},children:[{type:t,tag:v,props:{className:[m,f]},children:[]}]},{type:e,value:F}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 "},{type:t,tag:i,props:{href:"$%7BwebsitePath%7D/examples"},children:[{type:e,value:"示例集合"}]},{type:e,value:" 中，可以通过切换深色模式，直接看到采用主题的效果。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"ECharts5 除了一贯的默认主题外，还内置了"},{type:t,tag:A,props:{},children:[{type:e,value:"'dark'"}]},{type:e,value:"主题。可以如下切换成深色模式："}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"var chart = echarts.init(dom, 'dark');\n"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 "},{type:t,tag:i,props:{href:"https://echarts.apache.org/theme-builder.html",rel:[p,d,s],target:o},children:[{type:e,value:"主题编辑器"}]},{type:e,value:" 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用："}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"如果主题保存为 JSON 文件，那么可以自行加载和注册，例如："}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"// 假设主题名称是 \"vintage\"\n$.getJSON('xxx/xxx/vintage.json', function(themeJSON) {\n echarts.registerTheme('vintage', JSON.parse(themeJSON));\n var chart = echarts.init(dom, 'vintage');\n});\n"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"如果保存为 UMD 格式的 JS 文件，那么支持了自注册，直接引入 JS 文件即可："}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"// HTML 引入 vintage.js 文件后（假设主题名称是 \"vintage\"）\nvar chart = echarts.init(dom, 'vintage');\n// ...\n"}]}]},{type:e,value:a},{type:t,tag:B,props:{id:E},children:[{type:t,tag:i,props:{href:"#%E8%B0%83%E8%89%B2%E7%9B%98",ariaHidden:u,tabIndex:g},children:[{type:t,tag:v,props:{className:[m,f]},children:[]}]},{type:e,value:E}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘，也可以设置系列自己专属的调色盘。"}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n // 全局调色盘。\n color: [\n '#c23531',\n '#2f4554',\n '#61a0a8',\n '#d48265',\n '#91c7ae',\n '#749f83',\n '#ca8622',\n '#bda29a',\n '#6e7074',\n '#546570',\n '#c4ccd3'\n ],\n\n series: [\n {\n type: 'bar',\n // 此系列自己的调色盘。\n color: [\n '#dd6b66',\n '#759aa0',\n '#e69d87',\n '#8dc1a9',\n '#ea7e53',\n '#eedd78',\n '#73a373',\n '#73b9bc',\n '#7289ab',\n '#91ca8c',\n '#f49f42'\n ]\n // ...\n },\n {\n type: 'pie',\n // 此系列自己的调色盘。\n color: [\n '#37A2DA',\n '#32C5E9',\n '#67E0E3',\n '#9FE6B8',\n '#FFDB5C',\n '#ff9f7f',\n '#fb7293',\n '#E062AE',\n '#E690D1',\n '#e7bcf3',\n '#9d96f5',\n '#8378EA',\n '#96BFFF'\n ]\n // ...\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:B,props:{id:T},children:[{type:t,tag:i,props:{href:"#%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE-itemstyle-linestyle-areastyle-label-",ariaHidden:u,tabIndex:g},children:[{type:t,tag:v,props:{className:[m,f]},children:[]}]},{type:e,value:I}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"直接的样式设置是比较常用设置方式。纵观 ECharts 的 "},{type:t,tag:i,props:{href:R,rel:[p,d,s],target:o},children:[{type:e,value:"option"}]},{type:e,value:" 中，很多地方可以设置 "},{type:t,tag:i,props:{href:"https://echarts.apache.org/option.html#series-bar.itemStyle",rel:[p,d,s],target:o},children:[{type:e,value:H}]},{type:e,value:x},{type:t,tag:i,props:{href:"https://echarts.apache.org/option.html#series-line.lineStyle",rel:[p,d,s],target:o},children:[{type:e,value:"lineStyle"}]},{type:e,value:x},{type:t,tag:i,props:{href:"https://echarts.apache.org/option.html#series-line.areaStyle",rel:[p,d,s],target:o},children:[{type:e,value:"areaStyle"}]},{type:e,value:x},{type:t,tag:i,props:{href:"https://echarts.apache.org/option.html#series-bar.label",rel:[p,d,s],target:o},children:[{type:e,value:w}]},{type:e,value:" 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，"},{type:t,tag:A,props:{},children:[{type:e,value:H}]},{type:e,value:x},{type:t,tag:A,props:{},children:[{type:e,value:w}]},{type:e,value:" 等可能出现在不同的地方。"}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"在下面例子中我们给气泡图设置了阴影，渐变色等复杂的样式，你可以修改代码中的样式看修改后的效果："}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:"md-live",props:{lang:y,layout:"tb"},children:[{type:e,value:"var data = [\n [\n [28604, 77, 17096869, 'Australia', 1990],\n [31163, 77.4, 27662440, 'Canada', 1990],\n [1516, 68, 1154605773, 'China', 1990],\n [13670, 74.7, 10582082, 'Cuba', 1990],\n [28599, 75, 4986705, 'Finland', 1990],\n [29476, 77.1, 56943299, 'France', 1990],\n [31476, 75.4, 78958237, 'Germany', 1990],\n [28666, 78.1, 254830, 'Iceland', 1990],\n [1777, 57.7, 870601776, 'India', 1990],\n [29550, 79.1, 122249285, 'Japan', 1990],\n [2076, 67.9, 20194354, 'North Korea', 1990],\n [12087, 72, 42972254, 'South Korea', 1990],\n [24021, 75.4, 3397534, 'New Zealand', 1990],\n [43296, 76.8, 4240375, 'Norway', 1990],\n [10088, 70.8, 38195258, 'Poland', 1990],\n [19349, 69.6, 147568552, 'Russia', 1990],\n [10670, 67.3, 53994605, 'Turkey', 1990],\n [26424, 75.7, 57110117, 'United Kingdom', 1990],\n [37062, 75.4, 252847810, 'United States', 1990]\n ],\n [\n [44056, 81.8, 23968973, 'Australia', 2015],\n [43294, 81.7, 35939927, 'Canada', 2015],\n [13334, 76.9, 1376048943, 'China', 2015],\n [21291, 78.5, 11389562, 'Cuba', 2015],\n [38923, 80.8, 5503457, 'Finland', 2015],\n [37599, 81.9, 64395345, 'France', 2015],\n [44053, 81.1, 80688545, 'Germany', 2015],\n [42182, 82.8, 329425, 'Iceland', 2015],\n [5903, 66.8, 1311050527, 'India', 2015],\n [36162, 83.5, 126573481, 'Japan', 2015],\n [1390, 71.4, 25155317, 'North Korea', 2015],\n [34644, 80.7, 50293439, 'South Korea', 2015],\n [34186, 80.6, 4528526, 'New Zealand', 2015],\n [64304, 81.6, 5210967, 'Norway', 2015],\n [24787, 77.3, 38611794, 'Poland', 2015],\n [23038, 73.13, 143456918, 'Russia', 2015],\n [19360, 76.5, 78665830, 'Turkey', 2015],\n [38225, 81.4, 64715810, 'United Kingdom', 2015],\n [53354, 79.1, 321773631, 'United States', 2015]\n ]\n];\n\noption = {\n backgroundColor: {\n type: 'radial',\n x: 0.3,\n y: 0.3,\n r: 0.8,\n colorStops: [\n {\n offset: 0,\n color: '#f7f8fa'\n },\n {\n offset: 1,\n color: '#cdd0d5'\n }\n ]\n },\n grid: {\n left: 10,\n containLabel: true,\n bottom: 10,\n top: 10,\n right: 30\n },\n xAxis: {\n splitLine: {\n show: false\n }\n },\n yAxis: {\n splitLine: {\n show: false\n },\n scale: true\n },\n series: [\n {\n name: '1990',\n data: data[0],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(120, 36, 50, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(251, 118, 123)'\n },\n {\n offset: 1,\n color: 'rgb(204, 46, 72)'\n }\n ]\n }\n }\n },\n {\n name: '2015',\n data: data[1],\n type: 'scatter',\n symbolSize: function(data) {\n return Math.sqrt(data[2]) / 5e2;\n },\n emphasis: {\n focus: 'series',\n label: {\n show: true,\n formatter: function(param) {\n return param.data[3];\n },\n position: 'top'\n }\n },\n itemStyle: {\n shadowBlur: 10,\n shadowColor: 'rgba(25, 100, 150, 0.5)',\n shadowOffsetY: 5,\n color: {\n type: 'radial',\n x: 0.4,\n y: 0.3,\n r: 1,\n colorStops: [\n {\n offset: 0,\n color: 'rgb(129, 227, 238)'\n },\n {\n offset: 1,\n color: 'rgb(25, 183, 207)'\n }\n ]\n }\n }\n }\n ]\n};\n"}]}]},{type:e,value:a},{type:t,tag:B,props:{id:S},children:[{type:t,tag:i,props:{href:"#%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis",ariaHidden:u,tabIndex:g},children:[{type:t,tag:v,props:{className:[m,f]},children:[]}]},{type:e,value:S}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 "},{type:t,tag:i,props:{href:z,rel:[p,d,s],target:o},children:[{type:e,value:"emphasis"}]},{type:e,value:" 属性来定制。"},{type:t,tag:i,props:{href:z,rel:[p,d,s],target:o},children:[{type:e,value:"emphsis"}]},{type:e,value:" 中的结构，和普通样式的结构相同，例如："}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n series: {\n type: 'scatter',\n\n // 普通样式。\n itemStyle: {\n // 点的颜色。\n color: 'red'\n },\n label: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n\n // 高亮样式。\n emphasis: {\n itemStyle: {\n // 高亮时点的颜色。\n color: 'blue'\n },\n label: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的："}]},{type:e,value:a},{type:t,tag:h,props:{className:[c]},children:[{type:t,tag:b,props:{lang:y,"line-highlights":l,"file-name":l},children:[{type:e,value:"option = {\n series: {\n type: 'scatter',\n\n itemStyle: {\n // 普通样式。\n normal: {\n // 点的颜色。\n color: 'red'\n },\n // 高亮样式。\n emphasis: {\n // 高亮时点的颜色。\n color: 'blue'\n }\n },\n\n label: {\n // 普通样式。\n normal: {\n show: true,\n // 标签的文字。\n formatter: 'This is a normal label.'\n },\n // 高亮样式。\n emphasis: {\n show: true,\n // 高亮时标签的文字。\n formatter: 'This is a emphasis label.'\n }\n }\n }\n};\n"}]}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:e,value:"这种写法 "},{type:t,tag:"strong",props:{},children:[{type:e,value:"仍然被兼容"}]},{type:e,value:"，但是，不再推荐。事实上，多数情况下，使用者只会配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 "},{type:t,tag:A,props:{},children:[{type:e,value:"normal"}]},{type:e,value:" 的配置方法（即本文开头的那种写法），使得配置项更扁平简单。"}]},{type:e,value:a},{type:t,tag:B,props:{id:M},children:[{type:t,tag:i,props:{href:"#%E9%80%9A%E8%BF%87-visualmap-%E7%BB%84%E4%BB%B6%E8%AE%BE%E5%AE%9A%E6%A0%B7%E5%BC%8F",ariaHidden:u,tabIndex:g},children:[{type:t,tag:v,props:{className:[m,f]},children:[]}]},{type:e,value:L}]},{type:e,value:a},{type:t,tag:n,props:{},children:[{type:t,tag:i,props:{href:"https://echarts.apache.org/option.html#visualMap",rel:[p,d,s],target:o},children:[{type:e,value:"visualMap 组件"}]},{type:e,value:" 能指定数据到颜色、图形尺寸的映射规则，详见 "},{type:t,tag:i,props:{href:"zh/concepts/visual-map"},children:[{type:e,value:"数据的视觉映射"}]},{type:e,value:"。"}]}]},dir:"/zh/concepts",path:J,extension:".md",createdAt:"2021-07-21T05:40:02.101Z",updatedAt:"2021-07-21T15:26:59.863Z"},postPath:"zh/concepts/style"}],fetch:{},error:O,state:{filled:!1,docVersion:l,ghVersion:l,visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:U},{title:"入门篇",dir:G,children:[{title:"获取 ECharts",dir:_},{title:"在项目中引入 ECharts",dir:K},{title:"资源列表",dir:V,draft:r},{title:"获取灵感",dir:Z},{title:"寻求帮助",dir:$},{title:"版本介绍",dir:j,children:[{title:q,draft:r,dir:Y},{title:"ECharts 5 新特性",dir:W},{title:"ECharts 5 升级指南",dir:X}]}]},{title:"概念篇",dir:Q,children:[{title:"图表容器及大小",dir:ee},{title:"配置项",dir:te,draft:r},{title:"系列",dir:"series",draft:r},{title:"样式",dir:k},{title:"数据集",dir:ae},{title:"数据转换",dir:re},{title:"坐标系",dir:ie,draft:r},{title:"坐标轴",dir:"axis"},{title:"视觉映射",dir:P},{title:"图例",dir:"legend"},{title:"事件与行为",dir:"event"}]},{title:"应用篇",dir:ne,children:[{title:"常用图表类型",dir:le,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:pe},{title:"堆叠柱状图",dir:de},{title:"动态排序柱状图",dir:se,draft:r},{title:"极坐标系柱状图",dir:oe,draft:r},{title:"瀑布图",dir:he,draft:r},{title:"视觉映射的柱状图",dir:P,draft:r}]},{title:"折线图",dir:"line",children:[{title:"基础折线图",dir:ce},{title:"堆叠折线图",dir:ye},{title:"区域面积图",dir:ue},{title:"平滑曲线图",dir:ge},{title:"阶梯线图",dir:ve}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:me},{title:"圆环图",dir:fe},{title:"南丁格尔图（玫瑰图）",dir:"rose"}]},{title:"散点图",dir:be,children:[{title:"基础散点图",dir:Ee}]}]},{title:"移动端优化",dir:N,draft:r},{title:"跨平台方案",dir:Be,children:[{title:"百度智能小程序",dir:"baidu-app"},{title:"微信小程序",dir:"wechat-app"},{title:"服务端渲染",dir:"server"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:Se},{title:"数据下钻",dir:Ce,draft:r}]},{title:"标签",dir:w,children:[{title:"富文本标签",dir:Ae}]},{title:"交互",dir:xe,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:we,draft:r}]}]},{title:"最佳实践",dir:Ne,children:[{title:"移动端优化",dir:N,draft:r},{title:ke,dir:Fe},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Pe}]}],en:[{title:"Get Started",dir:U},{title:"Basics",dir:G,children:[{title:"Download ECharts",dir:_},{title:"Import ECharts",dir:K},{title:"Resources",dir:V,draft:r},{title:"Inspiration",dir:Z},{title:"Get Help",dir:$},{title:"Release Note",dir:j,children:[{title:q,draft:r,dir:Y},{title:"ECharts 5 Features",dir:W},{title:"ECharts 5 Upgrade Guide",dir:X}]}]},{title:"Concepts",dir:Q,children:[{title:"Chart Container",dir:ee},{title:"Chart Option",dir:te,draft:r},{title:"Series",dir:"series",draft:r},{title:"Style",dir:k},{title:"Dataset",dir:ae},{title:"Data Transform",dir:re},{title:"Coordinate",dir:ie,draft:r},{title:"Axis",dir:"axis"},{title:"Visual Mapping",dir:P},{title:"Legend",dir:"legend"},{title:"Event and Action",dir:"event"}]},{title:"Application",dir:ne,children:[{title:"Common Charts",dir:le,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:pe},{title:"Stacked Bar",dir:de},{title:"Bar Racing",dir:se,draft:r},{title:"Bar Polar",dir:oe,draft:r},{title:"Waterfall",dir:he,draft:r}]},{title:"Line",dir:"line",children:[{title:"Basic Line",dir:ce},{title:"Stacked Line",dir:ye},{title:"Area Chart",dir:ue},{title:"Smoothed Line",dir:ge},{title:"Step Line",dir:ve}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:me},{title:"Ring Style",dir:fe},{title:"Rose Style",dir:"rose"}]},{title:"Scatter",dir:be,children:[{title:"Basic Scatter",dir:Ee}]}]},{title:"Mobile",dir:N,draft:r},{title:"Cross Platform",dir:Be,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:Se},{title:"Drilldown",dir:Ce,draft:r}]},{title:"Label",dir:w,children:[{title:"Rich Text",dir:Ae}]},{title:"Interaction",dir:xe,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:we,draft:r}]}]},{title:"Best Practice",dir:Ne,children:[{title:"Mobile Optimization",dir:N,draft:r},{title:ke,dir:Fe},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Pe}]}]},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:R,gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:r,routePath:J,config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:O},content:{dbHash:"570e7c13"}}}}("text","element","\n",!0,"a","p","","nofollow","noopener","noreferrer","_blank","div","nuxt-content-highlight","js","true",-1,"span","icon","icon-link","md-code-block","调色盘","h2","高亮的样式：emphasis","li","code","、","label","mobile","style","颜色主题（Theme）","visual-map","颜色主题（theme）","直接的样式设置-itemstyle-linestyle-areastyle-label-","直接的样式设置 itemStyle, lineStyle, areaStyle, label, ...","通过-visualmap-组件设定样式","通过 visualMap 组件设定样式","https://echarts.apache.org/option.html#","itemStyle","https://echarts.apache.org/option.html#series-bar.emphasis","/zh/concepts/style",null,"get-started","basics","download","import","resource","inspiration","help","release-note","ECharts 5.2.0","5-2-0","v5-feature","v5-upgrade-guide","concepts","chart-size","options","dataset","data-transform","coordinate","application","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","scatter","basic-scatter","cross-platform","dynamic-data","drilldown","rich-text","interaction","connect","best-practice","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/a9bbbfa.js" defer></script><script src="/handbook/_nuxt/js/5f203866781801df115b.js" defer></script><script src="/handbook/_nuxt/js/9fd40f9dd0812421e4d6.js" defer></script><script src="/handbook/_nuxt/js/846067a4901846a78c55.js" defer></script><script src="/handbook/_nuxt/js/a6e0d8fa172ac07d4546.js" defer></script><script src="/handbook/_nuxt/js/ef651565e34f4fce561e.js" defer></script> | |
| <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> | |
| </body> | |
| </html> |