| (window.webpackJsonp=window.webpackJsonp||[]).push([[119],{413:function(n,e,t){"use strict";t.r(e),e.default="# 图例\n\n图例是图表中对内容区元素的注释、用不同形状、颜色、文字等来标示不同数据列，通过点击对应数据列的标记，可以显示或隐藏该数据列。图例虽然不是图表中的主要信息、却是了解图表信息的钥匙。\n\n## 布局\n\n图例一般放在图表的右上角、也可以放在图表的底部、同一页面中的所有图例位置保持一致，可以横排对齐也可以纵排对齐。还要综合考虑整体的图表空间是适合哪种摆放方式。当图表纵向空间紧张或者内容区量过大的时候、建议摆放在图表的下方。下面是几种图例的摆放方式：\n\n```js live\noption = {\n legend: {\n // Try 'horizontal'\n orient: 'vertical',\n right: 10,\n top: 'center'\n },\n dataset: {\n source: [\n ['product', '2015', '2016', '2017'],\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 xAxis: { type: 'category' },\n yAxis: {},\n series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]\n};\n```\n\n对于图例较多时，可以使用可滚动翻页的图例\n\n```js\noption = {\n legend: {\n type: 'scroll',\n orient: 'vertical',\n right: 10,\n top: 20,\n bottom: 20,\n data: ['图例一', '图例二', '图例三' /* ... */, , '图例n']\n // ...\n }\n // ...\n};\n```\n\n## 样式\n\n在深色系背景下、为了方便阅读，建议给图例加上半透明的浅色背景层，文字颜色设置为浅色。\n\n```js\noption = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n backgroundColor: '#ccc',\n textStyle: {\n color: '#ccc'\n // ...\n }\n // ...\n }\n // ...\n};\n```\n\n图例的颜色标签有很多种设计方式、针对不同的图表、图例样式也会有所不同。\n\n<img max-width=\"830\" width=\"80%\" height=\"80%\" src=\"images/design/legend/charts_sign_img04.png\" />\n\n```js\noption = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n icon: 'rect'\n // ...\n }\n // ...\n};\n```\n\n## 交互\n\n根据场景需要，图例可支持交互操作，点击控制显示或隐藏对应的数据列；\n\n```js\noption = {\n legend: {\n data: ['图例一', '图例二', '图例三'],\n selected: {\n 图例一: true,\n 图例二: true,\n 图例三: false\n }\n // ...\n }\n // ...\n};\n```\n\n## 图例注意事项\n\n图例要要注意视情况使用，有些双轴图包含了多种图表类型，不同类型的图例样式要有所区分。\n\n```js\noption = {\n legend: {\n data: [\n {\n name: '图例一',\n icon: 'rect'\n },\n {\n name: '图例二',\n icon: 'circle'\n },\n {\n name: '图例三',\n icon: 'pin'\n }\n ]\n // ...\n },\n series: [\n {\n name: '图例一'\n // ...\n },\n {\n name: '图例二'\n // ...\n },\n {\n name: '图例三'\n // ...\n }\n ]\n // ...\n};\n```\n\n当图表只有一种数据信息时，用图表标题说明数据信息即可。建议此时不要加上图例。\n"}}]); |