04-echart配置项-legend

图例组件。 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。 ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。 当图例数量过多时，可以使用 滚动图例（垂直） 或 滚动图例（水平），参见：legend.type

这个组件表示图例的组件。如下图所示：

图例的目的：为了展示不同的系列。
系列是啥：按某一个类别区分的一类数据。系列是放在series配置中。

下图中：销量是对与xAxis中集体体现的一个系列。对应这series中的每一个系列的数据。并且，legend中data的值对应着series中的每一个系列的name的值。
总结上：图例就是为了展示系列，系列就是series中的每一个对象所展示出来的图。

图例是否展示取决于series中的name值。如果没有name值，那就不展示。如果通过legend中的data进行配置，那么data中的每一项也必须是跟series一一对应。

legend. type

string

图例的类型。可选值：

• 'plain'：普通图例。缺省就是普通图例。
• 'scroll'：可滚动翻页的图例。当图例数量较多时可以使用。

  legend. formatter

  string Function

用来格式化图例文本，支持字符串模板和回调函数两种形式。
是一个通用的属性，很多其他的组件中也用得到的。一般也就是这两种形式。
示例：

// 使用字符串模板，模板变量为图例名称 {name}
formatter: 'Legend {name}'
// 使用回调函数
formatter: function (name) {
    return 'Legend ' + name;
}

legend. tooltip

Object
主要的作用就是当鼠标放到图例上去的时候，会展示一些信息，具体的信息就是formatter返回的信息。一般会设置到图例的文本太多之后，展示不下才设置这个属性让交互更加友好。
图例的 tooltip 配置，配置项同 tooltip。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip，如下示例：

legend: {
    formatter: function (name) {
        return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…');
    },
    tooltip: {
        show: true
    }
}

legend. data

Array

图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name（如果是饼图，也可以是饼图单个数据的 name）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 ''（空字符串）或者 '\n'（换行字符串）用于图例的换行。
如果 data 没有被指定，会自动从当前系列中获取。多数系列会取自 series.name 或者 series.encode 的 seriesName 所指定的维度。如 饼图 and 漏斗图 等会取自 series.data 中的 name。
如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 name 属性对应表示系列的 name。

legend.data. name

string

图例项的名称，应等于某系列的name值（如果是饼图，也可以是饼图单个数据的 name）。

legend.data. icon

string

图例项的 icon。
ECharts 提供的标记类型包括
'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'
可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
URL 为图片链接例如：

'image://http://xxx.xxx.xxx/a/b.png'

URL 为 dataURI 例如：

'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'

可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
例如：

'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'

legend.data. textStyle

Object

图例项的文本样式。这个跟外面的textStyle的设置一样。设置的文本样式。有这个的作用就是可以单独设置一个图例的文本的样式。

一些样式的配置查看官网

legend配置