[{"data":1,"prerenderedAt":586},["ShallowReactive",2],{"doc-\u002Fdocs\u002Fecharts-options-notes":3,"docs-all":481},{"id":4,"title":5,"body":6,"category":466,"date":467,"description":468,"draft":469,"extension":470,"meta":471,"navigation":472,"path":473,"seo":474,"source":475,"stem":476,"tags":477,"__hash__":480},"docs\u002Fdocs\u002Fecharts-options-notes.md","ECharts 配置项速查",{"type":7,"value":8,"toc":461},"minimark",[9,14,21,26,144,148,153,156,308,348,359,457],[10,11,13],"h1",{"id":12},"echarts","Echarts",[15,16,17,20],"p",{},[18,19,12],"code",{},"配置项属性",[22,23,25],"h2",{"id":24},"option","Option",[27,28,29,36,46,101,128,138],"ul",{},[30,31,32,35],"li",{},[18,33,34],{},"title","： 标题组件，包含主标题、副标题",[30,37,38,41,42,45],{},[18,39,40],{},"grid","：直角坐标系内绘图网格，单个 grid内最多放置上下两个 x轴，左右两个 y轴。可以在网格上绘制：折线图、柱状图、散点图…… 属性：",[18,43,44],{},"top、right、bottom、left","：grid 组件",[30,47,48,51,52],{},[18,49,50],{},"legend","：图例组件。展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。",[27,53,54],{},[30,55,56,57,60,61,64,65,68,69,72,73,76,79,80,79,83,79,86,79,89,79,92,79,95,79,98],{},"属性：",[18,58,59],{},"type","，图例的类型，可选值。",[18,62,63],{},"plain","：普通图例；",[18,66,67],{},"scroll","：可翻页图例，图例数量较多是出现翻页。  ",[18,70,71],{},"icon","：ECharts 提供的标记类型包括",[74,75],"br",{},[18,77,78],{},"'circle'",", ",[18,81,82],{},"'rect'",[18,84,85],{},"'roundRect'",[18,87,88],{},"'triangle'",[18,90,91],{},"'diamond'",[18,93,94],{},"'pin'",[18,96,97],{},"'arrow'",[18,99,100],{},"'none'",[30,102,103,106,107,109,110,113,114,113,117,120,121,124,125],{},[18,104,105],{},"tooltip","：提示框组件。可以设置在多种地方，全局设置：",[18,108,105],{},"；坐标系设置：",[18,111,112],{},"grid.tooltip","、",[18,115,116],{},"polar.tooltip",[18,118,119],{},"single.tooltip","；系列设置：",[18,122,123],{},"series.tooltip","；设置在系列的每个数据项：",[18,126,127],{},"series.data.tooltip",[30,129,130,133,134,137],{},[18,131,132],{},"xAxis",": 直角坐标系 gird 中的 x轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 ",[18,135,136],{},"offset","属性防止同个位置多个 x 轴的重叠。",[30,139,140,143],{},[18,141,142],{},"yAxis","：直角坐标系 grid 中的 y轴。与x轴类似",[145,146,147],"h3",{"id":147},"data",[15,149,150,152],{},[18,151,147],{},"：数据内容数组。",[15,154,155],{},"通常来说，数据用一个二维数组表示。如下，每一列被称为一个『维度』。",[157,158,163],"pre",{"className":159,"code":160,"language":161,"meta":162,"style":162},"language-js shiki shiki-themes github-light github-dark","series: [{\n    data: [\n        \u002F\u002F 维度X   维度Y   其他维度 ...\n        [  3.4,    4.5,   15,   43],\n        [  4.2,    2.3,   20,   91],\n        [  10.8,   9.5,   30,   18],\n        [  7.2,    8.8,   18,   57]\n    ]\n}]\n","js","",[18,164,165,178,184,191,221,246,271,296,302],{"__ignoreMap":162},[166,167,170,174],"span",{"class":168,"line":169},"line",1,[166,171,173],{"class":172},"sScJk","series",[166,175,177],{"class":176},"sVt8B",": [{\n",[166,179,181],{"class":168,"line":180},2,[166,182,183],{"class":176},"    data: [\n",[166,185,187],{"class":168,"line":186},3,[166,188,190],{"class":189},"sJ8bj","        \u002F\u002F 维度X   维度Y   其他维度 ...\n",[166,192,194,197,201,204,207,210,213,215,218],{"class":168,"line":193},4,[166,195,196],{"class":176},"        [  ",[166,198,200],{"class":199},"sj4cs","3.4",[166,202,203],{"class":176},",    ",[166,205,206],{"class":199},"4.5",[166,208,209],{"class":176},",   ",[166,211,212],{"class":199},"15",[166,214,209],{"class":176},[166,216,217],{"class":199},"43",[166,219,220],{"class":176},"],\n",[166,222,224,226,229,231,234,236,239,241,244],{"class":168,"line":223},5,[166,225,196],{"class":176},[166,227,228],{"class":199},"4.2",[166,230,203],{"class":176},[166,232,233],{"class":199},"2.3",[166,235,209],{"class":176},[166,237,238],{"class":199},"20",[166,240,209],{"class":176},[166,242,243],{"class":199},"91",[166,245,220],{"class":176},[166,247,249,251,254,256,259,261,264,266,269],{"class":168,"line":248},6,[166,250,196],{"class":176},[166,252,253],{"class":199},"10.8",[166,255,209],{"class":176},[166,257,258],{"class":199},"9.5",[166,260,209],{"class":176},[166,262,263],{"class":199},"30",[166,265,209],{"class":176},[166,267,268],{"class":199},"18",[166,270,220],{"class":176},[166,272,274,276,279,281,284,286,288,290,293],{"class":168,"line":273},7,[166,275,196],{"class":176},[166,277,278],{"class":199},"7.2",[166,280,203],{"class":176},[166,282,283],{"class":199},"8.8",[166,285,209],{"class":176},[166,287,268],{"class":199},[166,289,209],{"class":176},[166,291,292],{"class":199},"57",[166,294,295],{"class":176},"]\n",[166,297,299],{"class":168,"line":298},8,[166,300,301],{"class":176},"    ]\n",[166,303,305],{"class":168,"line":304},9,[166,306,307],{"class":176},"}]\n",[27,309,310,331],{},[30,311,312,313,320,321,325,326,330],{},"在 ",[314,315,319],"a",{"href":316,"rel":317},"https:\u002F\u002Fecharts.apache.org\u002Fzh\u002Foption.html#grid",[318],"nofollow","直角坐标系 (grid)"," 中『维度X』和『维度Y』会默认对应于 ",[314,322,132],{"href":323,"rel":324},"https:\u002F\u002Fecharts.apache.org\u002Fzh\u002Foption.html#xAxis",[318]," 和 ",[314,327,142],{"href":328,"rel":329},"https:\u002F\u002Fecharts.apache.org\u002Fzh\u002Foption.html#yAxis",[318],"。",[30,332,312,333,320,338,325,343,330],{},[314,334,337],{"href":335,"rel":336},"https:\u002F\u002Fecharts.apache.org\u002Fzh\u002Foption.html#polar",[318],"极坐标系 (polar)",[314,339,342],{"href":340,"rel":341},"https:\u002F\u002Fecharts.apache.org\u002Fzh\u002Foption.html#radiusAxis",[318],"radiusAxis",[314,344,347],{"href":345,"rel":346},"https:\u002F\u002Fecharts.apache.org\u002Fzh\u002Foption.html#angleAxis",[318],"angleAxis",[15,349,350,351,354,355,358],{},"当只有一个轴为类目轴(",[18,352,353],{},"axis.type","为",[18,356,357],{},"category",")的时候，数据可以简化为一个一维数组：",[157,360,362],{"className":159,"code":361,"language":161,"meta":162,"style":162},"xAxis: {\n    data: ['a', 'b', 'm', 'n']\n},\nseries: [{\n    \u002F\u002F 与 xAxis.data 一一对应。\n    data: [23,  44,  55,  19]\n    \u002F\u002F 它其实是下面这种形式的简化：\n    \u002F\u002F data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n}]\n",[18,363,364,371,401,406,412,417,443,448,453],{"__ignoreMap":162},[166,365,366,368],{"class":168,"line":169},[166,367,132],{"class":172},[166,369,370],{"class":176},": {\n",[166,372,373,376,379,383,386,389,391,394,396,399],{"class":168,"line":180},[166,374,375],{"class":172},"    data",[166,377,378],{"class":176},": [",[166,380,382],{"class":381},"sZZnC","'a'",[166,384,385],{"class":176},", ",[166,387,388],{"class":381},"'b'",[166,390,385],{"class":176},[166,392,393],{"class":381},"'m'",[166,395,385],{"class":176},[166,397,398],{"class":381},"'n'",[166,400,295],{"class":176},[166,402,403],{"class":168,"line":186},[166,404,405],{"class":176},"},\n",[166,407,408,410],{"class":168,"line":193},[166,409,173],{"class":172},[166,411,177],{"class":176},[166,413,414],{"class":168,"line":223},[166,415,416],{"class":189},"    \u002F\u002F 与 xAxis.data 一一对应。\n",[166,418,419,422,425,428,431,433,436,438,441],{"class":168,"line":248},[166,420,421],{"class":176},"    data: [",[166,423,424],{"class":199},"23",[166,426,427],{"class":176},",  ",[166,429,430],{"class":199},"44",[166,432,427],{"class":176},[166,434,435],{"class":199},"55",[166,437,427],{"class":176},[166,439,440],{"class":199},"19",[166,442,295],{"class":176},[166,444,445],{"class":168,"line":273},[166,446,447],{"class":189},"    \u002F\u002F 它其实是下面这种形式的简化：\n",[166,449,450],{"class":168,"line":298},[166,451,452],{"class":189},"    \u002F\u002F data: [[0, 23], [1, 44], [2, 55], [3, 19]]\n",[166,454,455],{"class":168,"line":304},[166,456,307],{"class":176},[458,459,460],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":162,"searchDepth":186,"depth":186,"links":462},[463],{"id":24,"depth":180,"text":25,"children":464},[465],{"id":147,"depth":186,"text":147},"visualization","2024-08-09","整理 ECharts 常用 option 配置：数据格式、坐标轴、图例与交互项的实际用法。",false,"md",{},true,"\u002Fdocs\u002Fecharts-options-notes",{"title":5,"description":468},null,"docs\u002Fecharts-options-notes",[12,478,479],"javascript","cheatsheet","PKtxZqB60pv7M6iKY431sBzp6etI3Dc8hMuBqEyFbn0",[482,494,502,508,517,525,534,539,547,552,559,565,572,574,580],{"path":483,"title":484,"description":485,"date":486,"category":487,"tags":488},"\u002Fdocs\u002Ffrontend-coding-standards","前端团队编码规范","HTML \u002F CSS \u002F JavaScript 三端统一的团队编码约定，含缩进、命名、语法与禁用项，可直接作为 Code Review 依据。","2025-12-17","standards",[489,490,478,491,492,493],"html","css","es6","best-practice","guide",{"path":495,"title":496,"description":497,"date":498,"category":499,"tags":500},"\u002Fdocs\u002Fwindows-mklink","Windows mklink 符号链接用法","mklink 各参数区别与实用场景：目录联接、符号链接与硬链接的选择。","2024-12-18","toolchain",[501,479],"windows",{"path":503,"title":504,"description":505,"date":506,"category":499,"tags":507},"\u002Fdocs\u002Frandom-color-utils","JS 随机颜色生成方法","几种生成随机 RGB \u002F HEX 颜色的实现方式与各自适用场景。","2024-12-11",[478,479],{"path":509,"title":510,"description":511,"date":512,"category":466,"tags":513},"\u002Fdocs\u002Fcanvas-vs-svg","Canvas 与 SVG 绘图方案选型","对比 Canvas 与 SVG 两种绘图方案的优缺点与适用场景，给出选型判断依据。","2024-12-09",[514,515,516,492],"canvas","svg","performance",{"path":518,"title":519,"description":520,"date":521,"category":499,"tags":522},"\u002Fdocs\u002Ffree-commercial-fonts","免费可商用字体整理","整理思源黑体、思源宋体等可商用中文字体，规避字体版权风险。","2024-11-03",[523,490,524],"font","notes",{"path":526,"title":527,"description":528,"date":521,"category":529,"tags":530},"\u002Fdocs\u002Finterview-browser-network","浏览器与网络考点","从输入 URL 到页面呈现的完整链路，涵盖渲染流程、回流重绘、HTTP 报文与状态码、跨域同源策略与常见攻击方式。","interview",[531,532,533,516,524],"browser","http","network",{"path":535,"title":536,"description":537,"date":521,"category":529,"tags":538},"\u002Fdocs\u002Finterview-css-layout","CSS 与布局考点","em 与 rem 的区别、移动端三种适配方案对比、viewport 标准设置与 REM 布局的媒体查询实现。",[490,489,492,524],{"path":540,"title":541,"description":542,"date":521,"category":529,"tags":543},"\u002Fdocs\u002Finterview-framework-tooling","框架与工程化考点","React diff 与 setState 机制、Redux 核心组成、Vue 常考清单，以及 Webpack、Vite、Git 的面试要点。",[544,478,545,546,524],"vue","webpack","vite",{"path":548,"title":549,"description":550,"date":521,"category":529,"tags":551},"\u002Fdocs\u002Finterview-javascript-core","JavaScript 核心考点","数据类型、this 绑定、闭包、原型链、异步与数组方法，前端面试中 JS 部分的高频考点与代码示例。",[478,491,524],{"path":553,"title":554,"description":555,"date":521,"category":556,"tags":557},"\u002Fdocs\u002Fjs-module-systems","JavaScript 模块化方案","梳理 CommonJS、AMD、ES Module 等模块化方案的差异与使用方式。","fundamentals",[478,558,491,524],"module-system",{"path":560,"title":561,"description":562,"date":521,"category":556,"tags":563},"\u002Fdocs\u002Fwebsocket-basics","WebSocket 基础","WebSocket 全双工通信协议的事件、方法与基本用法整理。",[564,533,478,524],"websocket",{"path":566,"title":567,"description":568,"date":569,"category":466,"tags":570},"\u002Fdocs\u002Fgojs-getting-started","GoJS 入门实战","从引入方式、画布初始化到节点模板与数据绑定，一份可直接上手的 GoJS 流程图开发笔记。","2024-08-22",[571,478,524],"gojs",{"path":473,"title":5,"description":468,"date":467,"category":466,"tags":573},[12,478,479],{"path":575,"title":576,"description":577,"date":578,"category":556,"tags":579},"\u002Fdocs\u002Fhttp-status-codes","HTTP 响应状态码详解","按 1xx 到 5xx 分类梳理 HTTP 状态码的含义与典型使用场景。","2024-06-27",[532,533,479],{"path":581,"title":582,"description":583,"date":584,"category":556,"tags":585},"\u002Fdocs\u002Fhtml-basics","HTML 基础笔记","HTML 语法规范、常用标签、表格与表单元素速查。","2022-06-10",[489,524,479],1788337378604]