| window.__EC_DOC_option_series_lines = { |
| "id": { |
| "desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n" |
| }, |
| "name": { |
| "desc": "<p>系列名称,用于<a href=\"#tooltip\">tooltip</a>的显示,<a href=\"#legend\">legend</a> 的图例筛选,在 <code class=\"codespan\">setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n" |
| }, |
| "coordinateSystem": { |
| "desc": "<p>该系列使用的坐标系,可选:</p>\n<ul>\n<li><p><code class=\"codespan\">'cartesian2d'</code></p>\n<p> 使用二维的直角坐标系(也称笛卡尔坐标系),通过 <a href=\"#series-lines.xAxisIndex\">xAxisIndex</a>, <a href=\"#series-lines.yAxisIndex\">yAxisIndex</a>指定相应的坐标轴组件。</p>\n</li>\n</ul>\n<ul>\n<li><p><code class=\"codespan\">'geo'</code></p>\n<p> 使用地理坐标系,通过 <a href=\"#series-lines.geoIndex\">geoIndex</a> 指定相应的地理坐标系组件。</p>\n</li>\n</ul>\n" |
| }, |
| "xAxisIndex": { |
| "desc": "<p>使用的 <a href=\"#xAxis\">x 轴</a>的 index,在单个图表实例中存在多个 x 轴的时候有用。</p>\n" |
| }, |
| "yAxisIndex": { |
| "desc": "<p>使用的 <a href=\"#yAxis\">y 轴</a>的 index,在单个图表实例中存在多个 y轴的时候有用。</p>\n" |
| }, |
| "geoIndex": { |
| "desc": "<p>使用的<a href=\"#geo\">地理坐标系</a>的 index,在单个图表实例中存在多个地理坐标系的时候有用。</p>\n" |
| }, |
| "polyline": { |
| "desc": "<p>是否是多段线。</p>\n<p>默认为 <code class=\"codespan\">false</code>,只能用于绘制只有两个端点的线段,线段可以通过 <a href=\"#series-lines.lineStyle.curveness\">lineStyle.curveness</a> 配置为曲线。</p>\n<p>如果该配置项为 <code class=\"codespan\">true</code>,则可以在 <a href=\"#series-lines.data.coords\">data.coords</a> 中设置多于 2 个的顶点用来绘制多段线,在绘制路线轨迹的时候比较有用,见示例 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-bus\" target=\"_blank\">北京公交路线</a>,设置为多段线后 <a href=\"#series-lines.lineStyle.curveness\">lineStyle.curveness</a> 无效。</p>\n" |
| }, |
| "effect": { |
| "desc": "<p>线特效的配置,见示例 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=geo-lines\" target=\"_blank\">模拟迁徙</a> 和 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=lines-bmap-effect\" target=\"_blank\">北京公交路线</a></p>\n<p><strong>注意:</strong> 所有带有尾迹特效的图表需要单独放在一个层,也就是需要单独设置 <a href=\"#series-lines.zlevel\">zlevel</a>,同时建议关闭该层的动画(<a href=\"#series-lines.animation\">animation</a>: false)。不然位于同个层的其它系列的图形,和动画的<a href=\"#series-lines.label\">标签</a>也会产生不必要的残影。</p>\n" |
| }, |
| "effect.show": { |
| "desc": "<p>是否显示特效。</p>\n" |
| }, |
| "effect.period": { |
| "desc": "<p>特效动画的时间,单位为 s。</p>\n" |
| }, |
| "effect.delay": { |
| "desc": "<p>特效动画的延时,支持设置成数字或者回调。单位<code class=\"codespan\">ms</code></p>\n" |
| }, |
| "effect.constantSpeed": { |
| "desc": "<p>配置特效图形的移动动画是否是固定速度,单位<code class=\"codespan\">像素/秒</code>,设置为大于 0 的值后会忽略 <a href=\"#series-lines.effect.period\">period</a> 配置项。</p>\n" |
| }, |
| "effect.symbol": { |
| "desc": "<p>特效图形的标记。</p>\n<p>ECharts 提供的标记类型包括 \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>上面示例中就是使用自定义 path 的 symbol 表现飞机的图形。</p>\n<p><strong>Tip:</strong> symbol 的角度会随着轨迹的切线变化,如果使用自定义 path 的 symbol,需要保证 path 图形的朝向是朝上的,这样在 symbol 沿着轨迹运动的时候可以保证图形始终朝着运动的方向。</p>\n" |
| }, |
| "effect.symbolSize": { |
| "desc": "<p>特效标记的大小,可以设置成诸如 <code class=\"codespan\">10</code> 这样单一的数字,也可以用数组分开表示高和宽,例如 <code class=\"codespan\">[20, 10]</code> 表示标记宽为<code class=\"codespan\">20</code>,高为<code class=\"codespan\">10</code>。</p>\n" |
| }, |
| "effect.color": { |
| "desc": "<p>特效标记的颜色,默认取 <a href=\"#series-lines.lineStyle.color\">lineStyle.color</a>。</p>\n" |
| }, |
| "effect.trailLength": { |
| "desc": "<p>特效尾迹的长度。取从 0 到 1 的值,数值越大尾迹越长。</p>\n" |
| }, |
| "effect.loop": { |
| "desc": "<p>是否循环显示特效。</p>\n" |
| }, |
| "large": { |
| "desc": "<p>是否启用大规模路径图的优化,在数据图形特别多的时候(>=5k)可以开启。</p>\n<p>开启后配合 <a href=\"#series-lines.largeThreshold\">largeThreshold</a> 在数据量大于指定阈值的时候对绘制进行优化。</p>\n<p>缺点:优化后不能自定义设置单个数据项的样式,不能启用 <a href=\"#series-lines.effect\">effect</a>。</p>\n" |
| }, |
| "largeThreshold": { |
| "desc": "<p>开启绘制优化的阈值。</p>\n" |
| }, |
| "symbol": { |
| "desc": "<p>线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定。\n具体支持的格式可以参考 <a href=\"#series-line.markLine.data.0.symbol\">标线的 symbol</a></p>\n" |
| }, |
| "symbolSize": { |
| "desc": "<p>线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。\n<strong>注意:</strong> 这里无法像一般的 <code class=\"codespan\">symbolSize</code> 那样通过数组分别指定高宽。</p>\n" |
| }, |
| "lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。 默认从<a href=\"#color\">option.color 调色盘</a> 获取颜色</p>\n<p>支持使用回调函数。回调函数格式如下:</p>\n<pre><code class=\"lang-js\">(params: Object) => Color\n</code></pre>\n<p>传入的是数据项 <code class=\"codespan\">seriesIndex</code>, <code class=\"codespan\">dataIndex</code>, <code class=\"codespan\">data</code>, <code class=\"codespan\">value</code> 等各个参数。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0.5", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "lineStyle.curveness": { |
| "desc": "<p>边的曲度,支持从 0 到 1 的值,值越大曲度越大。</p>\n" |
| }, |
| "label": { |
| "desc": "<p>标签相关配置。在 <a href=\"#series-lines.polyline\">polyline</a> 设置为 <code class=\"codespan\">true</code> 时无效。</p>\n" |
| }, |
| "label.show": { |
| "desc": "<p>是否显示标签。</p>\n" |
| }, |
| "label.position": { |
| "desc": "<p>标签位置,可选:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> 线的起始点。</li>\n<li><code class=\"codespan\">'middle'</code> 线的中点。</li>\n<li><code class=\"codespan\">'end'</code> 线的结束点。</li>\n</ul>\n" |
| }, |
| "label.formatter": { |
| "desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>'xxx'<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis": { |
| "desc": "<p>高亮的线条和标签样式。</p>\n" |
| }, |
| "emphasis.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "emphasis.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "emphasis.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "emphasis.label.show": { |
| "desc": "<p>是否显示标签。</p>\n" |
| }, |
| "emphasis.label.position": { |
| "desc": "<p>标签位置,可选:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> 线的起始点。</li>\n<li><code class=\"codespan\">'middle'</code> 线的中点。</li>\n<li><code class=\"codespan\">'end'</code> 线的结束点。</li>\n</ul>\n" |
| }, |
| "emphasis.label.formatter": { |
| "desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>'xxx'<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "emphasis.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "emphasis.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "emphasis.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "emphasis.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "emphasis.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "emphasis.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "emphasis.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "emphasis.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "emphasis.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "emphasis.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "emphasis.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "emphasis.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "emphasis.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "emphasis.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "emphasis.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "emphasis.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "emphasis.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "emphasis.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "progressive": { |
| "desc": "<p>渐进式渲染时每一帧绘制图形数量,设为 0 时不启用渐进式渲染,支持每个系列单独配置。</p>\n<p>在图中有数千到几千万图形元素的时候,一下子把图形绘制出来,或者交互重绘的时候可能会造成界面的卡顿甚至假死。ECharts 4 开始全流程支持渐进渲染(progressive rendering),渲染的时候会把创建好的图形分到数帧中渲染,每一帧渲染只渲染指定数量的图形。</p>\n<p>该配置项就是用于配置该系列每一帧渲染的图形数,可以根据图表图形复杂度的需要适当调整这个数字使得在不影响交互流畅性的前提下达到绘制速度的最大化。比如在 lines 图或者平行坐标中线宽大于 1 的 polyline 绘制会很慢,这个数字就可以设置小一点,而线宽小于等于 1 的 polyline 绘制非常快,该配置项就可以相对调得比较大。</p>\n" |
| }, |
| "progressiveThreshold": { |
| "desc": "<p>启用渐进式渲染的图形数量阈值,在单个系列的图形数量超过该阈值时启用渐进式渲染。</p>\n" |
| }, |
| "data": { |
| "desc": "<p>线数据集。</p>\n<p><strong>注:</strong> 为了更好点支持多段线的配置,线数据的格式在 3.2.0 做了一定调整,如下:</p>\n<pre><code class=\"lang-js\">// 3.2.0 之前\n// [{\n// // 起点坐标\n// coord: [120, 66],\n// lineStyle: { }\n// }, {\n// // 终点坐标\n// coord: [122, 67]\n// }]\n\n// 从 3.2.0 起改为如下配置\n{\n coords: [\n [120, 66], // 起点\n [122, 67] // 终点\n ... // 如果 polyline 为 true 还可以设置更多的点\n ],\n // 统一的样式设置\n lineStyle: {\n }\n}\n</code></pre>\n" |
| }, |
| "data.name": { |
| "desc": "<p>数据名称</p>\n" |
| }, |
| "data.coords": { |
| "desc": "<p>一个包含两个到多个二维坐标的数组。在 <a href=\"#series-lines.polyline\">polyline</a> 设置为 <code class=\"codespan\">true</code> 时支持多于两个的坐标。</p>\n" |
| }, |
| "data.lineStyle": { |
| "desc": "<p>单个数据(单条线)的样式设置。</p>\n" |
| }, |
| "data.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "data.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "data.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "data.lineStyle.curveness": { |
| "desc": "\n\n<p>边的曲度,支持从 0 到 1 的值,值越大曲度越大。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "max": "1", |
| "step": "0.01", |
| "default": "0" |
| } |
| }, |
| "data.label": { |
| "desc": "<p>单个数据(单条线)的标签设置。在 <a href=\"#series-lines.polyline\">polyline</a> 设置为 <code class=\"codespan\">true</code> 时无效。</p>\n" |
| }, |
| "data.label.show": { |
| "desc": "<p>是否显示标签。</p>\n" |
| }, |
| "data.label.position": { |
| "desc": "<p>标签位置,可选:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> 线的起始点。</li>\n<li><code class=\"codespan\">'middle'</code> 线的中点。</li>\n<li><code class=\"codespan\">'end'</code> 线的结束点。</li>\n</ul>\n" |
| }, |
| "data.label.formatter": { |
| "desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>'xxx'<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "data.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "data.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "data.emphasis.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "data.emphasis.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "data.emphasis.lineStyle.curveness": { |
| "desc": "\n\n<p>边的曲度,支持从 0 到 1 的值,值越大曲度越大。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "max": "1", |
| "step": "0.01", |
| "default": "0" |
| } |
| }, |
| "data.emphasis.label.show": { |
| "desc": "<p>是否显示标签。</p>\n" |
| }, |
| "data.emphasis.label.position": { |
| "desc": "<p>标签位置,可选:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> 线的起始点。</li>\n<li><code class=\"codespan\">'middle'</code> 线的中点。</li>\n<li><code class=\"codespan\">'end'</code> 线的结束点。</li>\n</ul>\n" |
| }, |
| "data.emphasis.label.formatter": { |
| "desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>'xxx'<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "data.emphasis.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.emphasis.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.emphasis.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.emphasis.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.emphasis.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.emphasis.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.emphasis.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.emphasis.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.emphasis.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.emphasis.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.emphasis.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.emphasis.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.emphasis.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.emphasis.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.emphasis.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.emphasis.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "data.emphasis.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.emphasis.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "data.emphasis.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "data.emphasis.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint": { |
| "desc": "<p>图表标注。</p>\n" |
| }, |
| "markPoint.symbol": { |
| "desc": "\n\n<p>标记的图形。</p>\n<p>ECharts 提供的标记类型包括 \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>如果需要每个数据的图形不一样,可以设置为如下格式的回调函数:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => string\n</code></pre>\n<p>其中第一个参数 <code class=\"codespan\">value</code> 为 <a href=\"#series-lines.data\">data</a> 中的数据值。第二个参数<code class=\"codespan\">params</code> 是其它的数据项参数。</p>\n", |
| "uiControl": { |
| "type": "icon", |
| "default": "circle" |
| } |
| }, |
| "markPoint.symbolSize": { |
| "desc": "\n\n<p>标记的大小,可以设置成诸如 <code class=\"codespan\">10</code> 这样单一的数字,也可以用数组分开表示宽和高,例如 <code class=\"codespan\">[20, 10]</code> 表示标记宽为<code class=\"codespan\">20</code>,高为<code class=\"codespan\">10</code>。</p>\n<p>如果需要每个数据的图形大小不一样,可以设置为如下格式的回调函数:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number|Array\n</code></pre>\n<p>其中第一个参数 <code class=\"codespan\">value</code> 为 <a href=\"#series-lines.data\">data</a> 中的数据值。第二个参数<code class=\"codespan\">params</code> 是其它的数据项参数。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0" |
| } |
| }, |
| "markPoint.symbolRotate": { |
| "desc": "\n\n<p>标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 <code class=\"codespan\">markLine</code> 中当 <code class=\"codespan\">symbol</code> 为 <code class=\"codespan\">'arrow'</code> 时会忽略 <code class=\"codespan\">symbolRotate</code> 强制设置为切线的角度。</p>\n<p>如果需要每个数据的旋转角度不一样,可以设置为如下格式的回调函数:</p>\n<pre><code class=\"lang-js\">(value: Array|number, params: Object) => number\n</code></pre>\n<p>其中第一个参数 <code class=\"codespan\">value</code> 为 <a href=\"#series-lines.data\">data</a> 中的数据值。第二个参数<code class=\"codespan\">params</code> 是其它的数据项参数。</p>\n<blockquote>\n<p>从 4.8.0 开始支持回调函数。</p>\n</blockquote>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "-180", |
| "max": "180", |
| "step": "1" |
| } |
| }, |
| "markPoint.symbolKeepAspect": { |
| "desc": "\n\n<p>如果 <code class=\"codespan\">symbol</code> 是 <code class=\"codespan\">path://</code> 的形式,是否在缩放时保持该图形的长宽比。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "clean": "true" |
| } |
| }, |
| "markPoint.symbolOffset": { |
| "desc": "\n\n<p>标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。</p>\n<p>例如 <code class=\"codespan\">[0, '50%']</code> 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "separate": "true", |
| "dims": "x,y" |
| } |
| }, |
| "markPoint.silent": { |
| "desc": "\n\n<p>图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "markPoint.label": { |
| "desc": "<p>标注的文本。</p>\n" |
| }, |
| "markPoint.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "markPoint.label.position": { |
| "desc": "\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持:<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "markPoint.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "markPoint.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如:<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>,纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "markPoint.label.formatter": { |
| "desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>'xxx'<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "markPoint.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markPoint.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markPoint.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markPoint.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markPoint.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markPoint.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markPoint.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markPoint.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markPoint.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markPoint.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markPoint.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markPoint.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "markPoint.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.itemStyle": { |
| "desc": "<p>标注的样式。</p>\n" |
| }, |
| "markPoint.itemStyle.color": { |
| "desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.itemStyle.borderColor": { |
| "desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.itemStyle.borderWidth": { |
| "desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "0", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.itemStyle.borderType": { |
| "desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markPoint.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markPoint.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markPoint.emphasis": { |
| "desc": "<p>标注的高亮样式。</p>\n" |
| }, |
| "markPoint.emphasis.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "markPoint.emphasis.label.position": { |
| "desc": "\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持:<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "markPoint.emphasis.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "markPoint.emphasis.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如:<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>,纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "markPoint.emphasis.label.formatter": { |
| "desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>'xxx'<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {@score}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "markPoint.emphasis.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markPoint.emphasis.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markPoint.emphasis.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markPoint.emphasis.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markPoint.emphasis.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markPoint.emphasis.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markPoint.emphasis.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markPoint.emphasis.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markPoint.emphasis.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.emphasis.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.emphasis.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markPoint.emphasis.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markPoint.emphasis.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.emphasis.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.emphasis.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.emphasis.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.emphasis.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markPoint.emphasis.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.itemStyle.color": { |
| "desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.emphasis.itemStyle.borderColor": { |
| "desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.emphasis.itemStyle.borderWidth": { |
| "desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "0", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.itemStyle.borderType": { |
| "desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markPoint.emphasis.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markPoint.emphasis.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.emphasis.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markPoint.data": { |
| "desc": "<p>标注的数据数组。每个数组项是一个对象,有下面几种方式指定标注的位置。</p>\n<ol>\n<li>通过 <a href=\"#series-lines.markPoint.data.x\">x</a>, <a href=\"#series-lines.markPoint.data.y\">y</a> 属性指定相对容器的屏幕坐标,单位像素,支持百分比。</li>\n</ol>\n<p>当多个属性同时存在时,优先级按上述的顺序。</p>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">data: [\n {\n name: '某个屏幕坐标',\n x: 100,\n y: 100\n }\n]\n</code></pre>\n" |
| }, |
| "markPoint.data.name": { |
| "desc": "<p>标注名称。</p>\n" |
| }, |
| "markPoint.data.x": { |
| "desc": "\n\n<p>相对容器的屏幕 x 坐标,单位像素。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0" |
| } |
| }, |
| "markPoint.data.y": { |
| "desc": "\n\n<p>相对容器的屏幕 y 坐标,单位像素。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0" |
| } |
| }, |
| "markPoint.data.value": { |
| "desc": "<p>标注值,可以不设。</p>\n" |
| }, |
| "markPoint.data.symbol": { |
| "desc": "\n\n<p>标记的图形。</p>\n<p>ECharts 提供的标记类型包括 \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>", |
| "uiControl": { |
| "type": "icon", |
| "default": "circle" |
| } |
| }, |
| "markPoint.data.symbolSize": { |
| "desc": "\n\n<p>标记的大小,可以设置成诸如 <code class=\"codespan\">10</code> 这样单一的数字,也可以用数组分开表示宽和高,例如 <code class=\"codespan\">[20, 10]</code> 表示标记宽为<code class=\"codespan\">20</code>,高为<code class=\"codespan\">10</code>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0" |
| } |
| }, |
| "markPoint.data.symbolRotate": { |
| "desc": "\n\n<p>标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 <code class=\"codespan\">markLine</code> 中当 <code class=\"codespan\">symbol</code> 为 <code class=\"codespan\">'arrow'</code> 时会忽略 <code class=\"codespan\">symbolRotate</code> 强制设置为切线的角度。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "-180", |
| "max": "180", |
| "step": "1" |
| } |
| }, |
| "markPoint.data.symbolKeepAspect": { |
| "desc": "\n\n<p>如果 <code class=\"codespan\">symbol</code> 是 <code class=\"codespan\">path://</code> 的形式,是否在缩放时保持该图形的长宽比。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "clean": "true" |
| } |
| }, |
| "markPoint.data.symbolOffset": { |
| "desc": "\n\n<p>标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。</p>\n<p>例如 <code class=\"codespan\">[0, '50%']</code> 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "separate": "true", |
| "dims": "x,y" |
| } |
| }, |
| "markPoint.data.itemStyle": { |
| "desc": "<p>该标注的样式。</p>\n" |
| }, |
| "markPoint.data.itemStyle.color": { |
| "desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.data.itemStyle.borderColor": { |
| "desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.data.itemStyle.borderWidth": { |
| "desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "0", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.itemStyle.borderType": { |
| "desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markPoint.data.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markPoint.data.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markPoint.data.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "markPoint.data.label.position": { |
| "desc": "\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持:<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "markPoint.data.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "markPoint.data.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如:<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>,纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "markPoint.data.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markPoint.data.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markPoint.data.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markPoint.data.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markPoint.data.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markPoint.data.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markPoint.data.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markPoint.data.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markPoint.data.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.data.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.data.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markPoint.data.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markPoint.data.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.data.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.data.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.data.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.data.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markPoint.data.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "markPoint.data.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.data.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.data.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "markPoint.data.emphasis.label.position": { |
| "desc": "\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持:<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "markPoint.data.emphasis.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "markPoint.data.emphasis.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如:<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>,纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "markPoint.data.emphasis.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markPoint.data.emphasis.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markPoint.data.emphasis.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markPoint.data.emphasis.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markPoint.data.emphasis.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markPoint.data.emphasis.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markPoint.data.emphasis.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markPoint.data.emphasis.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markPoint.data.emphasis.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.data.emphasis.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.data.emphasis.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markPoint.data.emphasis.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markPoint.data.emphasis.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.data.emphasis.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.data.emphasis.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.data.emphasis.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.data.emphasis.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markPoint.data.emphasis.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.itemStyle.color": { |
| "desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.data.emphasis.itemStyle.borderColor": { |
| "desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markPoint.data.emphasis.itemStyle.borderWidth": { |
| "desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "0", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.itemStyle.borderType": { |
| "desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markPoint.data.emphasis.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markPoint.data.emphasis.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markPoint.data.emphasis.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markPoint.animation": { |
| "desc": "\n\n<p>是否开启动画。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true", |
| "clean": "true" |
| } |
| }, |
| "markPoint.animationThreshold": { |
| "desc": "<p>是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。</p>\n" |
| }, |
| "markPoint.animationDuration": { |
| "desc": "\n\n<p>初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "1000", |
| "step": "20", |
| "clean": "true" |
| } |
| }, |
| "markPoint.animationEasing": { |
| "desc": "\n\n<p>初始动画的缓动效果。不同的缓动效果可以参考 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">缓动示例</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut", |
| "clean": "true" |
| } |
| }, |
| "markPoint.animationDelay": { |
| "desc": "<p>初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n" |
| }, |
| "markPoint.animationDurationUpdate": { |
| "desc": "\n\n<p>数据更新动画的时长。</p>\n<p>支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "1000", |
| "step": "20" |
| } |
| }, |
| "markPoint.animationEasingUpdate": { |
| "desc": "\n\n<p>数据更新动画的缓动效果。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut" |
| } |
| }, |
| "markPoint.animationDelayUpdate": { |
| "desc": "<p>数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n" |
| }, |
| "markLine": { |
| "desc": "<p>图表标线。</p>\n" |
| }, |
| "markLine.silent": { |
| "desc": "\n\n<p>图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "markLine.symbol": { |
| "desc": "<p>标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定,具体格式见 <a href=\"#series-lines.markLine.data.0.symbol\">data.symbol</a>。</p>\n" |
| }, |
| "markLine.symbolSize": { |
| "desc": "<p>标线两端的标记大小,可以是一个数组分别指定两端,也可以是单个统一指定。</p>\n<p><strong>注意:</strong> 这里无法像一般的 <code class=\"codespan\">symbolSize</code> 那样通过数组分别指定高宽。</p>\n" |
| }, |
| "markLine.precision": { |
| "desc": "<p>标线数值的精度,在显示平均值线的时候有用。</p>\n" |
| }, |
| "markLine.label": { |
| "desc": "<p>标线的文本。</p>\n" |
| }, |
| "markLine.label.show": { |
| "desc": "<p>是否显示标签。</p>\n" |
| }, |
| "markLine.label.position": { |
| "desc": "<p>标签位置,可选:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> 线的起始点。</li>\n<li><code class=\"codespan\">'middle'</code> 线的中点。</li>\n<li><code class=\"codespan\">'end'</code> 线的结束点。</li>\n</ul>\n<p>4.7.0 版本起,支持更多标签位置:<code class=\"codespan\">'start'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'end'</code>, <code class=\"codespan\">'insideStartTop'</code>, <code class=\"codespan\">'insideStartBottom'</code>, <code class=\"codespan\">'insideMiddleTop'</code>, <code class=\"codespan\">'insideMiddleBottom'</code>, <code class=\"codespan\">'insideEndTop'</code>, <code class=\"codespan\">'insideEndBottom'</code>。</p>\n<p>其中,<code class=\"codespan\">'insideMiddleBottom'</code> 等同于 <code class=\"codespan\">'middle'</code>。具体位置参见下图。</p>\n<p>文字与线的间距可以通过 <a href=\"#series-.markLine.label.distance\">label.distance</a> 调整。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n" |
| }, |
| "markLine.label.distance": { |
| "desc": "<p>标签与线之间的间距。如果是数组,第一项为横向间距,第二项为纵向间距。如果是数字,则表示横向纵向使用相同的间距。</p>\n" |
| }, |
| "markLine.label.formatter": { |
| "desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{d}</code>:百分比。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>'xxx'<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "markLine.lineStyle": { |
| "desc": "<p>标线的样式</p>\n" |
| }, |
| "markLine.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markLine.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markLine.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markLine.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markLine.lineStyle.curveness": { |
| "desc": "\n\n<p>边的曲度,支持从 0 到 1 的值,值越大曲度越大。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "max": "1", |
| "step": "0.01", |
| "default": "0" |
| } |
| }, |
| "markLine.emphasis": { |
| "desc": "<p>标线的高亮样式。</p>\n" |
| }, |
| "markLine.emphasis.label.show": { |
| "desc": "<p>是否显示标签。</p>\n" |
| }, |
| "markLine.emphasis.label.position": { |
| "desc": "<p>标签位置,可选:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> 线的起始点。</li>\n<li><code class=\"codespan\">'middle'</code> 线的中点。</li>\n<li><code class=\"codespan\">'end'</code> 线的结束点。</li>\n</ul>\n<p>4.7.0 版本起,支持更多标签位置:<code class=\"codespan\">'start'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'end'</code>, <code class=\"codespan\">'insideStartTop'</code>, <code class=\"codespan\">'insideStartBottom'</code>, <code class=\"codespan\">'insideMiddleTop'</code>, <code class=\"codespan\">'insideMiddleBottom'</code>, <code class=\"codespan\">'insideEndTop'</code>, <code class=\"codespan\">'insideEndBottom'</code>。</p>\n<p>其中,<code class=\"codespan\">'insideMiddleBottom'</code> 等同于 <code class=\"codespan\">'middle'</code>。具体位置参见下图。</p>\n<p>文字与线的间距可以通过 <a href=\"#series-.markLine.label.distance\">label.distance</a> 调整。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n" |
| }, |
| "markLine.emphasis.label.distance": { |
| "desc": "<p>标签与线之间的间距。如果是数组,第一项为横向间距,第二项为纵向间距。如果是数字,则表示横向纵向使用相同的间距。</p>\n" |
| }, |
| "markLine.emphasis.label.formatter": { |
| "desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{d}</code>:百分比。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>'xxx'<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "markLine.emphasis.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markLine.emphasis.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.emphasis.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markLine.emphasis.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.emphasis.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markLine.emphasis.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.emphasis.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.emphasis.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markLine.data": { |
| "desc": "<p>标线的数据数组。每个数组项可以是一个两个值的数组,分别表示线的起点和终点,每一项是一个对象,有下面几种方式指定起点或终点的位置。</p>\n<ol>\n<li>通过 <a href=\"#series-lines.markLine.data.0.x\">x</a>, <a href=\"#series-lines.markLine.data.0.y\">y</a> 属性指定相对容器的屏幕坐标,单位像素,支持百分比。</li>\n</ol>\n<p>当多个属性同时存在时,优先级按上述的顺序。</p>\n<pre><code>data: [\n [\n {\n name: '两个屏幕坐标之间的标线',\n x: 100,\n y: 100\n },\n {\n x: 500,\n y: 200\n }\n ]\n]\n</code></pre>" |
| }, |
| "markLine.data.0": { |
| "desc": "<p>起点的数据。</p>\n" |
| }, |
| "markLine.data.0.name": { |
| "desc": "<p>标注名称,将会作为文字显示。</p>\n" |
| }, |
| "markLine.data.0.x": { |
| "desc": "\n\n<p>相对容器的屏幕 x 坐标,单位像素。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0" |
| } |
| }, |
| "markLine.data.0.y": { |
| "desc": "\n\n<p>相对容器的屏幕 y 坐标,单位像素。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0" |
| } |
| }, |
| "markLine.data.0.value": { |
| "desc": "<p>标注值,可以不设。</p>\n" |
| }, |
| "markLine.data.0.symbol": { |
| "desc": "\n\n<p>起点标记的图形。</p>\n<p>ECharts 提供的标记类型包括 \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>", |
| "uiControl": { |
| "type": "icon", |
| "default": "circle" |
| } |
| }, |
| "markLine.data.0.symbolSize": { |
| "desc": "\n\n<p>起点标记的大小,可以设置成诸如 <code class=\"codespan\">10</code> 这样单一的数字,也可以用数组分开表示宽和高,例如 <code class=\"codespan\">[20, 10]</code> 表示标记宽为<code class=\"codespan\">20</code>,高为<code class=\"codespan\">10</code>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0" |
| } |
| }, |
| "markLine.data.0.symbolRotate": { |
| "desc": "\n\n<p>起点标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 <code class=\"codespan\">markLine</code> 中当 <code class=\"codespan\">symbol</code> 为 <code class=\"codespan\">'arrow'</code> 时会忽略 <code class=\"codespan\">symbolRotate</code> 强制设置为切线的角度。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "-180", |
| "max": "180", |
| "step": "1" |
| } |
| }, |
| "markLine.data.0.symbolKeepAspect": { |
| "desc": "\n\n<p>如果 <code class=\"codespan\">symbol</code> 是 <code class=\"codespan\">path://</code> 的形式,是否在缩放时保持该图形的长宽比。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "clean": "true" |
| } |
| }, |
| "markLine.data.0.symbolOffset": { |
| "desc": "\n\n<p>起点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。</p>\n<p>例如 <code class=\"codespan\">[0, '50%']</code> 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "separate": "true", |
| "dims": "x,y" |
| } |
| }, |
| "markLine.data.0.lineStyle": { |
| "desc": "<p>该数据项线的样式,起点和终点项的 <code class=\"codespan\">lineStyle</code>会合并到一起。</p>\n" |
| }, |
| "markLine.data.0.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markLine.data.0.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.0.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markLine.data.0.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.0.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markLine.data.0.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.0.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.0.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markLine.data.0.lineStyle.curveness": { |
| "desc": "\n\n<p>边的曲度,支持从 0 到 1 的值,值越大曲度越大。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "max": "1", |
| "step": "0.01", |
| "default": "0" |
| } |
| }, |
| "markLine.data.0.label": { |
| "desc": "<p>该数据项标签的样式,起点和终点项的 <code class=\"codespan\">label</code>会合并到一起。</p>\n" |
| }, |
| "markLine.data.0.label.show": { |
| "desc": "<p>是否显示标签。</p>\n" |
| }, |
| "markLine.data.0.label.position": { |
| "desc": "<p>标签位置,可选:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> 线的起始点。</li>\n<li><code class=\"codespan\">'middle'</code> 线的中点。</li>\n<li><code class=\"codespan\">'end'</code> 线的结束点。</li>\n</ul>\n<p>4.7.0 版本起,支持更多标签位置:<code class=\"codespan\">'start'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'end'</code>, <code class=\"codespan\">'insideStartTop'</code>, <code class=\"codespan\">'insideStartBottom'</code>, <code class=\"codespan\">'insideMiddleTop'</code>, <code class=\"codespan\">'insideMiddleBottom'</code>, <code class=\"codespan\">'insideEndTop'</code>, <code class=\"codespan\">'insideEndBottom'</code>。</p>\n<p>其中,<code class=\"codespan\">'insideMiddleBottom'</code> 等同于 <code class=\"codespan\">'middle'</code>。具体位置参见下图。</p>\n<p>文字与线的间距可以通过 <a href=\"#series-.markLine.label.distance\">label.distance</a> 调整。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n" |
| }, |
| "markLine.data.0.label.distance": { |
| "desc": "<p>标签与线之间的间距。如果是数组,第一项为横向间距,第二项为纵向间距。如果是数字,则表示横向纵向使用相同的间距。</p>\n" |
| }, |
| "markLine.data.0.label.formatter": { |
| "desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{d}</code>:百分比。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>'xxx'<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "markLine.data.0.emphasis.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markLine.data.0.emphasis.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.0.emphasis.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markLine.data.0.emphasis.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.0.emphasis.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markLine.data.0.emphasis.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.0.emphasis.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.0.emphasis.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markLine.data.0.emphasis.lineStyle.curveness": { |
| "desc": "\n\n<p>边的曲度,支持从 0 到 1 的值,值越大曲度越大。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "max": "1", |
| "step": "0.01", |
| "default": "0" |
| } |
| }, |
| "markLine.data.0.emphasis.label.show": { |
| "desc": "<p>是否显示标签。</p>\n" |
| }, |
| "markLine.data.0.emphasis.label.position": { |
| "desc": "<p>标签位置,可选:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> 线的起始点。</li>\n<li><code class=\"codespan\">'middle'</code> 线的中点。</li>\n<li><code class=\"codespan\">'end'</code> 线的结束点。</li>\n</ul>\n<p>4.7.0 版本起,支持更多标签位置:<code class=\"codespan\">'start'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'end'</code>, <code class=\"codespan\">'insideStartTop'</code>, <code class=\"codespan\">'insideStartBottom'</code>, <code class=\"codespan\">'insideMiddleTop'</code>, <code class=\"codespan\">'insideMiddleBottom'</code>, <code class=\"codespan\">'insideEndTop'</code>, <code class=\"codespan\">'insideEndBottom'</code>。</p>\n<p>其中,<code class=\"codespan\">'insideMiddleBottom'</code> 等同于 <code class=\"codespan\">'middle'</code>。具体位置参见下图。</p>\n<p>文字与线的间距可以通过 <a href=\"#series-.markLine.label.distance\">label.distance</a> 调整。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n" |
| }, |
| "markLine.data.0.emphasis.label.distance": { |
| "desc": "<p>标签与线之间的间距。如果是数组,第一项为横向间距,第二项为纵向间距。如果是数字,则表示横向纵向使用相同的间距。</p>\n" |
| }, |
| "markLine.data.0.emphasis.label.formatter": { |
| "desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{d}</code>:百分比。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>'xxx'<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "markLine.data.1": { |
| "desc": "<p>终点的数据。</p>\n" |
| }, |
| "markLine.data.1.name": { |
| "desc": "<p>标注名称,将会作为文字显示。</p>\n" |
| }, |
| "markLine.data.1.x": { |
| "desc": "\n\n<p>相对容器的屏幕 x 坐标,单位像素。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0" |
| } |
| }, |
| "markLine.data.1.y": { |
| "desc": "\n\n<p>相对容器的屏幕 y 坐标,单位像素。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0" |
| } |
| }, |
| "markLine.data.1.value": { |
| "desc": "<p>标注值,可以不设。</p>\n" |
| }, |
| "markLine.data.1.symbol": { |
| "desc": "\n\n<p>终点标记的图形。</p>\n<p>ECharts 提供的标记类型包括 \n<code class=\"codespan\">'circle'</code>, <code class=\"codespan\">'rect'</code>, <code class=\"codespan\">'roundRect'</code>, <code class=\"codespan\">'triangle'</code>, <code class=\"codespan\">'diamond'</code>, <code class=\"codespan\">'pin'</code>, <code class=\"codespan\">'arrow'</code>, <code class=\"codespan\">'none'</code></p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片,其中 URL 为图片的链接,或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如:</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如:</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如:</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre>", |
| "uiControl": { |
| "type": "icon", |
| "default": "circle" |
| } |
| }, |
| "markLine.data.1.symbolSize": { |
| "desc": "\n\n<p>终点标记的大小,可以设置成诸如 <code class=\"codespan\">10</code> 这样单一的数字,也可以用数组分开表示宽和高,例如 <code class=\"codespan\">[20, 10]</code> 表示标记宽为<code class=\"codespan\">20</code>,高为<code class=\"codespan\">10</code>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0" |
| } |
| }, |
| "markLine.data.1.symbolRotate": { |
| "desc": "\n\n<p>终点标记的旋转角度(而非弧度)。正值表示逆时针旋转。注意在 <code class=\"codespan\">markLine</code> 中当 <code class=\"codespan\">symbol</code> 为 <code class=\"codespan\">'arrow'</code> 时会忽略 <code class=\"codespan\">symbolRotate</code> 强制设置为切线的角度。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "min": "-180", |
| "max": "180", |
| "step": "1" |
| } |
| }, |
| "markLine.data.1.symbolKeepAspect": { |
| "desc": "\n\n<p>如果 <code class=\"codespan\">symbol</code> 是 <code class=\"codespan\">path://</code> 的形式,是否在缩放时保持该图形的长宽比。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "clean": "true" |
| } |
| }, |
| "markLine.data.1.symbolOffset": { |
| "desc": "\n\n<p>终点标记相对于原本位置的偏移。默认情况下,标记会居中置放在数据对应的位置,但是如果 symbol 是自定义的矢量路径或者图片,就有可能不希望 symbol 居中。这时候可以使用该配置项配置 symbol 相对于原本居中的偏移,可以是绝对的像素值,也可以是相对的百分比。</p>\n<p>例如 <code class=\"codespan\">[0, '50%']</code> 就是把自己向上移动了一半的位置,在 symbol 图形是气泡的时候可以让图形下端的箭头对准数据点。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "separate": "true", |
| "dims": "x,y" |
| } |
| }, |
| "markLine.data.1.lineStyle": { |
| "desc": "<p>该数据项线的样式,起点和终点项的 <code class=\"codespan\">lineStyle</code>会合并到一起。</p>\n" |
| }, |
| "markLine.data.1.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markLine.data.1.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.1.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markLine.data.1.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.1.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markLine.data.1.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.1.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.1.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markLine.data.1.lineStyle.curveness": { |
| "desc": "\n\n<p>边的曲度,支持从 0 到 1 的值,值越大曲度越大。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "max": "1", |
| "step": "0.01", |
| "default": "0" |
| } |
| }, |
| "markLine.data.1.label": { |
| "desc": "<p>该数据项标签的样式,起点和终点项的 <code class=\"codespan\">label</code>会合并到一起。</p>\n" |
| }, |
| "markLine.data.1.label.show": { |
| "desc": "<p>是否显示标签。</p>\n" |
| }, |
| "markLine.data.1.label.position": { |
| "desc": "<p>标签位置,可选:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> 线的起始点。</li>\n<li><code class=\"codespan\">'middle'</code> 线的中点。</li>\n<li><code class=\"codespan\">'end'</code> 线的结束点。</li>\n</ul>\n<p>4.7.0 版本起,支持更多标签位置:<code class=\"codespan\">'start'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'end'</code>, <code class=\"codespan\">'insideStartTop'</code>, <code class=\"codespan\">'insideStartBottom'</code>, <code class=\"codespan\">'insideMiddleTop'</code>, <code class=\"codespan\">'insideMiddleBottom'</code>, <code class=\"codespan\">'insideEndTop'</code>, <code class=\"codespan\">'insideEndBottom'</code>。</p>\n<p>其中,<code class=\"codespan\">'insideMiddleBottom'</code> 等同于 <code class=\"codespan\">'middle'</code>。具体位置参见下图。</p>\n<p>文字与线的间距可以通过 <a href=\"#series-.markLine.label.distance\">label.distance</a> 调整。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n" |
| }, |
| "markLine.data.1.label.distance": { |
| "desc": "<p>标签与线之间的间距。如果是数组,第一项为横向间距,第二项为纵向间距。如果是数字,则表示横向纵向使用相同的间距。</p>\n" |
| }, |
| "markLine.data.1.label.formatter": { |
| "desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{d}</code>:百分比。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>'xxx'<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "markLine.data.1.emphasis.lineStyle.color": { |
| "desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markLine.data.1.emphasis.lineStyle.width": { |
| "desc": "\n\n<p>线宽。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "1", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.1.emphasis.lineStyle.type": { |
| "desc": "\n\n<p>线的类型。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markLine.data.1.emphasis.lineStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.1.emphasis.lineStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markLine.data.1.emphasis.lineStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.1.emphasis.lineStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markLine.data.1.emphasis.lineStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markLine.data.1.emphasis.lineStyle.curveness": { |
| "desc": "\n\n<p>边的曲度,支持从 0 到 1 的值,值越大曲度越大。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "max": "1", |
| "step": "0.01", |
| "default": "0" |
| } |
| }, |
| "markLine.data.1.emphasis.label.show": { |
| "desc": "<p>是否显示标签。</p>\n" |
| }, |
| "markLine.data.1.emphasis.label.position": { |
| "desc": "<p>标签位置,可选:</p>\n<ul>\n<li><code class=\"codespan\">'start'</code> 线的起始点。</li>\n<li><code class=\"codespan\">'middle'</code> 线的中点。</li>\n<li><code class=\"codespan\">'end'</code> 线的结束点。</li>\n</ul>\n<p>4.7.0 版本起,支持更多标签位置:<code class=\"codespan\">'start'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'end'</code>, <code class=\"codespan\">'insideStartTop'</code>, <code class=\"codespan\">'insideStartBottom'</code>, <code class=\"codespan\">'insideMiddleTop'</code>, <code class=\"codespan\">'insideMiddleBottom'</code>, <code class=\"codespan\">'insideEndTop'</code>, <code class=\"codespan\">'insideEndBottom'</code>。</p>\n<p>其中,<code class=\"codespan\">'insideMiddleBottom'</code> 等同于 <code class=\"codespan\">'middle'</code>。具体位置参见下图。</p>\n<p>文字与线的间距可以通过 <a href=\"#series-.markLine.label.distance\">label.distance</a> 调整。</p>\n<iframe data-src=\"https://echarts.apache.org/examples/zh/view.html?c=bar-markline&reset=1&edit=1\" width=\"800\" height=\"500\"><iframe />\n\n" |
| }, |
| "markLine.data.1.emphasis.label.distance": { |
| "desc": "<p>标签与线之间的间距。如果是数组,第一项为横向间距,第二项为纵向间距。如果是数字,则表示横向纵向使用相同的间距。</p>\n" |
| }, |
| "markLine.data.1.emphasis.label.formatter": { |
| "desc": "<p>标签内容格式器,支持字符串模板和回调函数两种形式,字符串模板与回调函数返回的字符串均支持用 <code class=\"codespan\">\\n</code> 换行。</p>\n<p><strong>字符串模板</strong></p>\n<p><strong>字符串模板</strong>\n模板变量有:</p>\n<ul>\n<li><code class=\"codespan\">{a}</code>:系列名。</li>\n<li><code class=\"codespan\">{b}</code>:数据名。</li>\n<li><code class=\"codespan\">{c}</code>:数据值。</li>\n<li><code class=\"codespan\">{d}</code>:百分比。</li>\n<li><code class=\"codespan\">{@xxx}:数据中名为</code>'xxx'<code class=\"codespan\">的维度的值,如</code>{@product}<code class=\"codespan\">表示名为</code>'product'` 的维度的值。</li>\n<li><code class=\"codespan\">{@[n]}:数据中维度</code>n<code class=\"codespan\">的值,如</code>{@[3]}` 表示维度 3 的值,从 0 开始计数。</li>\n</ul>\n<p><strong>示例:</strong></p>\n<pre><code class=\"lang-js\">formatter: '{b}: {d}'\n</code></pre>\n<p><strong>回调函数</strong></p>\n<p>回调函数格式:</p>\n<pre><code class=\"lang-js\">(params: Object|Array) => string\n</code></pre>\n<p>参数 <code class=\"codespan\">params</code> 是 formatter 需要的单个数据集。格式如下:</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名,类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量(如 map、radar 中)\n value: number|Array|Object,\n // 坐标轴 encode 映射信息,\n // key 为坐标轴(如 'x' 'y' 'radius' 'angle' 等)\n // value 必然为数组,不会为 null/undefied,表示 dimension index 。\n // 其内容如:\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index,如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注:encode 和 dimensionNames 的使用方式,例如:</p>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为:</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value:</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n" |
| }, |
| "markLine.animation": { |
| "desc": "\n\n<p>是否开启动画。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true", |
| "clean": "true" |
| } |
| }, |
| "markLine.animationThreshold": { |
| "desc": "<p>是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。</p>\n" |
| }, |
| "markLine.animationDuration": { |
| "desc": "\n\n<p>初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "1000", |
| "step": "20", |
| "clean": "true" |
| } |
| }, |
| "markLine.animationEasing": { |
| "desc": "\n\n<p>初始动画的缓动效果。不同的缓动效果可以参考 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">缓动示例</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut", |
| "clean": "true" |
| } |
| }, |
| "markLine.animationDelay": { |
| "desc": "<p>初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n" |
| }, |
| "markLine.animationDurationUpdate": { |
| "desc": "\n\n<p>数据更新动画的时长。</p>\n<p>支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "1000", |
| "step": "20" |
| } |
| }, |
| "markLine.animationEasingUpdate": { |
| "desc": "\n\n<p>数据更新动画的缓动效果。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut" |
| } |
| }, |
| "markLine.animationDelayUpdate": { |
| "desc": "<p>数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n" |
| }, |
| "markArea": { |
| "desc": "<p>图表标域,常用于标记图表中某个范围的数据,例如标出某段时间投放了广告。</p>\n" |
| }, |
| "markArea.silent": { |
| "desc": "\n\n<p>图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "markArea.label": { |
| "desc": "<p>标域文本配置。</p>\n" |
| }, |
| "markArea.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "markArea.label.position": { |
| "desc": "\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持:<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "markArea.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "markArea.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如:<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>,纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "markArea.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markArea.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markArea.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markArea.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markArea.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markArea.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markArea.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markArea.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markArea.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markArea.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markArea.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markArea.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "markArea.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markArea.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markArea.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markArea.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markArea.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markArea.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markArea.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markArea.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markArea.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markArea.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markArea.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markArea.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.itemStyle": { |
| "desc": "<p>该标域的样式。</p>\n" |
| }, |
| "markArea.itemStyle.color": { |
| "desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.itemStyle.borderColor": { |
| "desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.itemStyle.borderWidth": { |
| "desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "0", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.itemStyle.borderType": { |
| "desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markArea.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markArea.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markArea.emphasis": { |
| "desc": "<p>高亮的标域样式</p>\n" |
| }, |
| "markArea.emphasis.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "markArea.emphasis.label.position": { |
| "desc": "\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持:<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "markArea.emphasis.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "markArea.emphasis.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如:<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>,纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "markArea.emphasis.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markArea.emphasis.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markArea.emphasis.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markArea.emphasis.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markArea.emphasis.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markArea.emphasis.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markArea.emphasis.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markArea.emphasis.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markArea.emphasis.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.emphasis.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.emphasis.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markArea.emphasis.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markArea.emphasis.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.emphasis.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.emphasis.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.emphasis.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.emphasis.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markArea.emphasis.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "markArea.emphasis.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.emphasis.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.emphasis.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.itemStyle.color": { |
| "desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.emphasis.itemStyle.borderColor": { |
| "desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.emphasis.itemStyle.borderWidth": { |
| "desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "0", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.itemStyle.borderType": { |
| "desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markArea.emphasis.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markArea.emphasis.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.emphasis.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markArea.data": { |
| "desc": "<p>标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置</p>\n<ol>\n<li>通过 <a href=\"#series-lines.markArea.data.0.x\">x</a>, <a href=\"#series-lines.markArea.data.0.y\">y</a> 属性指定相对容器的屏幕坐标,单位像素,支持百分比。</li>\n</ol>\n<p>当多个属性同时存在时,优先级按上述的顺序。</p>\n<pre><code>data: [\n [\n {\n name: '两个屏幕坐标之间的标域',\n x: 100,\n y: 100\n }, {\n x: '90%',\n y: '10%'\n }\n ]\n]\n</code></pre>" |
| }, |
| "markArea.data.0": { |
| "desc": "<p>标域左上角的数据</p>\n" |
| }, |
| "markArea.data.0.name": { |
| "desc": "<p>标注名称,将会作为文字显示。</p>\n" |
| }, |
| "markArea.data.0.x": { |
| "desc": "\n\n<p>相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 <code class=\"codespan\">'20%'</code>。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0" |
| } |
| }, |
| "markArea.data.0.y": { |
| "desc": "\n\n<p>相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 <code class=\"codespan\">'20%'</code>。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0" |
| } |
| }, |
| "markArea.data.0.value": { |
| "desc": "<p>标域值,可以不设。</p>\n" |
| }, |
| "markArea.data.0.itemStyle": { |
| "desc": "<p>该数据项区域的样式,起点和终点项的<code class=\"codespan\">itemStyle</code>会合并到一起。</p>\n" |
| }, |
| "markArea.data.0.itemStyle.color": { |
| "desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.0.itemStyle.borderColor": { |
| "desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.0.itemStyle.borderWidth": { |
| "desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "0", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.itemStyle.borderType": { |
| "desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markArea.data.0.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markArea.data.0.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markArea.data.0.label": { |
| "desc": "<p>该数据项标签的样式,起点和终点项的<code class=\"codespan\">label</code>会合并到一起。</p>\n" |
| }, |
| "markArea.data.0.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "markArea.data.0.label.position": { |
| "desc": "\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持:<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "markArea.data.0.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "markArea.data.0.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如:<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>,纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "markArea.data.0.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markArea.data.0.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markArea.data.0.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markArea.data.0.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markArea.data.0.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markArea.data.0.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markArea.data.0.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markArea.data.0.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markArea.data.0.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.0.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.0.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markArea.data.0.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markArea.data.0.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.0.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.0.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.0.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.0.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markArea.data.0.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "markArea.data.0.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.0.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.0.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.itemStyle.color": { |
| "desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.0.emphasis.itemStyle.borderColor": { |
| "desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.0.emphasis.itemStyle.borderWidth": { |
| "desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "0", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.itemStyle.borderType": { |
| "desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markArea.data.0.emphasis.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markArea.data.0.emphasis.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markArea.data.0.emphasis.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "markArea.data.0.emphasis.label.position": { |
| "desc": "\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持:<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "markArea.data.0.emphasis.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "markArea.data.0.emphasis.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如:<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>,纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "markArea.data.0.emphasis.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markArea.data.0.emphasis.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markArea.data.0.emphasis.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markArea.data.0.emphasis.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markArea.data.0.emphasis.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markArea.data.0.emphasis.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markArea.data.0.emphasis.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markArea.data.0.emphasis.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markArea.data.0.emphasis.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.0.emphasis.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.0.emphasis.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markArea.data.0.emphasis.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markArea.data.0.emphasis.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.0.emphasis.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.0.emphasis.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.0.emphasis.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.0.emphasis.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markArea.data.0.emphasis.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.0.emphasis.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1": { |
| "desc": "<p>标域右下角的数据</p>\n" |
| }, |
| "markArea.data.1.name": { |
| "desc": "<p>标注名称,将会作为文字显示。</p>\n" |
| }, |
| "markArea.data.1.x": { |
| "desc": "\n\n<p>相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 <code class=\"codespan\">'20%'</code>。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0" |
| } |
| }, |
| "markArea.data.1.y": { |
| "desc": "\n\n<p>相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 <code class=\"codespan\">'20%'</code>。</p>\n", |
| "uiControl": { |
| "type": "percent", |
| "default": "0" |
| } |
| }, |
| "markArea.data.1.value": { |
| "desc": "<p>标域值,可以不设。</p>\n" |
| }, |
| "markArea.data.1.itemStyle": { |
| "desc": "<p>该数据项区域的样式,起点和终点项的<code class=\"codespan\">itemStyle</code>会合并到一起。</p>\n" |
| }, |
| "markArea.data.1.itemStyle.color": { |
| "desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.1.itemStyle.borderColor": { |
| "desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.1.itemStyle.borderWidth": { |
| "desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "0", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.itemStyle.borderType": { |
| "desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markArea.data.1.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markArea.data.1.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markArea.data.1.label": { |
| "desc": "<p>该数据项标签的样式,起点和终点项的<code class=\"codespan\">label</code>会合并到一起。</p>\n" |
| }, |
| "markArea.data.1.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "markArea.data.1.label.position": { |
| "desc": "\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持:<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "markArea.data.1.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "markArea.data.1.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如:<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>,纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "markArea.data.1.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markArea.data.1.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markArea.data.1.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markArea.data.1.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markArea.data.1.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markArea.data.1.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markArea.data.1.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markArea.data.1.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markArea.data.1.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.1.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.1.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markArea.data.1.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markArea.data.1.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.1.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.1.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.1.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.1.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markArea.data.1.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "markArea.data.1.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.1.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.1.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.itemStyle.color": { |
| "desc": "\n\n<p>图形的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示,比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>,如果想要加上 alpha 通道表示不透明度,可以使用 RGBA,比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>,也可以使用十六进制格式,比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变,前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1,相当于在图形包围盒中的百分比,如果 globalCoord 为 `true`,则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变,前三个参数分别是圆心 x, y 和半径,取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement,不支持路径字符串\n repeat: 'repeat' // 是否平铺,可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.1.emphasis.itemStyle.borderColor": { |
| "desc": "\n\n<p>图形的描边颜色。支持的颜色格式同 <code class=\"codespan\">color</code>,不支持回调函数。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.1.emphasis.itemStyle.borderWidth": { |
| "desc": "\n\n<p>描边线宽。为 0 时无描边。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "value": "0", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.itemStyle.borderType": { |
| "desc": "\n\n<p>柱条的描边类型,默认为实线,支持 <code class=\"codespan\">'solid'</code>, <code class=\"codespan\">'dashed'</code>, <code class=\"codespan\">'dotted'</code>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "solid", |
| "options": "solid,dashed,dotted" |
| } |
| }, |
| "markArea.data.1.emphasis.itemStyle.shadowBlur": { |
| "desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例:</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.itemStyle.shadowColor": { |
| "desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "" |
| } |
| }, |
| "markArea.data.1.emphasis.itemStyle.shadowOffsetX": { |
| "desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.itemStyle.shadowOffsetY": { |
| "desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.itemStyle.opacity": { |
| "desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "1", |
| "min": "0", |
| "max": "1", |
| "step": "0.01" |
| } |
| }, |
| "markArea.data.1.emphasis.label.show": { |
| "desc": "\n\n<p>是否显示标签。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false" |
| } |
| }, |
| "markArea.data.1.emphasis.label.position": { |
| "desc": "\n\n\n<p>标签的位置。</p>\n<ul>\n<li><p>可以通过内置的语义声明位置:</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> position: 'top'\n</code></pre>\n<p> 支持:<code class=\"codespan\">top</code> / <code class=\"codespan\">left</code> / <code class=\"codespan\">right</code> / <code class=\"codespan\">bottom</code> / <code class=\"codespan\">inside</code> / <code class=\"codespan\">insideLeft</code> / <code class=\"codespan\">insideRight</code> / <code class=\"codespan\">insideTop</code> / <code class=\"codespan\">insideBottom</code> / <code class=\"codespan\">insideTopLeft</code> / <code class=\"codespan\">insideBottomLeft</code> / <code class=\"codespan\">insideTopRight</code> / <code class=\"codespan\">insideBottomRight</code></p>\n</li>\n<li><p>也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。</p>\n<p> 示例:</p>\n<pre><code class=\"lang-js\"> // 绝对的像素值\n position: [10, 10],\n // 相对的百分比\n position: ['50%', '50%']\n</code></pre>\n</li>\n</ul>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/view.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,left,right,bottom,inside,insideLeft,insideRight,insideTop,insideBottom,insideTopLeft,insideBottomLeft,insideTopRight,insideBottomRight,outside" |
| } |
| }, |
| "markArea.data.1.emphasis.label.distance": { |
| "desc": "\n\n<p>距离图形元素的距离。当 position 为字符描述值(如 <code class=\"codespan\">'top'</code>、<code class=\"codespan\">'insideRight'</code>)时候有效。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=doc-example/label-position\" target=\"_blank\">label position</a>。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "5", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rotate": { |
| "desc": "\n\n<p>标签旋转。从 -90 度到 90 度。正值是逆时针。</p>\n<p>参见:<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-label-rotation\" target=\"_blank\">label rotation</a>。</p>\n", |
| "uiControl": { |
| "type": "angle", |
| "default": "0", |
| "min": "-90", |
| "max": "90", |
| "step": "1" |
| } |
| }, |
| "markArea.data.1.emphasis.label.offset": { |
| "desc": "\n\n<p>是否对文字进行偏移。默认不偏移。例如:<code class=\"codespan\">[30, 40]</code> 表示文字在横向上偏移 <code class=\"codespan\">30</code>,纵向上偏移 <code class=\"codespan\">40</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "dims": "x,y", |
| "step": "0.5", |
| "separate": "true" |
| } |
| }, |
| "markArea.data.1.emphasis.label.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markArea.data.1.emphasis.label.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markArea.data.1.emphasis.label.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markArea.data.1.emphasis.label.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markArea.data.1.emphasis.label.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markArea.data.1.emphasis.label.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markArea.data.1.emphasis.label.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markArea.data.1.emphasis.label.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markArea.data.1.emphasis.label.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.1.emphasis.label.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.1.emphasis.label.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markArea.data.1.emphasis.label.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markArea.data.1.emphasis.label.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.1.emphasis.label.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.1.emphasis.label.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.1.emphasis.label.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.1.emphasis.label.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markArea.data.1.emphasis.label.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich": { |
| "desc": "<p>在 <code class=\"codespan\">rich</code> 里面,可以自定义富文本样式。利用富文本样式,可以在标签中做出非常丰富的效果。</p>\n<p>例如:</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中,可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号:\n // `{styleName|text content text content}` 标记样式名。\n // 注意,换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程:<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n" |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.color": { |
| "desc": "\n\n<p>文字的颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "null" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.fontStyle": { |
| "desc": "\n\n<p>文字字体的风格。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,italic,oblique" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.fontWeight": { |
| "desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "normal", |
| "options": "normal,bold,bolder,lighter" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.fontFamily": { |
| "desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "default": "sans-serif", |
| "options": "sans-serif,serif,monospace,Arial,Courier New" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.fontSize": { |
| "desc": "\n\n<p>文字的字体大小。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "default": "12", |
| "min": "1", |
| "step": "1" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.align": { |
| "desc": "\n\n<p>文字水平对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>,则会取父层级的 <code class=\"codespan\">align</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`,则 `align` 为 right\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "left,center,right" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.verticalAlign": { |
| "desc": "\n\n<p>文字垂直对齐方式,默认自动。</p>\n<p>可选:</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>,则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`,则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "top,middle,bottom" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.lineHeight": { |
| "desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>,则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如:</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`,则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "1", |
| "default": "12" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.backgroundColor": { |
| "desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值,例如:<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片,例如:</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL,\n // 或者图片的 dataURI,\n // 或者 HTMLImageElement 对象,\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候,可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽,也可以不指定自适应。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.borderColor": { |
| "desc": "\n\n<p>文字块边框颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#fff" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.borderWidth": { |
| "desc": "\n\n<p>文字块边框宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.borderRadius": { |
| "desc": "\n\n<p>文字块的圆角。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "LT,RT, RB, LB" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.padding": { |
| "desc": "\n\n<p>文字块的内边距。例如:</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>:表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>:表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>:表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n", |
| "uiControl": { |
| "type": "vector", |
| "min": "0", |
| "dims": "T,R,B,L" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.shadowColor": { |
| "desc": "\n\n<p>文字块的背景阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.shadowBlur": { |
| "desc": "\n\n<p>文字块的背景阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.shadowOffsetX": { |
| "desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.shadowOffsetY": { |
| "desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.width": { |
| "desc": "<p>文字块的宽度。一般不用指定,不指定则自动是文字的宽度。在想做表格项或者使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串,如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>(即不包含文本块的 <code class=\"codespan\">padding</code>)的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数,因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数,则百分比的计算在实用中不具有意义,可能会超出。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.height": { |
| "desc": "<p>文字块的高度。一般不用指定,不指定则自动是文字的高度。在使用图片(参见 <code class=\"codespan\">backgroundColor</code>)时,可能会使用它。</p>\n<p>注意,文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽,不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意,如果不定义 <code class=\"codespan\">rich</code> 属性,则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n" |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.textBorderColor": { |
| "desc": "\n\n<p>文字本身的描边颜色。</p>\n<p>如果设置为 <code class=\"codespan\">'auto'</code>,则为视觉映射得到的颜色,如系列色。</p>\n", |
| "uiControl": { |
| "type": "color" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.textBorderWidth": { |
| "desc": "\n\n<p>文字本身的描边宽度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.textShadowColor": { |
| "desc": "\n\n<p>文字本身的阴影颜色。</p>\n", |
| "uiControl": { |
| "type": "color", |
| "default": "#000" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.textShadowBlur": { |
| "desc": "\n\n<p>文字本身的阴影长度。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.textShadowOffsetX": { |
| "desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.data.1.emphasis.label.rich.<style_name>.textShadowOffsetY": { |
| "desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n", |
| "uiControl": { |
| "type": "number", |
| "step": "0.5" |
| } |
| }, |
| "markArea.animation": { |
| "desc": "\n\n<p>是否开启动画。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "false", |
| "clean": "true" |
| } |
| }, |
| "markArea.animationThreshold": { |
| "desc": "<p>是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。</p>\n" |
| }, |
| "markArea.animationDuration": { |
| "desc": "\n\n<p>初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "1000", |
| "step": "20", |
| "clean": "true" |
| } |
| }, |
| "markArea.animationEasing": { |
| "desc": "\n\n<p>初始动画的缓动效果。不同的缓动效果可以参考 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">缓动示例</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut", |
| "clean": "true" |
| } |
| }, |
| "markArea.animationDelay": { |
| "desc": "<p>初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n" |
| }, |
| "markArea.animationDurationUpdate": { |
| "desc": "\n\n<p>数据更新动画的时长。</p>\n<p>支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "1000", |
| "step": "20" |
| } |
| }, |
| "markArea.animationEasingUpdate": { |
| "desc": "\n\n<p>数据更新动画的缓动效果。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut" |
| } |
| }, |
| "markArea.animationDelayUpdate": { |
| "desc": "<p>数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n" |
| }, |
| "clip": { |
| "desc": "\n\n\n\n<blockquote>\n<p>从 <code class=\"codespan\">v4.4.0</code> 开始支持</p>\n</blockquote>\n<p>是否裁剪超出坐标系部分的图形,具体裁剪效果根据系列决定:</p>\n<ul>\n<li>散点图:忽略中心点超出坐标系的图形,但是不裁剪单个图形</li>\n<li>柱状图:裁掉所有超出坐标系的部分,但是依然保留柱子的宽度</li>\n<li>折线图:裁掉所有超出坐标系的折线部分,拐点图形的逻辑按照散点图处理</li>\n<li>路径图:裁掉所有超出坐标系的部分</li>\n<li>K 线图:忽略整体都超出坐标系的图形,但是不裁剪单个图形</li>\n<li>自定义系列:裁掉所有超出坐标系的部分</li>\n</ul>\n<p>除了自定义系列,其它系列的默认值都为 true,及开启裁剪,如果你觉得不想要裁剪的话,可以设置成 false 关闭。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true" |
| } |
| }, |
| "zlevel": { |
| "desc": "<p>路径图所有图形的 zlevel 值。</p>\n<p><code class=\"codespan\">zlevel</code>用于 Canvas 分层,不同<code class=\"codespan\">zlevel</code>值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的<code class=\"codespan\">zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。</p>\n<p><code class=\"codespan\">zlevel</code> 大的 Canvas 会放在 <code class=\"codespan\">zlevel</code> 小的 Canvas 的上面。</p>\n" |
| }, |
| "z": { |
| "desc": "<p>路径图组件的所有图形的<code class=\"codespan\">z</code>值。控制图形的前后顺序。<code class=\"codespan\">z</code>值小的图形会被<code class=\"codespan\">z</code>值大的图形覆盖。</p>\n<p><code class=\"codespan\">z</code>相比<code class=\"codespan\">zlevel</code>优先级更低,而且不会创建新的 Canvas。</p>\n" |
| }, |
| "silent": { |
| "desc": "\n\n<p>图形是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。</p>\n", |
| "uiControl": { |
| "type": "boolean" |
| } |
| }, |
| "animation": { |
| "desc": "\n\n<p>是否开启动画。</p>\n", |
| "uiControl": { |
| "type": "boolean", |
| "default": "true", |
| "clean": "true" |
| } |
| }, |
| "animationThreshold": { |
| "desc": "<p>是否开启动画的阈值,当单个系列显示的图形数量大于这个阈值时会关闭动画。</p>\n" |
| }, |
| "animationDuration": { |
| "desc": "\n\n<p>初始动画的时长,支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的初始动画效果:</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "1000", |
| "step": "20", |
| "clean": "true" |
| } |
| }, |
| "animationEasing": { |
| "desc": "\n\n<p>初始动画的缓动效果。不同的缓动效果可以参考 <a href=\"https://echarts.apache.org/examples/zh/editor.html?c=line-easing\" target=\"_blank\">缓动示例</a>。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut", |
| "clean": "true" |
| } |
| }, |
| "animationDelay": { |
| "desc": "<p>初始动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n" |
| }, |
| "animationDurationUpdate": { |
| "desc": "\n\n<p>数据更新动画的时长。</p>\n<p>支持回调函数,可以通过每个数据返回不同的时长实现更戏剧的更新动画效果:</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n", |
| "uiControl": { |
| "type": "number", |
| "min": "0", |
| "default": "1000", |
| "step": "20" |
| } |
| }, |
| "animationEasingUpdate": { |
| "desc": "\n\n<p>数据更新动画的缓动效果。</p>\n", |
| "uiControl": { |
| "type": "enum", |
| "options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut" |
| } |
| }, |
| "animationDelayUpdate": { |
| "desc": "<p>数据更新动画的延迟,支持回调函数,可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。</p>\n<p>如下示例:</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n" |
| } |
| } |