| <!doctype html> |
| <html data-n-head-ssr> |
| <head> |
| <link rel="stylesheet" type="text/css" href="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"> |
| <link rel="stylesheet" type="text/css" href="https://echarts.apache.org/zh/css/main.css"> |
| <link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"> |
| <title>样式 - 概念篇 - Handbook - Apache ECharts</title><meta data-n-head="ssr" charset="utf-8"><meta data-n-head="ssr" name="viewport" content="width=device-width,initial-scale=1"><meta data-n-head="ssr" data-hid="docsearch:language" name="docsearch:language" content="zh"><base href="/handbook/"><link data-n-head="ssr" rel="icon" type="image/x-icon" href="https://echarts.apache.org/zh/images/favicon.png"><link rel="preload" href="/handbook/_nuxt/4d2a12b.js" as="script"><link rel="preload" href="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/8117eb7.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/1f3ef45.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/ba9ec8a.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" as="script"><link rel="preload" href="/handbook/_nuxt/css/3556c50.css" as="style"><link rel="preload" href="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" as="script"><link rel="stylesheet" href="/handbook/_nuxt/css/8117eb7.css"><link rel="stylesheet" href="/handbook/_nuxt/css/1f3ef45.css"><link rel="stylesheet" href="/handbook/_nuxt/css/ba9ec8a.css"><link rel="stylesheet" href="/handbook/_nuxt/css/3556c50.css"> |
| </head> |
| <body> |
| <div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div><nav role="navigation" class="navbar navbar-default navbar-fixed-top"><div class="container-fluid"><div class="navbar-header"><button type="button" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a href="https://echarts.apache.org/zh/index.html" class="navbar-brand"><img src="https://echarts.apache.org/zh/images/logo.png?_v_=20200710_1" alt="echarts logo" class="navbar-logo"></a></div><div id="navbar-collapse" class="collapse navbar-collapse"><ul class="nav navbar-nav navbar-left"><li id="nav-index"><a href="https://echarts.apache.org/zh/index.html">首页</a></li><li id="nav-doc" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">文档<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/feature.html">特性</a></li><li><a href="https://echarts.apache.org/handbook/zh/get-started/">使用手册</a></li><li><a href="https://echarts.apache.org/zh/api.html">API</a></li><li><a href="https://echarts.apache.org/zh/option.html">配置项手册</a></li><li><a href="https://echarts.apache.org/zh/changelog.html">版本记录</a></li><li><a href="https://echarts.apache.org/zh/faq.html">常见问题</a></li><li><a href="https://echarts.apache.org/handbook/zh/basics/release-note/v5-upgrade-guide">v5 升级指南</a></li></ul></li><li id="nav-download" class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">下载<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/download.html">下载</a></li><li><a href="https://echarts.apache.org/zh/download-theme.html">主题下载</a></li><li><a href="https://echarts.apache.org/zh/download-extension.html">扩展下载</a></li></ul></li><li id="nav-examples"><a href="https://echarts.apache.org/examples/zh/index.html">示例</a></li><li id="nav-resources"><a href="#" data-toggle="dropdown" class="dropdown-toggle">资源<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/spreadsheet.html">表格工具</a></li><li><a href="https://echarts.apache.org/zh/theme-builder.html">主题构建工具</a></li><li><a href="https://echarts.apache.org/zh/cheat-sheet.html">术语速查手册</a></li><li><a href="https://echarts.apache.org/zh/resources.html">更多资源</a></li></ul></li><li id="nav-contribute"><a href="#" data-toggle="dropdown" class="dropdown-toggle">社区<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://echarts.apache.org/zh/events.html">活动</a></li><li><a href="https://echarts.apache.org/zh/committers.html">贡献者列表</a></li><li><a href="https://echarts.apache.org/zh/maillist.html">邮件列表</a></li><li><a href="https://echarts.apache.org/zh/contributing.html">如何贡献</a></li><li><a href="https://echarts.apache.org/zh/dependencies.html">依赖项</a></li><li><a href="https://echarts.apache.org/zh/coding-standard.html">代码规范</a></li><li><a href="https://github.com/apache/echarts" target="_blank">源码（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://github.com/apache/echarts/issues" target="_blank">Issues（GitHub）<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li><li id="nav-others"><a href="#" data-toggle="dropdown" class="dropdown-toggle">ASF<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="https://www.apache.org/" target="_blank">Apache Software Foundation<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://echarts.apache.org/zh/security.html">安全</a></li><li><a href="https://www.apache.org/licenses/" target="_blank">版权<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/events/current-event" target="_blank">活动<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank">捐赠<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank">鸣谢<svg width="15px" height="15px" viewbox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="icon-external-link"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li id="nav-homeen"><a href="javascript:;" onclick='changeLang("en")'>EN</a></li></ul></div></div></nav> <div class="page-main"><div class="page-content handbook-content single-page container-fluid row flex-xl-nowrap"><div class="bd-sidebar col-sm-3 col-md-2 closed"><div class="sidebar-search"><input id="handbook-search-intput" type="search" placeholder="搜索手册"> <div class="search-icon"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg></div></div> <div class="bd-docs-nav"><ul class="nav bd-sidenav nav-root level0"><li class="nav-item"><a href="/handbook/zh/get-started" class="nav-link"><span class="title">快速上手</span></a> <ul class="nav bd-sidenav level1" style="display:none"></ul></li><li class="nav-item"><div class="nav-link"><span class="title">入门篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/basics/download" class="nav-link"><span class="title">获取 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/import" class="nav-link"><span class="title">在项目中引入 ECharts</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/basics/help" class="nav-link"><span class="title">寻求帮助</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a class="nav-link"><span class="title">版本特性</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-feature" class="nav-link"><span class="title">ECharts 5 特性介绍</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/v5-upgrade-guide" class="nav-link"><span class="title">v4 升级 v5 指南</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-2-0" class="nav-link"><span class="title">5.2</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-3-0" class="nav-link"><span class="title">5.3</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/basics/release-note/5-4-0" class="nav-link"><span class="title">5.4</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">概念篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/concepts/chart-size" class="nav-link"><span class="title">图表容器及大小</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><!----><li class="nav-item"><a href="/handbook/zh/concepts/style" aria-current="page" class="nav-link nuxt-link-exact-active nuxt-link-active"><span class="title">样式</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/dataset" class="nav-link"><span class="title">数据集</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/data-transform" class="nav-link"><span class="title">数据转换</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/concepts/axis" class="nav-link"><span class="title">坐标轴</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/visual-map" class="nav-link"><span class="title">视觉映射</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/legend" class="nav-link"><span class="title">图例</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/concepts/event" class="nav-link"><span class="title">事件与行为</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">应用篇</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a class="nav-link"><span class="title">常用图表类型</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a class="nav-link"><span class="title">柱状图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/basic-bar" class="nav-link"><span class="title">基础柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/stacked-bar" class="nav-link"><span class="title">堆叠柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/bar-race" class="nav-link"><span class="title">动态排序柱状图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/bar/waterfall" class="nav-link"><span class="title">阶梯瀑布图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">折线图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/basic-line" class="nav-link"><span class="title">基础折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/stacked-line" class="nav-link"><span class="title">堆叠折线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/area-line" class="nav-link"><span class="title">区域面积图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/smooth-line" class="nav-link"><span class="title">平滑曲线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/line/step-line" class="nav-link"><span class="title">阶梯线图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">饼图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/basic-pie" class="nav-link"><span class="title">基础饼图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/doughnut" class="nav-link"><span class="title">圆环图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/pie/rose" class="nav-link"><span class="title">南丁格尔图（玫瑰图）</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">散点图</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level3" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/chart-types/scatter/basic-scatter" class="nav-link"><span class="title">基础散点图</span></a> <ul class="nav bd-sidenav level4" style="display:none"></ul></li></ul></li></ul></li><!----><li class="nav-item"><a class="nav-link"><span class="title">跨平台方案</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/server" class="nav-link"><span class="title">服务端渲染</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/wechat-app" class="nav-link"><span class="title">微信小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/how-to/cross-platform/baidu-app" class="nav-link"><span class="title">百度智能小程序</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">数据处理</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/data/dynamic-data" class="nav-link"><span class="title">动态的异步数据</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----></ul></li><li class="nav-item"><a class="nav-link"><span class="title">标签</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/label/rich-text" class="nav-link"><span class="title">富文本标签</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">动画</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/animation/transition" class="nav-link"><span class="title">数据过渡动画</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li><li class="nav-item"><a class="nav-link"><span class="title">交互</span> <span class="glyphicon glyphicon-menu-down"></span></a> <ul class="nav bd-sidenav level2" style="display:none"><li class="nav-item"><a href="/handbook/zh/how-to/interaction/drag" class="nav-link"><span class="title">拖拽的实现</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li><!----><li class="nav-item"><a href="/handbook/zh/how-to/interaction/coarse-pointer" class="nav-link"><span class="title">智能指针吸附</span></a> <ul class="nav bd-sidenav level3" style="display:none"></ul></li></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">最佳实践</span></div> <ul class="nav bd-sidenav level1"><!----><li class="nav-item"><a href="/handbook/zh/best-practices/canvas-vs-svg" class="nav-link"><span class="title">Canvas vs. SVG</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li><li class="nav-item"><a href="/handbook/zh/best-practices/aria" class="nav-link"><span class="title">无障碍访问</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li><li class="nav-item"><div class="nav-link"><span class="title">编辑本文档</span></div> <ul class="nav bd-sidenav level1"><li class="nav-item"><a href="/handbook/zh/meta/edit-guide" class="nav-link"><span class="title">文档编辑指南</span></a> <ul class="nav bd-sidenav level2" style="display:none"></ul></li></ul></li></ul></div> <div class="open-sidebar"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg></div></div> <div class="bd-content col-sm-7 pl-sm-2 col-12"><div class="post-content content"><div><div class="post-inner"><!----> <div class="nuxt-content"><article><h1 id="echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B" tabindex="-1">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="%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">颜色主题（Theme）</h2> <p>最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 <a href="https://echarts.apache.org/examples">示例集合</a> 中，可以通过切换深色模式，直接看到采用主题的效果。</p> <p>ECharts5 除了一贯的默认主题外，还内置了<code>'dark'</code>主题。可以像这样切换成深色模式：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> <span class="token string">'dark'</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>其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 <a href="https://echarts.apache.org/theme-builder.html">主题编辑器</a> 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：</p> <p>如果主题保存为 JSON 文件，则需要自行加载和注册，例如：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// 假设主题名称是 "vintage"</span> |
| <span class="token function">fetch</span><span class="token punctuation">(</span><span class="token string">'theme/vintage.json'</span><span class="token punctuation">)</span> |
| <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">r</span> <span class="token operator">=></span> r<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> |
| <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">theme</span> <span class="token operator">=></span> <span class="token punctuation">{</span> |
| echarts<span class="token punctuation">.</span><span class="token function">registerTheme</span><span class="token punctuation">(</span><span class="token string">'vintage'</span><span class="token punctuation">,</span> theme<span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> <span class="token string">'vintage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre></div> <!----> <div class="clipboard" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-6 w-6" data-v-479657ca><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" data-v-479657ca></path></svg></svg></div></div> <p>如果保存为 UMD 格式的 JS 文件，文件内部已经做了自注册，直接引入 JS 即可：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code><span class="token comment">// HTML 引入 vintage.js 文件后（假设主题名称是 "vintage"）</span> |
| <span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>dom<span class="token punctuation">,</span> <span class="token string">'vintage'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
| <span class="token comment">// ...</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> <h2 id="%E8%B0%83%E8%89%B2%E7%9B%98" tabindex="-1">调色盘</h2> <p>调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。 |
| 可以设置全局的调色盘，也可以设置系列自己专属的调色盘。</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 全局调色盘。</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token string">'#c23531'</span><span class="token punctuation">,</span> |
| <span class="token string">'#2f4554'</span><span class="token punctuation">,</span> |
| <span class="token string">'#61a0a8'</span><span class="token punctuation">,</span> |
| <span class="token string">'#d48265'</span><span class="token punctuation">,</span> |
| <span class="token string">'#91c7ae'</span><span class="token punctuation">,</span> |
| <span class="token string">'#749f83'</span><span class="token punctuation">,</span> |
| <span class="token string">'#ca8622'</span><span class="token punctuation">,</span> |
| <span class="token string">'#bda29a'</span><span class="token punctuation">,</span> |
| <span class="token string">'#6e7074'</span><span class="token punctuation">,</span> |
| <span class="token string">'#546570'</span><span class="token punctuation">,</span> |
| <span class="token string">'#c4ccd3'</span> |
| <span class="token punctuation">]</span><span class="token punctuation">,</span> |
| |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span> |
| <span class="token comment">// 此系列自己的调色盘。</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token string">'#dd6b66'</span><span class="token punctuation">,</span> |
| <span class="token string">'#759aa0'</span><span class="token punctuation">,</span> |
| <span class="token string">'#e69d87'</span><span class="token punctuation">,</span> |
| <span class="token string">'#8dc1a9'</span><span class="token punctuation">,</span> |
| <span class="token string">'#ea7e53'</span><span class="token punctuation">,</span> |
| <span class="token string">'#eedd78'</span><span class="token punctuation">,</span> |
| <span class="token string">'#73a373'</span><span class="token punctuation">,</span> |
| <span class="token string">'#73b9bc'</span><span class="token punctuation">,</span> |
| <span class="token string">'#7289ab'</span><span class="token punctuation">,</span> |
| <span class="token string">'#91ca8c'</span><span class="token punctuation">,</span> |
| <span class="token string">'#f49f42'</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> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'pie'</span><span class="token punctuation">,</span> |
| <span class="token comment">// 此系列自己的调色盘。</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token string">'#37A2DA'</span><span class="token punctuation">,</span> |
| <span class="token string">'#32C5E9'</span><span class="token punctuation">,</span> |
| <span class="token string">'#67E0E3'</span><span class="token punctuation">,</span> |
| <span class="token string">'#9FE6B8'</span><span class="token punctuation">,</span> |
| <span class="token string">'#FFDB5C'</span><span class="token punctuation">,</span> |
| <span class="token string">'#ff9f7f'</span><span class="token punctuation">,</span> |
| <span class="token string">'#fb7293'</span><span class="token punctuation">,</span> |
| <span class="token string">'#E062AE'</span><span class="token punctuation">,</span> |
| <span class="token string">'#E690D1'</span><span class="token punctuation">,</span> |
| <span class="token string">'#e7bcf3'</span><span class="token punctuation">,</span> |
| <span class="token string">'#9d96f5'</span><span class="token punctuation">,</span> |
| <span class="token string">'#8378EA'</span><span class="token punctuation">,</span> |
| <span class="token string">'#96BFFF'</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><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> <h2 id="%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">直接的样式设置</h2> <p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href="https://echarts.apache.org/option.html#">option</a> 中，很多地方可以设置 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle">itemStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.lineStyle">lineStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.areaStyle">areaStyle</a>、<a href="https://echarts.apache.org/option.html#series-bar.label">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p> <p>一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p> <p>在下面例子中我们给气泡图设置了阴影，渐变色等复杂的样式，你可以修改代码中的样式看修改后的效果：</p> <div class="md-live layout-tb"><div class="md-live-editor"><div class="md-live-editor-container"><div class="prism-editor-wrapper"><div class="prism-editor__container"><textarea spellcheck="false" autocapitalize="off" autocomplete="off" autocorrect="off" data-gramm="false" placeholder="" data-testid="textarea" class="prism-editor__textarea">var data = [ |
| [ |
| [28604, 77, 17096869, 'Australia', 1990], |
| [31163, 77.4, 27662440, 'Canada', 1990], |
| [1516, 68, 1154605773, 'China', 1990], |
| [13670, 74.7, 10582082, 'Cuba', 1990], |
| [28599, 75, 4986705, 'Finland', 1990], |
| [29476, 77.1, 56943299, 'France', 1990], |
| [31476, 75.4, 78958237, 'Germany', 1990], |
| [28666, 78.1, 254830, 'Iceland', 1990], |
| [1777, 57.7, 870601776, 'India', 1990], |
| [29550, 79.1, 122249285, 'Japan', 1990], |
| [2076, 67.9, 20194354, 'North Korea', 1990], |
| [12087, 72, 42972254, 'South Korea', 1990], |
| [24021, 75.4, 3397534, 'New Zealand', 1990], |
| [43296, 76.8, 4240375, 'Norway', 1990], |
| [10088, 70.8, 38195258, 'Poland', 1990], |
| [19349, 69.6, 147568552, 'Russia', 1990], |
| [10670, 67.3, 53994605, 'Turkey', 1990], |
| [26424, 75.7, 57110117, 'United Kingdom', 1990], |
| [37062, 75.4, 252847810, 'United States', 1990] |
| ], |
| [ |
| [44056, 81.8, 23968973, 'Australia', 2015], |
| [43294, 81.7, 35939927, 'Canada', 2015], |
| [13334, 76.9, 1376048943, 'China', 2015], |
| [21291, 78.5, 11389562, 'Cuba', 2015], |
| [38923, 80.8, 5503457, 'Finland', 2015], |
| [37599, 81.9, 64395345, 'France', 2015], |
| [44053, 81.1, 80688545, 'Germany', 2015], |
| [42182, 82.8, 329425, 'Iceland', 2015], |
| [5903, 66.8, 1311050527, 'India', 2015], |
| [36162, 83.5, 126573481, 'Japan', 2015], |
| [1390, 71.4, 25155317, 'North Korea', 2015], |
| [34644, 80.7, 50293439, 'South Korea', 2015], |
| [34186, 80.6, 4528526, 'New Zealand', 2015], |
| [64304, 81.6, 5210967, 'Norway', 2015], |
| [24787, 77.3, 38611794, 'Poland', 2015], |
| [23038, 73.13, 143456918, 'Russia', 2015], |
| [19360, 76.5, 78665830, 'Turkey', 2015], |
| [38225, 81.4, 64715810, 'United Kingdom', 2015], |
| [53354, 79.1, 321773631, 'United States', 2015] |
| ] |
| ]; |
| |
| option = { |
| backgroundColor: { |
| type: 'radial', |
| x: 0.3, |
| y: 0.3, |
| r: 0.8, |
| colorStops: [ |
| { |
| offset: 0, |
| color: '#f7f8fa' |
| }, |
| { |
| offset: 1, |
| color: '#cdd0d5' |
| } |
| ] |
| }, |
| grid: { |
| left: 10, |
| containLabel: true, |
| bottom: 10, |
| top: 10, |
| right: 30 |
| }, |
| xAxis: { |
| splitLine: { |
| show: false |
| } |
| }, |
| yAxis: { |
| splitLine: { |
| show: false |
| }, |
| scale: true |
| }, |
| series: [ |
| { |
| name: '1990', |
| data: data[0], |
| type: 'scatter', |
| symbolSize: function(data) { |
| return Math.sqrt(data[2]) / 5e2; |
| }, |
| emphasis: { |
| focus: 'series', |
| label: { |
| show: true, |
| formatter: function(param) { |
| return param.data[3]; |
| }, |
| position: 'top' |
| } |
| }, |
| itemStyle: { |
| shadowBlur: 10, |
| shadowColor: 'rgba(120, 36, 50, 0.5)', |
| shadowOffsetY: 5, |
| color: { |
| type: 'radial', |
| x: 0.4, |
| y: 0.3, |
| r: 1, |
| colorStops: [ |
| { |
| offset: 0, |
| color: 'rgb(251, 118, 123)' |
| }, |
| { |
| offset: 1, |
| color: 'rgb(204, 46, 72)' |
| } |
| ] |
| } |
| } |
| }, |
| { |
| name: '2015', |
| data: data[1], |
| type: 'scatter', |
| symbolSize: function(data) { |
| return Math.sqrt(data[2]) / 5e2; |
| }, |
| emphasis: { |
| focus: 'series', |
| label: { |
| show: true, |
| formatter: function(param) { |
| return param.data[3]; |
| }, |
| position: 'top' |
| } |
| }, |
| itemStyle: { |
| shadowBlur: 10, |
| shadowColor: 'rgba(25, 100, 150, 0.5)', |
| shadowOffsetY: 5, |
| color: { |
| type: 'radial', |
| x: 0.4, |
| y: 0.3, |
| r: 1, |
| colorStops: [ |
| { |
| offset: 0, |
| color: 'rgb(129, 227, 238)' |
| }, |
| { |
| offset: 1, |
| color: 'rgb(25, 183, 207)' |
| } |
| ] |
| } |
| } |
| } |
| ] |
| };</textarea><pre data-testid="preview" class="prism-editor__editor"><span class="token keyword">var</span> data <span class="token operator">=</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span> |
| <span class="token punctuation">[</span><span class="token number">28604</span><span class="token punctuation">,</span> <span class="token number">77</span><span class="token punctuation">,</span> <span class="token number">17096869</span><span class="token punctuation">,</span> <span class="token string">'Australia'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">31163</span><span class="token punctuation">,</span> <span class="token number">77.4</span><span class="token punctuation">,</span> <span class="token number">27662440</span><span class="token punctuation">,</span> <span class="token string">'Canada'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">1516</span><span class="token punctuation">,</span> <span class="token number">68</span><span class="token punctuation">,</span> <span class="token number">1154605773</span><span class="token punctuation">,</span> <span class="token string">'China'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">13670</span><span class="token punctuation">,</span> <span class="token number">74.7</span><span class="token punctuation">,</span> <span class="token number">10582082</span><span class="token punctuation">,</span> <span class="token string">'Cuba'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">28599</span><span class="token punctuation">,</span> <span class="token number">75</span><span class="token punctuation">,</span> <span class="token number">4986705</span><span class="token punctuation">,</span> <span class="token string">'Finland'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">29476</span><span class="token punctuation">,</span> <span class="token number">77.1</span><span class="token punctuation">,</span> <span class="token number">56943299</span><span class="token punctuation">,</span> <span class="token string">'France'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">31476</span><span class="token punctuation">,</span> <span class="token number">75.4</span><span class="token punctuation">,</span> <span class="token number">78958237</span><span class="token punctuation">,</span> <span class="token string">'Germany'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">28666</span><span class="token punctuation">,</span> <span class="token number">78.1</span><span class="token punctuation">,</span> <span class="token number">254830</span><span class="token punctuation">,</span> <span class="token string">'Iceland'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">1777</span><span class="token punctuation">,</span> <span class="token number">57.7</span><span class="token punctuation">,</span> <span class="token number">870601776</span><span class="token punctuation">,</span> <span class="token string">'India'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">29550</span><span class="token punctuation">,</span> <span class="token number">79.1</span><span class="token punctuation">,</span> <span class="token number">122249285</span><span class="token punctuation">,</span> <span class="token string">'Japan'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">2076</span><span class="token punctuation">,</span> <span class="token number">67.9</span><span class="token punctuation">,</span> <span class="token number">20194354</span><span class="token punctuation">,</span> <span class="token string">'North Korea'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">12087</span><span class="token punctuation">,</span> <span class="token number">72</span><span class="token punctuation">,</span> <span class="token number">42972254</span><span class="token punctuation">,</span> <span class="token string">'South Korea'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">24021</span><span class="token punctuation">,</span> <span class="token number">75.4</span><span class="token punctuation">,</span> <span class="token number">3397534</span><span class="token punctuation">,</span> <span class="token string">'New Zealand'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">43296</span><span class="token punctuation">,</span> <span class="token number">76.8</span><span class="token punctuation">,</span> <span class="token number">4240375</span><span class="token punctuation">,</span> <span class="token string">'Norway'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">10088</span><span class="token punctuation">,</span> <span class="token number">70.8</span><span class="token punctuation">,</span> <span class="token number">38195258</span><span class="token punctuation">,</span> <span class="token string">'Poland'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">19349</span><span class="token punctuation">,</span> <span class="token number">69.6</span><span class="token punctuation">,</span> <span class="token number">147568552</span><span class="token punctuation">,</span> <span class="token string">'Russia'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">10670</span><span class="token punctuation">,</span> <span class="token number">67.3</span><span class="token punctuation">,</span> <span class="token number">53994605</span><span class="token punctuation">,</span> <span class="token string">'Turkey'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">26424</span><span class="token punctuation">,</span> <span class="token number">75.7</span><span class="token punctuation">,</span> <span class="token number">57110117</span><span class="token punctuation">,</span> <span class="token string">'United Kingdom'</span><span class="token punctuation">,</span> <span class="token number">1990</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">37062</span><span class="token punctuation">,</span> <span class="token number">75.4</span><span class="token punctuation">,</span> <span class="token number">252847810</span><span class="token punctuation">,</span> <span class="token string">'United States'</span><span class="token punctuation">,</span> <span class="token number">1990</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 number">44056</span><span class="token punctuation">,</span> <span class="token number">81.8</span><span class="token punctuation">,</span> <span class="token number">23968973</span><span class="token punctuation">,</span> <span class="token string">'Australia'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">43294</span><span class="token punctuation">,</span> <span class="token number">81.7</span><span class="token punctuation">,</span> <span class="token number">35939927</span><span class="token punctuation">,</span> <span class="token string">'Canada'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">13334</span><span class="token punctuation">,</span> <span class="token number">76.9</span><span class="token punctuation">,</span> <span class="token number">1376048943</span><span class="token punctuation">,</span> <span class="token string">'China'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">21291</span><span class="token punctuation">,</span> <span class="token number">78.5</span><span class="token punctuation">,</span> <span class="token number">11389562</span><span class="token punctuation">,</span> <span class="token string">'Cuba'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">38923</span><span class="token punctuation">,</span> <span class="token number">80.8</span><span class="token punctuation">,</span> <span class="token number">5503457</span><span class="token punctuation">,</span> <span class="token string">'Finland'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">37599</span><span class="token punctuation">,</span> <span class="token number">81.9</span><span class="token punctuation">,</span> <span class="token number">64395345</span><span class="token punctuation">,</span> <span class="token string">'France'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">44053</span><span class="token punctuation">,</span> <span class="token number">81.1</span><span class="token punctuation">,</span> <span class="token number">80688545</span><span class="token punctuation">,</span> <span class="token string">'Germany'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">42182</span><span class="token punctuation">,</span> <span class="token number">82.8</span><span class="token punctuation">,</span> <span class="token number">329425</span><span class="token punctuation">,</span> <span class="token string">'Iceland'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">5903</span><span class="token punctuation">,</span> <span class="token number">66.8</span><span class="token punctuation">,</span> <span class="token number">1311050527</span><span class="token punctuation">,</span> <span class="token string">'India'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">36162</span><span class="token punctuation">,</span> <span class="token number">83.5</span><span class="token punctuation">,</span> <span class="token number">126573481</span><span class="token punctuation">,</span> <span class="token string">'Japan'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">1390</span><span class="token punctuation">,</span> <span class="token number">71.4</span><span class="token punctuation">,</span> <span class="token number">25155317</span><span class="token punctuation">,</span> <span class="token string">'North Korea'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">34644</span><span class="token punctuation">,</span> <span class="token number">80.7</span><span class="token punctuation">,</span> <span class="token number">50293439</span><span class="token punctuation">,</span> <span class="token string">'South Korea'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">34186</span><span class="token punctuation">,</span> <span class="token number">80.6</span><span class="token punctuation">,</span> <span class="token number">4528526</span><span class="token punctuation">,</span> <span class="token string">'New Zealand'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">64304</span><span class="token punctuation">,</span> <span class="token number">81.6</span><span class="token punctuation">,</span> <span class="token number">5210967</span><span class="token punctuation">,</span> <span class="token string">'Norway'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">24787</span><span class="token punctuation">,</span> <span class="token number">77.3</span><span class="token punctuation">,</span> <span class="token number">38611794</span><span class="token punctuation">,</span> <span class="token string">'Poland'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">23038</span><span class="token punctuation">,</span> <span class="token number">73.13</span><span class="token punctuation">,</span> <span class="token number">143456918</span><span class="token punctuation">,</span> <span class="token string">'Russia'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">19360</span><span class="token punctuation">,</span> <span class="token number">76.5</span><span class="token punctuation">,</span> <span class="token number">78665830</span><span class="token punctuation">,</span> <span class="token string">'Turkey'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">38225</span><span class="token punctuation">,</span> <span class="token number">81.4</span><span class="token punctuation">,</span> <span class="token number">64715810</span><span class="token punctuation">,</span> <span class="token string">'United Kingdom'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token punctuation">[</span><span class="token number">53354</span><span class="token punctuation">,</span> <span class="token number">79.1</span><span class="token punctuation">,</span> <span class="token number">321773631</span><span class="token punctuation">,</span> <span class="token string">'United States'</span><span class="token punctuation">,</span> <span class="token number">2015</span><span class="token punctuation">]</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">]</span><span class="token punctuation">;</span> |
| |
| option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">backgroundColor</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'radial'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">r</span><span class="token operator">:</span> <span class="token number">0.8</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">colorStops</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#f7f8fa'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'#cdd0d5'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">grid</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">left</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">containLabel</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">bottom</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">top</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">right</span><span class="token operator">:</span> <span class="token number">30</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">xAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">splitLine</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">yAxis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">splitLine</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">false</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">scale</span><span class="token operator">:</span> <span class="token boolean">true</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'1990'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">symbolSize</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">5e2</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">focus</span><span class="token operator">:</span> <span class="token string">'series'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> param<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token string">'top'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">shadowBlur</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowColor</span><span class="token operator">:</span> <span class="token string">'rgba(120, 36, 50, 0.5)'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowOffsetY</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'radial'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">0.4</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">r</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">colorStops</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rgb(251, 118, 123)'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rgb(204, 46, 72)'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">]</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'2015'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">data</span><span class="token operator">:</span> data<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">symbolSize</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> Math<span class="token punctuation">.</span><span class="token function">sqrt</span><span class="token punctuation">(</span>data<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">/</span> <span class="token number">5e2</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">focus</span><span class="token operator">:</span> <span class="token string">'series'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token function-variable function">formatter</span><span class="token operator">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">param</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> |
| <span class="token keyword">return</span> param<span class="token punctuation">.</span>data<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">;</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">position</span><span class="token operator">:</span> <span class="token string">'top'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">shadowBlur</span><span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowColor</span><span class="token operator">:</span> <span class="token string">'rgba(25, 100, 150, 0.5)'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">shadowOffsetY</span><span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'radial'</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">x</span><span class="token operator">:</span> <span class="token number">0.4</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">y</span><span class="token operator">:</span> <span class="token number">0.3</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">r</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">colorStops</span><span class="token operator">:</span> <span class="token punctuation">[</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rgb(129, 227, 238)'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token punctuation">{</span> |
| <span class="token literal-property property">offset</span><span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'rgb(25, 183, 207)'</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><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="%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis" tabindex="-1">高亮的样式：emphasis</h2> <p>在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> 属性来定制。<a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> 中的结构，和普通样式的结构相同，例如：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span> |
| |
| <span class="token comment">// 普通样式。</span> |
| <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 点的颜色。</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token comment">// 标签的文字。</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'This is a normal label.'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| |
| <span class="token comment">// 高亮样式。</span> |
| <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 高亮时点的颜色。</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token comment">// 高亮时标签的文字。</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'This is a emphasis label.'</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></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>注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：</p> <div class="md-code-block"><div class="nuxt-content-highlight"><pre class="language-js line-numbers"><code>option <span class="token operator">=</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">series</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">'scatter'</span><span class="token punctuation">,</span> |
| |
| <span class="token literal-property property">itemStyle</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 普通样式。</span> |
| <span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 点的颜色。</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'red'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">// 高亮样式。</span> |
| <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 高亮时点的颜色。</span> |
| <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">'blue'</span> |
| <span class="token punctuation">}</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| |
| <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token comment">// 普通样式。</span> |
| <span class="token literal-property property">normal</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token comment">// 标签的文字。</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'This is a normal label.'</span> |
| <span class="token punctuation">}</span><span class="token punctuation">,</span> |
| <span class="token comment">// 高亮样式。</span> |
| <span class="token literal-property property">emphasis</span><span class="token operator">:</span> <span class="token punctuation">{</span> |
| <span class="token literal-property property">show</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> |
| <span class="token comment">// 高亮时标签的文字。</span> |
| <span class="token literal-property property">formatter</span><span class="token operator">:</span> <span class="token string">'This is a emphasis label.'</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></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>这种写法 <strong>仍然被兼容</strong>，但是，不再推荐。事实上，多数情况下，开发者只想配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 <code>normal</code> 的配置方法（即前一个代码片段里的写法），使得配置项更扁平简单。</p> <h2 id="%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" tabindex="-1">通过 visualMap 组件设定样式</h2> <p><a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则，详见 <a href="zh/concepts/visual-map">数据的视觉映射</a>。</p></article></div></div> <div class="post-contributors"><h3><span class="inline-block align-middle">本文贡献者</span> <a target="_blank" href="https://github.com/apache/echarts-handbook/tree/master/contents/zh/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" loading="lazy"> <span>pissang</span></a><a href="https://github.com/plainheart" target="_blank" class="post-contributor"><img alt="plainheart" src="https://avatars.githubusercontent.com/plainheart?size=60" loading="lazy"> <span>plainheart</span></a><a href="https://github.com/wangcheng0825" target="_blank" class="post-contributor"><img alt="wangcheng0825" src="https://avatars.githubusercontent.com/wangcheng0825?size=60" loading="lazy"> <span>wangcheng0825</span></a><a href="https://github.com/fuchunhui" target="_blank" class="post-contributor"><img alt="fuchunhui" src="https://avatars.githubusercontent.com/fuchunhui?size=60" loading="lazy"> <span>fuchunhui</span></a><a href="https://github.com/1335951413" target="_blank" class="post-contributor"><img alt="1335951413" src="https://avatars.githubusercontent.com/1335951413?size=60" loading="lazy"> <span>1335951413</span></a></div></div></div></div></div></div> <link rel="stylesheet" href="//fastly.jsdelivr.net/npm/highlight.js@9.12.0/styles/github-gist.min.css"></div></div></div></div><script>window.__NUXT__=function(g,I,C,A,i,t,e,l,d,a,r,s,o,n,c,h,w,y,M,N,m,p,b,B,D,L,z,O,T,E,Y,G,K,j,S,Z,J,u,W,k,x,F,v,X,H,f,U,V,R,Q,P,q,_,$,gg,Ig,Cg,Ag){return{layout:"default",data:[{html:'<h1 id="echarts-%E4%B8%AD%E7%9A%84%E6%A0%B7%E5%BC%8F%E7%AE%80%E4%BB%8B" tabindex="-1">ECharts 中的样式简介</h1>\n<p>本文主要是大略概述，用哪些方法，可以在 Apache ECharts<sup>TM</sup> 中设置样式，改变图形元素或者文字的颜色、明暗、大小等。</p>\n<blockquote>\n<p>为了让表述更通俗易懂，我们在这里用了“样式”这种可能不是很符合数据可视化思维的词</p>\n</blockquote>\n<p>本文介绍这几种方式，他们的功能范畴可能会有交叉（即同一种细节的效果可能可以用不同的方式实现），但是他们各有各的场景偏好。</p>\n<ul>\n<li>颜色主题（Theme）</li>\n<li>调色盘</li>\n<li>直接样式设置（itemStyle、lineStyle、areaStyle、label、...）</li>\n<li>视觉映射（visualMap）</li>\n</ul>\n<h2 id="%E9%A2%9C%E8%89%B2%E4%B8%BB%E9%A2%98%EF%BC%88theme%EF%BC%89" tabindex="-1">颜色主题（Theme）</h2>\n<p>最简单的更改全局样式的方式，是直接采用颜色主题（theme）。例如，在 <a href="https://echarts.apache.org/examples">示例集合</a> 中，可以通过切换深色模式，直接看到采用主题的效果。</p>\n<p>ECharts5 除了一贯的默认主题外，还内置了<code>\'dark\'</code>主题。可以像这样切换成深色模式：</p>\n<md-code-block lang="js" code="\'dmFyIGNoYXJ0ID0gZWNoYXJ0cy5pbml0KGRvbSwgJ2RhcmsnKTs\'" line-highlights="\'\'" />\n<p>其他的主题，没有内置在 ECharts 中，需要自己加载。这些主题可以在 <a href="https://echarts.apache.org/theme-builder.html">主题编辑器</a> 里访问到。也可以使用这个主题编辑器，自己编辑主题。下载下来的主题可以这样使用：</p>\n<p>如果主题保存为 JSON 文件，则需要自行加载和注册，例如：</p>\n<md-code-block lang="js" code="\'Ly8g5YGH6K6-5Li76aKY5ZCN56ew5pivICJ2aW50YWdlIgpmZXRjaCgndGhlbWUvdmludGFnZS5qc29uJykKICAudGhlbihyID0-IHIuanNvbigpKQogIC50aGVuKHRoZW1lID0-IHsKICAgIGVjaGFydHMucmVnaXN0ZXJUaGVtZSgndmludGFnZScsIHRoZW1lKTsKICAgIHZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sICd2aW50YWdlJyk7CiAgfSk\'" line-highlights="\'\'" />\n<p>如果保存为 UMD 格式的 JS 文件，文件内部已经做了自注册，直接引入 JS 即可：</p>\n<md-code-block lang="js" code="\'Ly8gSFRNTCDlvJXlhaUgdmludGFnZS5qcyDmlofku7blkI7vvIjlgYforr7kuLvpopjlkI3np7DmmK8gInZpbnRhZ2Ui77yJCnZhciBjaGFydCA9IGVjaGFydHMuaW5pdChkb20sICd2aW50YWdlJyk7Ci8vIC4uLg\'" line-highlights="\'\'" />\n<h2 id="%E8%B0%83%E8%89%B2%E7%9B%98" tabindex="-1">调色盘</h2>\n<p>调色盘，可以在 option 中设置。它给定了一组颜色，图形、系列会自动从其中选择颜色。\n可以设置全局的调色盘，也可以设置系列自己专属的调色盘。</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIC8vIOWFqOWxgOiwg-iJsuebmOOAggogIGNvbG9yOiBbCiAgICAnI2MyMzUzMScsCiAgICAnIzJmNDU1NCcsCiAgICAnIzYxYTBhOCcsCiAgICAnI2Q0ODI2NScsCiAgICAnIzkxYzdhZScsCiAgICAnIzc0OWY4MycsCiAgICAnI2NhODYyMicsCiAgICAnI2JkYTI5YScsCiAgICAnIzZlNzA3NCcsCiAgICAnIzU0NjU3MCcsCiAgICAnI2M0Y2NkMycKICBdLAoKICBzZXJpZXM6IFsKICAgIHsKICAgICAgdHlwZTogJ2JhcicsCiAgICAgIC8vIOatpOezu-WIl-iHquW3seeahOiwg-iJsuebmOOAggogICAgICBjb2xvcjogWwogICAgICAgICcjZGQ2YjY2JywKICAgICAgICAnIzc1OWFhMCcsCiAgICAgICAgJyNlNjlkODcnLAogICAgICAgICcjOGRjMWE5JywKICAgICAgICAnI2VhN2U1MycsCiAgICAgICAgJyNlZWRkNzgnLAogICAgICAgICcjNzNhMzczJywKICAgICAgICAnIzczYjliYycsCiAgICAgICAgJyM3Mjg5YWInLAogICAgICAgICcjOTFjYThjJywKICAgICAgICAnI2Y0OWY0MicKICAgICAgXQogICAgICAvLyAuLi4KICAgIH0sCiAgICB7CiAgICAgIHR5cGU6ICdwaWUnLAogICAgICAvLyDmraTns7vliJfoh6rlt7HnmoTosIPoibLnm5jjgIIKICAgICAgY29sb3I6IFsKICAgICAgICAnIzM3QTJEQScsCiAgICAgICAgJyMzMkM1RTknLAogICAgICAgICcjNjdFMEUzJywKICAgICAgICAnIzlGRTZCOCcsCiAgICAgICAgJyNGRkRCNUMnLAogICAgICAgICcjZmY5ZjdmJywKICAgICAgICAnI2ZiNzI5MycsCiAgICAgICAgJyNFMDYyQUUnLAogICAgICAgICcjRTY5MEQxJywKICAgICAgICAnI2U3YmNmMycsCiAgICAgICAgJyM5ZDk2ZjUnLAogICAgICAgICcjODM3OEVBJywKICAgICAgICAnIzk2QkZGRicKICAgICAgXQogICAgICAvLyAuLi4KICAgIH0KICBdCn07\'" line-highlights="\'\'" />\n<h2 id="%E7%9B%B4%E6%8E%A5%E7%9A%84%E6%A0%B7%E5%BC%8F%E8%AE%BE%E7%BD%AE" tabindex="-1">直接的样式设置</h2>\n<p>直接的样式设置是比较常用设置方式。纵观 ECharts 的 <a href="https://echarts.apache.org/option.html#">option</a> 中，很多地方可以设置 <a href="https://echarts.apache.org/option.html#series-bar.itemStyle">itemStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.lineStyle">lineStyle</a>、<a href="https://echarts.apache.org/option.html#series-line.areaStyle">areaStyle</a>、<a href="https://echarts.apache.org/option.html#series-bar.label">label</a> 等等。这些的地方可以直接设置图形元素的颜色、线宽、点的大小、标签的文字、标签的样式等等。</p>\n<p>一般来说，ECharts 的各个系列和组件，都遵从这些命名习惯，虽然不同图表和组件中，<code>itemStyle</code>、<code>label</code> 等可能出现在不同的地方。</p>\n<p>在下面例子中我们给气泡图设置了阴影，渐变色等复杂的样式，你可以修改代码中的样式看修改后的效果：</p>\n<md-live lang="js" code="\'dmFyIGRhdGEgPSBbCiAgWwogICAgWzI4NjA0LCA3NywgMTcwOTY4NjksICdBdXN0cmFsaWEnLCAxOTkwXSwKICAgIFszMTE2MywgNzcuNCwgMjc2NjI0NDAsICdDYW5hZGEnLCAxOTkwXSwKICAgIFsxNTE2LCA2OCwgMTE1NDYwNTc3MywgJ0NoaW5hJywgMTk5MF0sCiAgICBbMTM2NzAsIDc0LjcsIDEwNTgyMDgyLCAnQ3ViYScsIDE5OTBdLAogICAgWzI4NTk5LCA3NSwgNDk4NjcwNSwgJ0ZpbmxhbmQnLCAxOTkwXSwKICAgIFsyOTQ3NiwgNzcuMSwgNTY5NDMyOTksICdGcmFuY2UnLCAxOTkwXSwKICAgIFszMTQ3NiwgNzUuNCwgNzg5NTgyMzcsICdHZXJtYW55JywgMTk5MF0sCiAgICBbMjg2NjYsIDc4LjEsIDI1NDgzMCwgJ0ljZWxhbmQnLCAxOTkwXSwKICAgIFsxNzc3LCA1Ny43LCA4NzA2MDE3NzYsICdJbmRpYScsIDE5OTBdLAogICAgWzI5NTUwLCA3OS4xLCAxMjIyNDkyODUsICdKYXBhbicsIDE5OTBdLAogICAgWzIwNzYsIDY3LjksIDIwMTk0MzU0LCAnTm9ydGggS29yZWEnLCAxOTkwXSwKICAgIFsxMjA4NywgNzIsIDQyOTcyMjU0LCAnU291dGggS29yZWEnLCAxOTkwXSwKICAgIFsyNDAyMSwgNzUuNCwgMzM5NzUzNCwgJ05ldyBaZWFsYW5kJywgMTk5MF0sCiAgICBbNDMyOTYsIDc2LjgsIDQyNDAzNzUsICdOb3J3YXknLCAxOTkwXSwKICAgIFsxMDA4OCwgNzAuOCwgMzgxOTUyNTgsICdQb2xhbmQnLCAxOTkwXSwKICAgIFsxOTM0OSwgNjkuNiwgMTQ3NTY4NTUyLCAnUnVzc2lhJywgMTk5MF0sCiAgICBbMTA2NzAsIDY3LjMsIDUzOTk0NjA1LCAnVHVya2V5JywgMTk5MF0sCiAgICBbMjY0MjQsIDc1LjcsIDU3MTEwMTE3LCAnVW5pdGVkIEtpbmdkb20nLCAxOTkwXSwKICAgIFszNzA2MiwgNzUuNCwgMjUyODQ3ODEwLCAnVW5pdGVkIFN0YXRlcycsIDE5OTBdCiAgXSwKICBbCiAgICBbNDQwNTYsIDgxLjgsIDIzOTY4OTczLCAnQXVzdHJhbGlhJywgMjAxNV0sCiAgICBbNDMyOTQsIDgxLjcsIDM1OTM5OTI3LCAnQ2FuYWRhJywgMjAxNV0sCiAgICBbMTMzMzQsIDc2LjksIDEzNzYwNDg5NDMsICdDaGluYScsIDIwMTVdLAogICAgWzIxMjkxLCA3OC41LCAxMTM4OTU2MiwgJ0N1YmEnLCAyMDE1XSwKICAgIFszODkyMywgODAuOCwgNTUwMzQ1NywgJ0ZpbmxhbmQnLCAyMDE1XSwKICAgIFszNzU5OSwgODEuOSwgNjQzOTUzNDUsICdGcmFuY2UnLCAyMDE1XSwKICAgIFs0NDA1MywgODEuMSwgODA2ODg1NDUsICdHZXJtYW55JywgMjAxNV0sCiAgICBbNDIxODIsIDgyLjgsIDMyOTQyNSwgJ0ljZWxhbmQnLCAyMDE1XSwKICAgIFs1OTAzLCA2Ni44LCAxMzExMDUwNTI3LCAnSW5kaWEnLCAyMDE1XSwKICAgIFszNjE2MiwgODMuNSwgMTI2NTczNDgxLCAnSmFwYW4nLCAyMDE1XSwKICAgIFsxMzkwLCA3MS40LCAyNTE1NTMxNywgJ05vcnRoIEtvcmVhJywgMjAxNV0sCiAgICBbMzQ2NDQsIDgwLjcsIDUwMjkzNDM5LCAnU291dGggS29yZWEnLCAyMDE1XSwKICAgIFszNDE4NiwgODAuNiwgNDUyODUyNiwgJ05ldyBaZWFsYW5kJywgMjAxNV0sCiAgICBbNjQzMDQsIDgxLjYsIDUyMTA5NjcsICdOb3J3YXknLCAyMDE1XSwKICAgIFsyNDc4NywgNzcuMywgMzg2MTE3OTQsICdQb2xhbmQnLCAyMDE1XSwKICAgIFsyMzAzOCwgNzMuMTMsIDE0MzQ1NjkxOCwgJ1J1c3NpYScsIDIwMTVdLAogICAgWzE5MzYwLCA3Ni41LCA3ODY2NTgzMCwgJ1R1cmtleScsIDIwMTVdLAogICAgWzM4MjI1LCA4MS40LCA2NDcxNTgxMCwgJ1VuaXRlZCBLaW5nZG9tJywgMjAxNV0sCiAgICBbNTMzNTQsIDc5LjEsIDMyMTc3MzYzMSwgJ1VuaXRlZCBTdGF0ZXMnLCAyMDE1XQogIF0KXTsKCm9wdGlvbiA9IHsKICBiYWNrZ3JvdW5kQ29sb3I6IHsKICAgIHR5cGU6ICdyYWRpYWwnLAogICAgeDogMC4zLAogICAgeTogMC4zLAogICAgcjogMC44LAogICAgY29sb3JTdG9wczogWwogICAgICB7CiAgICAgICAgb2Zmc2V0OiAwLAogICAgICAgIGNvbG9yOiAnI2Y3ZjhmYScKICAgICAgfSwKICAgICAgewogICAgICAgIG9mZnNldDogMSwKICAgICAgICBjb2xvcjogJyNjZGQwZDUnCiAgICAgIH0KICAgIF0KICB9LAogIGdyaWQ6IHsKICAgIGxlZnQ6IDEwLAogICAgY29udGFpbkxhYmVsOiB0cnVlLAogICAgYm90dG9tOiAxMCwKICAgIHRvcDogMTAsCiAgICByaWdodDogMzAKICB9LAogIHhBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0KICB9LAogIHlBeGlzOiB7CiAgICBzcGxpdExpbmU6IHsKICAgICAgc2hvdzogZmFsc2UKICAgIH0sCiAgICBzY2FsZTogdHJ1ZQogIH0sCiAgc2VyaWVzOiBbCiAgICB7CiAgICAgIG5hbWU6ICcxOTkwJywKICAgICAgZGF0YTogZGF0YVswXSwKICAgICAgdHlwZTogJ3NjYXR0ZXInLAogICAgICBzeW1ib2xTaXplOiBmdW5jdGlvbihkYXRhKSB7CiAgICAgICAgcmV0dXJuIE1hdGguc3FydChkYXRhWzJdKSAvIDVlMjsKICAgICAgfSwKICAgICAgZW1waGFzaXM6IHsKICAgICAgICBmb2N1czogJ3NlcmllcycsCiAgICAgICAgbGFiZWw6IHsKICAgICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgICBmb3JtYXR0ZXI6IGZ1bmN0aW9uKHBhcmFtKSB7CiAgICAgICAgICAgIHJldHVybiBwYXJhbS5kYXRhWzNdOwogICAgICAgICAgfSwKICAgICAgICAgIHBvc2l0aW9uOiAndG9wJwogICAgICAgIH0KICAgICAgfSwKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgc2hhZG93Qmx1cjogMTAsCiAgICAgICAgc2hhZG93Q29sb3I6ICdyZ2JhKDEyMCwgMzYsIDUwLCAwLjUpJywKICAgICAgICBzaGFkb3dPZmZzZXRZOiA1LAogICAgICAgIGNvbG9yOiB7CiAgICAgICAgICB0eXBlOiAncmFkaWFsJywKICAgICAgICAgIHg6IDAuNCwKICAgICAgICAgIHk6IDAuMywKICAgICAgICAgIHI6IDEsCiAgICAgICAgICBjb2xvclN0b3BzOiBbCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDAsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjUxLCAxMTgsIDEyMyknCiAgICAgICAgICAgIH0sCiAgICAgICAgICAgIHsKICAgICAgICAgICAgICBvZmZzZXQ6IDEsCiAgICAgICAgICAgICAgY29sb3I6ICdyZ2IoMjA0LCA0NiwgNzIpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9LAogICAgewogICAgICBuYW1lOiAnMjAxNScsCiAgICAgIGRhdGE6IGRhdGFbMV0sCiAgICAgIHR5cGU6ICdzY2F0dGVyJywKICAgICAgc3ltYm9sU2l6ZTogZnVuY3Rpb24oZGF0YSkgewogICAgICAgIHJldHVybiBNYXRoLnNxcnQoZGF0YVsyXSkgLyA1ZTI7CiAgICAgIH0sCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgZm9jdXM6ICdzZXJpZXMnLAogICAgICAgIGxhYmVsOiB7CiAgICAgICAgICBzaG93OiB0cnVlLAogICAgICAgICAgZm9ybWF0dGVyOiBmdW5jdGlvbihwYXJhbSkgewogICAgICAgICAgICByZXR1cm4gcGFyYW0uZGF0YVszXTsKICAgICAgICAgIH0sCiAgICAgICAgICBwb3NpdGlvbjogJ3RvcCcKICAgICAgICB9CiAgICAgIH0sCiAgICAgIGl0ZW1TdHlsZTogewogICAgICAgIHNoYWRvd0JsdXI6IDEwLAogICAgICAgIHNoYWRvd0NvbG9yOiAncmdiYSgyNSwgMTAwLCAxNTAsIDAuNSknLAogICAgICAgIHNoYWRvd09mZnNldFk6IDUsCiAgICAgICAgY29sb3I6IHsKICAgICAgICAgIHR5cGU6ICdyYWRpYWwnLAogICAgICAgICAgeDogMC40LAogICAgICAgICAgeTogMC4zLAogICAgICAgICAgcjogMSwKICAgICAgICAgIGNvbG9yU3RvcHM6IFsKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMCwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigxMjksIDIyNywgMjM4KScKICAgICAgICAgICAgfSwKICAgICAgICAgICAgewogICAgICAgICAgICAgIG9mZnNldDogMSwKICAgICAgICAgICAgICBjb2xvcjogJ3JnYigyNSwgMTgzLCAyMDcpJwogICAgICAgICAgICB9CiAgICAgICAgICBdCiAgICAgICAgfQogICAgICB9CiAgICB9CiAgXQp9Ow\'" v-bind="{}" />\n<h2 id="%E9%AB%98%E4%BA%AE%E7%9A%84%E6%A0%B7%E5%BC%8F%EF%BC%9Aemphasis" tabindex="-1">高亮的样式：emphasis</h2>\n<p>在鼠标悬浮到图形元素上时，一般会出现高亮的样式。默认情况下，高亮的样式是根据普通样式自动生成的。但是高亮的样式也可以自己定义，主要是通过 <a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> 属性来定制。<a href="https://echarts.apache.org/option.html#series-bar.emphasis">emphasis</a> 中的结构，和普通样式的结构相同，例如：</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIC8vIOaZrumAmuagt-W8j-OAggogICAgaXRlbVN0eWxlOiB7CiAgICAgIC8vIOeCueeahOminOiJsuOAggogICAgICBjb2xvcjogJ3JlZCcKICAgIH0sCiAgICBsYWJlbDogewogICAgICBzaG93OiB0cnVlLAogICAgICAvLyDmoIfnrb7nmoTmloflrZfjgIIKICAgICAgZm9ybWF0dGVyOiAnVGhpcyBpcyBhIG5vcm1hbCBsYWJlbC4nCiAgICB9LAoKICAgIC8vIOmrmOS6ruagt-W8j-OAggogICAgZW1waGFzaXM6IHsKICAgICAgaXRlbVN0eWxlOiB7CiAgICAgICAgLy8g6auY5Lqu5pe254K555qE6aKc6Imy44CCCiAgICAgICAgY29sb3I6ICdibHVlJwogICAgICB9LAogICAgICBsYWJlbDogewogICAgICAgIHNob3c6IHRydWUsCiAgICAgICAgLy8g6auY5Lqu5pe25qCH562-55qE5paH5a2X44CCCiAgICAgICAgZm9ybWF0dGVyOiAnVGhpcyBpcyBhIGVtcGhhc2lzIGxhYmVsLicKICAgICAgfQogICAgfQogIH0KfTs\'" line-highlights="\'\'" />\n<p>注意：在 ECharts4 以前，高亮和普通样式的写法，是这样的：</p>\n<md-code-block lang="js" code="\'b3B0aW9uID0gewogIHNlcmllczogewogICAgdHlwZTogJ3NjYXR0ZXInLAoKICAgIGl0ZW1TdHlsZTogewogICAgICAvLyDmma7pgJrmoLflvI_jgIIKICAgICAgbm9ybWFsOiB7CiAgICAgICAgLy8g54K555qE6aKc6Imy44CCCiAgICAgICAgY29sb3I6ICdyZWQnCiAgICAgIH0sCiAgICAgIC8vIOmrmOS6ruagt-W8j-OAggogICAgICBlbXBoYXNpczogewogICAgICAgIC8vIOmrmOS6ruaXtueCueeahOminOiJsuOAggogICAgICAgIGNvbG9yOiAnYmx1ZScKICAgICAgfQogICAgfSwKCiAgICBsYWJlbDogewogICAgICAvLyDmma7pgJrmoLflvI_jgIIKICAgICAgbm9ybWFsOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyDmoIfnrb7nmoTmloflrZfjgIIKICAgICAgICBmb3JtYXR0ZXI6ICdUaGlzIGlzIGEgbm9ybWFsIGxhYmVsLicKICAgICAgfSwKICAgICAgLy8g6auY5Lqu5qC35byP44CCCiAgICAgIGVtcGhhc2lzOiB7CiAgICAgICAgc2hvdzogdHJ1ZSwKICAgICAgICAvLyDpq5jkuq7ml7bmoIfnrb7nmoTmloflrZfjgIIKICAgICAgICBmb3JtYXR0ZXI6ICdUaGlzIGlzIGEgZW1waGFzaXMgbGFiZWwuJwogICAgICB9CiAgICB9CiAgfQp9Ow\'" line-highlights="\'\'" />\n<p>这种写法 <strong>仍然被兼容</strong>，但是，不再推荐。事实上，多数情况下，开发者只想配置普通状态下的样式，而使用默认的高亮样式。所以在 ECharts4 中，支持不写 <code>normal</code> 的配置方法（即前一个代码片段里的写法），使得配置项更扁平简单。</p>\n<h2 id="%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" tabindex="-1">通过 visualMap 组件设定样式</h2>\n<p><a href="https://echarts.apache.org/option.html#visualMap">visualMap 组件</a> 能指定数据到颜色、图形尺寸的映射规则，详见 <a href="zh/concepts/visual-map">数据的视觉映射</a>。</p>\n',postPath:"zh/concepts/style",title:"样式 - 概念篇"}],fetch:{},error:null,state:{filled:!1,docVersion:"",ghVersion:"",visibleAffix:!1,homepage:{},adBlocked:!1,focusMode:!1,posts:{zh:[{title:"快速上手",dir:A},{title:"入门篇",dir:i,children:[{title:"获取 ECharts",dir:t},{title:"在项目中引入 ECharts",dir:e},{title:"资源列表",dir:l,draft:g},{title:"寻求帮助",dir:d},{title:"版本特性",dir:a,children:[{title:"ECharts 5 特性介绍",dir:r},{title:"v4 升级 v5 指南",dir:s},{title:5.2,dir:o},{title:5.3,dir:n},{title:5.4,dir:c}]}]},{title:"概念篇",dir:h,children:[{title:"图表容器及大小",dir:w},{title:"配置项",dir:y,draft:g},{title:"系列",dir:M,draft:g},{title:"样式",dir:N},{title:"数据集",dir:m},{title:"数据转换",dir:p},{title:"坐标系",dir:b,draft:g},{title:"坐标轴",dir:B},{title:"视觉映射",dir:C},{title:"图例",dir:D},{title:"事件与行为",dir:L}]},{title:"应用篇",dir:z,children:[{title:"常用图表类型",dir:O,children:[{title:"柱状图",dir:"bar",children:[{title:"基础柱状图",dir:T},{title:"堆叠柱状图",dir:E},{title:"动态排序柱状图",dir:Y},{title:"极坐标系柱状图",dir:G,draft:g},{title:"阶梯瀑布图",dir:K},{title:"视觉映射的柱状图",dir:C,draft:g}]},{title:"折线图",dir:j,children:[{title:"基础折线图",dir:S},{title:"堆叠折线图",dir:Z},{title:"区域面积图",dir:J},{title:"平滑曲线图",dir:u},{title:"阶梯线图",dir:W}]},{title:"饼图",dir:"pie",children:[{title:"基础饼图",dir:k},{title:"圆环图",dir:x},{title:"南丁格尔图（玫瑰图）",dir:F}]},{title:"散点图",dir:v,children:[{title:"基础散点图",dir:X}]}]},{title:H,dir:I,draft:g},{title:"跨平台方案",dir:f,children:[{title:"服务端渲染",dir:"server"},{title:"微信小程序",dir:"wechat-app"},{title:"百度智能小程序",dir:"baidu-app"}]},{title:"数据处理",dir:"data",children:[{title:"动态的异步数据",dir:U},{title:"数据下钻",dir:V,draft:g}]},{title:"标签",dir:"label",children:[{title:"富文本标签",dir:R}]},{title:"动画",dir:Q,children:[{title:"数据过渡动画",dir:P}]},{title:"交互",dir:q,children:[{title:"拖拽的实现",dir:"drag"},{title:"多图联动",dir:_,draft:g},{title:"智能指针吸附",dir:$}]}]},{title:"最佳实践",dir:gg,children:[{title:H,dir:I,draft:g},{title:Ig,dir:Cg},{title:"无障碍访问",dir:"aria"}]},{title:"编辑本文档",dir:"meta",children:[{title:"文档编辑指南",dir:Ag}]}],en:[{title:"Get Started",dir:A},{title:"Basics",dir:i,children:[{title:"Download ECharts",dir:t},{title:"Import ECharts",dir:e},{title:"Resources",dir:l,draft:g},{title:"Get Help",dir:d},{title:"What's New",dir:a,children:[{title:"ECharts 5 Features",dir:r},{title:"Migration from v4 to v5",dir:s},{title:5.2,dir:o},{title:5.3,dir:n},{title:5.4,dir:c}]}]},{title:"Concepts",dir:h,children:[{title:"Chart Container",dir:w},{title:"Chart Option",dir:y,draft:g},{title:"Series",dir:M,draft:g},{title:"Style",dir:N},{title:"Dataset",dir:m},{title:"Data Transform",dir:p},{title:"Coordinate",dir:b,draft:g},{title:"Axis",dir:B},{title:"Visual Mapping",dir:C},{title:"Legend",dir:D},{title:"Event and Action",dir:L}]},{title:"How To Guides",dir:z,children:[{title:"Common Charts",dir:O,children:[{title:"Bar",dir:"bar",children:[{title:"Basic Bar",dir:T},{title:"Stacked Bar",dir:E},{title:"Bar Racing",dir:Y},{title:"Bar Polar",dir:G,draft:g},{title:"Waterfall",dir:K}]},{title:"Line",dir:j,children:[{title:"Basic Line",dir:S},{title:"Stacked Line",dir:Z},{title:"Area Chart",dir:J},{title:"Smoothed Line",dir:u},{title:"Step Line",dir:W}]},{title:"Pie",dir:"pie",children:[{title:"Basic Pie",dir:k},{title:"Ring Style",dir:x},{title:"Rose Style",dir:F}]},{title:"Scatter",dir:v,children:[{title:"Basic Scatter",dir:X}]}]},{title:"Mobile",dir:I,draft:g},{title:"Cross Platform",dir:f,children:[{title:"Server Side Rendering",dir:"server"}]},{title:"Data",dir:"data",children:[{title:"Dynamic Data",dir:U},{title:"Drilldown",dir:V,draft:g}]},{title:"Label",dir:"label",children:[{title:"Rich Text",dir:R}]},{title:"Animation",dir:Q,children:[{title:"Data Transition",dir:P}]},{title:"Interaction",dir:q,children:[{title:"Drag",dir:"drag"},{title:"Connect",dir:_,draft:g},{title:"Intelligent Pointer Snapping",dir:$}]}]},{title:"Best Practices",dir:gg,children:[{title:"Mobile Optimization",dir:I,draft:g},{title:Ig,dir:Cg},{title:"Aria",dir:"aria"}]},{title:"Edit Handbook",dir:"meta",children:[{title:"Edit Guide",dir:Ag}]}]},config:{routerBase:"/handbook",rootPath:"https://echarts.apache.org/handbook/",exampleViewPath:"https://echarts.apache.org/examples/${lang}/view.html?c=",exampleEditorPath:"https://echarts.apache.org/examples/${lang}/editor.html?c=",mainSitePath:"https://echarts.apache.org/",optionPath:"https://echarts.apache.org/option.html#",gitRepo:"apache/echarts-handbook"},i18n:{routeParams:{}}},serverRendered:g,routePath:"/zh/concepts/style",config:{_app:{basePath:"/handbook/",assetsPath:"/handbook/_nuxt/",cdnURL:null}}}}(!0,"mobile","visual-map","get-started","basics","download","import","resource","help","release-note","v5-feature","v5-upgrade-guide","5-2-0","5-3-0","5-4-0","concepts","chart-size","options","series","style","dataset","data-transform","coordinate","axis","legend","event","how-to","chart-types","basic-bar","stacked-bar","bar-race","polar-bar","waterfall","line","basic-line","stacked-line","area-line","smooth-line","step-line","basic-pie","doughnut","rose","scatter","basic-scatter","移动端优化","cross-platform","dynamic-data","drilldown","rich-text","animation","transition","interaction","connect","coarse-pointer","best-practices","Canvas vs. SVG","canvas-vs-svg","edit-guide")</script><script src="/handbook/_nuxt/4d2a12b.js" defer></script><script src="/handbook/_nuxt/js/43cd67c0cf5a9d972051.js" defer></script><script src="/handbook/_nuxt/js/9d86a6602b3f4dd6c979.js" defer></script><script src="/handbook/_nuxt/js/fa73816a85b29fbf7562.js" defer></script><script src="/handbook/_nuxt/js/b964c20bb1562bc48da6.js" defer></script><script src="/handbook/_nuxt/js/60d2f1dbd961abb7604b.js" defer></script> |
| <script type="text/javascript">document.getElementById("nav-doc").className="active"</script> |
| <script src="https://fastly.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script> |
| <script src="https://fastly.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script> |
| <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script> |
| <script async src="https://www.googletagmanager.com/gtag/js?id=UA-141228404-1"></script> |
| <script>var _hmt=_hmt||[];function gtag(){dataLayer.push(arguments)}!function(){var e=document.createElement("script"),t=(e.src="https://hm.baidu.com/hm.js?54b918eee37cb8a7045f0fd0f0b24395",document.getElementsByTagName("script")[0]);t.parentNode.insertBefore(e,t)}(),window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-141228404-1")</script> |
| </body> |
| </html> |
