echarts基础学习之组件legend（二）

柔光的暖阳◎ 2022-05-22 11:15 741阅读 0赞

> 今天学习echarts的组件legend图例
> 
> 图例组件。
> 
> 图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
> 
> ECharts 3 中单个 echarts 实例中可以存在多个图例组件，会方便多个图例的布局。
> 
> 当图例数量过多时，可以使用 [滚动图例（垂直）][Link 1] 或 [滚动图例（水平）][Link 2]
> 
> 以下摘自echarts官网，详情也可去echarts官网配置看[点击打开链接][Link 3]
> 
> legend.type  string
> 
> 图例的类型。可选值：
> 
>  *  `'plain'`：普通图例。缺省就是普通图例。
>  *  `'scroll'`：可滚动翻页的图例。当图例数量较多时可以使用。
> 
> 参见 [滚动图例（垂直）][Link 1] 或 [滚动图例（水平）][Link 2]。
> 
> 当使用 `'scroll'` 时，这些使用这些设置进行细节配置：
> 
>  *  [legend.scrollDataIndex][]
>  *  [legend.pageButtonItemGap][]
>  *  [legend.pageButtonGap][]
>  *  [legend.pageButtonPosition][]
>  *  [legend.pageFormatter][]
>  *  [legend.pageIcons][]
>  *  [legend.pageIconColor][]
>  *  [legend.pageIconInactiveColor][]
>  *  [legend.pageIconSize][]
>  *  [legend.pageTextStyle][]
>  *  [legend.animation][]
>  *  [legend.animationDurationUpdate][]
> 
> legend.id  string
> 
> 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
> 
> legend.id  string
> 
> 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。
> 
> legend.show  boolean
> 
> \[ default: true \]
> 
> legend.zlevel  number
> 
> \[ default: 0 \]
> 
> 所有图形的 zlevel 值。
> 
> `zlevel`用于 Canvas 分层，不同`zlevel`值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的`zlevel`。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
> 
> `zlevel` 大的 Canvas 会放在 `zlevel` 小的 Canvas 的上面。
> 
> legend.z  number
> 
> \[ default: 2 \]
> 
> 组件的所有图形的`z`值。控制图形的前后顺序。`z`值小的图形会被`z`值大的图形覆盖。
> 
> `z`相比`zlevel`优先级更低，而且不会创建新的 Canvas。
> 
> legend.left  string, number
> 
> \[ default: 'auto' \]
> 
> 图例组件离容器左侧的距离。
> 
> `left` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比，也可以是 `'left'`, `'center'`, `'right'`。
> 
> 如果 `left` 的值为`'left'`, `'center'`, `'right'`，组件会根据相应的位置自动对齐。
> 
> legend.top  string, number
> 
> \[ default: 'auto' \]
> 
> 图例组件离容器上侧的距离。
> 
> `top` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比，也可以是 `'top'`, `'middle'`, `'bottom'`。
> 
> 如果 `top` 的值为`'top'`, `'middle'`, `'bottom'`，组件会根据相应的位置自动对齐。
> 
> legend.right  string, number
> 
> \[ default: 'auto' \]
> 
> 图例组件离容器右侧的距离。
> 
> `right` 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比。
> 
> 默认自适应。
> 
> legend.bottom  string, number
> 
> \[ default: 'auto' \]
> 
> 图例组件离容器下侧的距离。
> 
> bottom 的值可以是像 `20` 这样的具体像素值，可以是像 `'20%'` 这样相对于容器高宽的百分比。
> 
> 默认自适应。
> 
> legend.width  string, number
> 
> \[ default: 'auto' \]
> 
> 图例组件的宽度。默认自适应。
> 
> legend.height  string, number
> 
> \[ default: 'auto' \]
> 
> 图例组件的高度。默认自适应。
> 
> legend.orient  string
> 
> \[ default: 'horizontal' \]
> 
> 图例列表的布局朝向。
> 
> 可选：
> 
>  *  'horizontal'
>  *  'vertical'
> 
> legend.align  string
> 
> \[ default: 'auto' \]
> 
> 图例标记和文本的对齐。默认自动，根据组件的位置和 orient 决定，当组件的 [left][] 值为 'right' 以及纵向布局（[orient][] 为 'vertical'）的时候为右对齐，及为 'right'。
> 
> 可选：
> 
>  *  'auto'
>  *  'left'
>  *  'right'
> 
> legend.padding  number
> 
> \[ default: 5 \]
> 
> 图例内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
> 
> 使用示例：
> 
>     // 设置内边距为 5 padding: 5 // 设置上下的内边距为 5，左右的内边距为 10 padding: [5, 10] // 分别设置四个方向的内边距 padding: [ 5, // 上 10, // 右 5, // 下 10, // 左 ]
> 
> legend.itemGap  number
> 
> \[ default: 10 \]
> 
> 图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
> 
> legend.itemWidth  number
> 
> \[ default: 25 \]
> 
> 图例标记的图形宽度。
> 
> legend.itemHeight  number
> 
> \[ default: 14 \]
> 
> 图例标记的图形高度。
> 
> legend.symbolKeepAspect  boolean
> 
> \[ default: true \]
> 
> 如果图标（可能来自系列的 `symbol` 或用户自定义的 `legend.data.icon`）是 `path://` 的形式，是否在缩放时保持该图形的长宽比。
> 
> legend.formatter  string, Function
> 
> \[ default: null \]
> 
> 用来格式化图例文本，支持字符串模板和回调函数两种形式。
> 
> 示例：
> 
>     // 使用字符串模板，模板变量为图例名称 {name} formatter: 'Legend {name}' // 使用回调函数 formatter: function (name) { return 'Legend ' + name; }
> 
> legend.selectedMode  string, boolean
> 
> \[ default: true \]
> 
> 图例选择的模式，控制是否可以通过点击图例改变系列的显示状态。默认开启图例选择，可以设成 `false` 关闭。
> 
> 除此之外也可以设成 `'single'` 或者 `'multiple'` 使用单选或者多选模式。
> 
> legend.inactiveColor  Color
> 
> \[ default: '\#ccc' \]
> 
> 图例关闭时的颜色。
> 
> legend.selected  Object
> 
> 图例选中状态表。
> 
> 示例：
> 
>     selected: { // 选中'系列1' '系列1': true, // 不选中'系列2' '系列2': false }
> 
> legend.textStyle  Object
> 
> 图例的公用文本样式。
> 
> 折叠详情
> 
> legend.textStyle.color  Color
> 
> \[ default: \#333 \]
> 
> 文字的颜色。
> 
> legend.textStyle.fontStyle  string
> 
> \[ default: 'normal' \]
> 
> 文字字体的风格
> 
> 可选：
> 
>  *  `'normal'`
>  *  `'italic'`
>  *  `'oblique'`
> 
> legend.textStyle.fontWeight  string
> 
> \[ default: normal \]
> 
> 文字字体的粗细
> 
> 可选：
> 
>  *  `'normal'`
>  *  `'bold'`
>  *  `'bolder'`
>  *  `'lighter'`
>  *  100 | 200 | 300 | 400...
> 
> legend.textStyle.fontFamily  string
> 
> \[ default: 'sans-serif' \]
> 
> 文字的字体系列
> 
> 还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
> 
> legend.textStyle.fontSize  number
> 
> \[ default: 12 \]
> 
> 文字的字体大小
> 
> legend.textStyle.lineHeight  number
> 
> 行高。
> 
> `rich` 中如果没有设置 `lineHeight`，则会取父层级的 `lineHeight`。例如：
> 
>     {
>         lineHeight: 56,
>         rich: {
>             a: {
>                 // 没有设置 `lineHeight`，则 `lineHeight` 为 56
>             }
>         }
>     }
> 
> legend.textStyle.backgroundColor  string, Object
> 
> \[ default: 'transparent' \]
> 
> 文字块背景色。
> 
> 可以是直接的颜色值，例如：`'#123234'`, `'red'`, `rgba(0,23,11,0.3)'`。
> 
> 可以支持使用图片，例如：
> 
>     backgroundColor: {
>         image: 'xxx/xxx.png'
>         // 这里可以是图片的 URL，
>         // 或者图片的 dataURI，
>         // 或者 HTMLImageElement 对象，
>         // 或者 HTMLCanvasElement 对象。
>     }
> 
> 当使用图片的时候，可以使用 `width` 或 `height` 指定高宽，也可以不指定自适应。
> 
> legend.textStyle.borderColor  string
> 
> \[ default: 'transparent' \]
> 
> 文字块边框颜色。
> 
> legend.textStyle.borderWidth  number
> 
> \[ default: 0 \]
> 
> 文字块边框宽度。
> 
> legend.textStyle.borderRadius  number, Array
> 
> \[ default: 0 \]
> 
> 文字块的圆角。
> 
> legend.textStyle.padding  number, Array
> 
> \[ default: 0 \]
> 
> 文字块的内边距。例如：
> 
>  *  `padding: [3, 4, 5, 6]`：表示 `[上, 右, 下, 左]` 的边距。
>  *  `padding: 4`：表示 `padding: [4, 4, 4, 4]`。
>  *  `padding: [3, 4]`：表示 `padding: [3, 4, 3, 4]`。
> 
> 注意，文字块的 `width` 和 `height` 指定的是内容高宽，不包含 `padding`。
> 
> legend.textStyle.shadowColor  string
> 
> \[ default: 'transparent' \]
> 
> 文字块的背景阴影颜色。
> 
> legend.textStyle.shadowBlur  number
> 
> \[ default: 0 \]
> 
> 文字块的背景阴影长度。
> 
> legend.textStyle.shadowOffsetX  number
> 
> \[ default: 0 \]
> 
> 文字块的背景阴影 X 偏移。
> 
> legend.textStyle.shadowOffsetY  number
> 
> \[ default: 0 \]
> 
> 文字块的背景阴影 Y 偏移。
> 
> legend.textStyle.width  number, string
> 
> 文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 `backgroundColor`）时，可能会使用它。
> 
> 注意，文字块的 `width` 和 `height` 指定的是内容高宽，不包含 `padding`。
> 
> `width` 也可以是百分比字符串，如 `'100%'`。表示的是所在文本块的 `contentWidth`（即不包含文本块的 `padding`）的百分之多少。之所以以 `contentWidth` 做基数，因为每个文本片段只能基于 `content box` 布局。如果以 `outerWidth` 做基数，则百分比的计算在实用中不具有意义，可能会超出。
> 
> 注意，如果不定义 `rich` 属性，则不能指定 `width` 和 `height`。
> 
> legend.textStyle.height  number, string
> 
> 文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 `backgroundColor`）时，可能会使用它。
> 
> 注意，文字块的 `width` 和 `height` 指定的是内容高宽，不包含 `padding`。
> 
> 注意，如果不定义 `rich` 属性，则不能指定 `width` 和 `height`。
> 
> legend.textStyle.textBorderColor  string
> 
> \[ default: 'transparent' \]
> 
> 文字本身的描边颜色。
> 
> legend.textStyle.textBorderWidth  number
> 
> \[ default: 0 \]
> 
> 文字本身的描边宽度。
> 
> legend.textStyle.textShadowColor  string
> 
> \[ default: 'transparent' \]
> 
> 文字本身的阴影颜色。
> 
> legend.textStyle.textShadowBlur  number
> 
> \[ default: 0 \]
> 
> 文字本身的阴影长度。
> 
> legend.textStyle.textShadowOffsetX  number
> 
> \[ default: 0 \]
> 
> 文字本身的阴影 X 偏移。
> 
> legend.textStyle.textShadowOffsetY  number
> 
> \[ default: 0 \]
> 
> 文字本身的阴影 Y 偏移。
> 
> legend.textStyle.rich  Object
> 
> 在 `rich` 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。
> 
> 例如：
> 
>     label: {
>         // 在文本中，可以对部分文本采用 rich 中定义样式。
>         // 这里需要在文本中使用标记符号：
>         // `{styleName|text content text content}` 标记样式名。
>         // 注意，换行仍是使用 '\n'。
>         formatter: [
>             '{a|这段文本采用样式a}',
>             '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
>         ].join('\n'),
>     
>         rich: {
>             a: {
>                 color: 'red',
>                 lineHeight: 10
>             },
>             b: {
>                 backgroundColor: {
>                     image: 'xxx/xxx.jpg'
>                 },
>                 height: 40
>             },
>             x: {
>                 fontSize: 18,
>                 fontFamily: 'Microsoft YaHei',
>                 borderColor: '#449933',
>                 borderRadius: 4
>             },
>             ...
>         }
>     }
> 
> 详情参见教程：[富文本标签][Link 4]
> 
> 展开详情 ...
> 
> legend.tooltip  Object
> 
> 图例的 tooltip 配置，配置项同 [tooltip][]。默认不显示，可以在 legend 文字很多的时候对文字做裁剪并且开启 tooltip，如下示例：
> 
>     legend: { formatter: function (name) { return echarts.format.truncateText(name, 40, '14px Microsoft Yahei', '…'); }, tooltip: { show: true } }
> 
> legend.data\[i\]  Object
> 
> 图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 `name`（如果是[饼图][Link 5]，也可以是饼图单个数据的 `name`）。图例组件会自动根据对应系列的图形标记（symbol）来绘制自己的颜色和标记，特殊字符串 `''`（空字符串）或者 `'\n'`（换行字符串）用于图例的换行。
> 
> 如果 `data` 没有被指定，会自动从当前系列中获取。多数系列会取自 [series.name][] 或者 [series.encode][] 的 `seriesName` 所指定的维度。如 [饼图][Link 5] and [漏斗图][Link 6] 等会取自 series.data 中的 name。
> 
> 如果要设置单独一项的样式，也可以把该项写成配置项对象。此时必须使用 `name` 属性对应表示系列的 `name`。
> 
> 示例
> 
>     data: [{ name: '系列1', // 强制设置图形为圆。 icon: 'circle', // 设置文本为红色 textStyle: { color: 'red' } }]
> 
> 折叠详情
> 
> legend.data\[i\].name  string
> 
> 图例项的名称，应等于某系列的`name`值（如果是饼图，也可以是饼图单个数据的 `name`）。
> 
> legend.data\[i\].icon  string
> 
> 图例项的 icon。
> 
> ECharts 提供的标记类型包括 `'circle'`, `'rect'`, `'roundRect'`, `'triangle'`, `'diamond'`, `'pin'`, `'arrow'`
> 
> 可以通过 `'image://url'` 设置为图片，其中 URL 为图片的链接，或者 `dataURI`。
> 
> URL 为图片链接例如：
> 
>     'image://http://xxx.xxx.xxx/a/b.png'
> 
> URL 为 `dataURI` 例如：
> 
>     'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
> 
> 可以通过 `'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\[i\].textStyle  Object
> 
> 图例项的文本样式。
> 
> legend.backgroundColor  Color
> 
> \[ default: 'transparent' \]
> 
> 图例背景色，默认透明。
> 
> > 颜色可以使用 RGB 表示，比如 `'rgb(128, 128, 128)'` ，如果想要加上 alpha 通道，可以使用 RGBA，比如 `'rgba(128, 128, 128, 0.5)'`，也可以使用十六进制格式，比如 `'#ccc'`
> 
> legend.borderColor  Color
> 
> \[ default: '\#ccc' \]
> 
> 图例的边框颜色。支持的颜色格式同 backgroundColor。
> 
> legend.borderWidth  number
> 
> \[ default: 1 \]
> 
> 图例的边框线宽。
> 
> legend.borderRadius  number, Array
> 
> \[ default: 0 \]
> 
> 圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。 如:
> 
>     borderRadius: 5, // 统一设置四个角的圆角大小 borderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）
> 
> legend.shadowBlur  number
> 
> 图形阴影的模糊大小。该属性配合 `shadowColor`,`shadowOffsetX`, `shadowOffsetY` 一起设置图形的阴影效果。
> 
> 示例：
> 
>     { shadowColor: 'rgba(0, 0, 0, 0.5)', shadowBlur: 10 }
> 
> 注意：此配置项生效的前提是，设置了 `show: true` 以及值不为 `tranparent` 的背景色 `backgroundColor`。
> 
> legend.shadowColor  Color
> 
> 阴影颜色。支持的格式同`color`。
> 
> 注意：此配置项生效的前提是，设置了 `show: true`。
> 
> legend.shadowOffsetX  number
> 
> \[ default: 0 \]
> 
> 阴影水平方向上的偏移距离。
> 
> 注意：此配置项生效的前提是，设置了 `show: true`。
> 
> legend.shadowOffsetY  number
> 
> \[ default: 0 \]
> 
> 阴影垂直方向上的偏移距离。
> 
> 注意：此配置项生效的前提是，设置了 `show: true`。
> 
> legend.scrollDataIndex  number
> 
> \[ default: 0 \]
> 
> [legend.type][] 为 `'scroll'` 时有效。
> 
> 图例当前最左上显示项的 `dataIndex`。
> 
> `setOption` 时指定此项的话，可决定当前图例滚动到哪里。
> 
> 但是，如果仅仅想改变图例翻页，一般并不调用 `setOption`（因为这太重量了），仅仅使用 action [legendScroll][] 即可。
> 
> 参见 [滚动图例（垂直）][Link 1] 或 [滚动图例（水平）][Link 2]。
> 
> legend.pageButtonItemGap  number
> 
> \[ default: 5 \]
> 
> [legend.type][] 为 `'scroll'` 时有效。
> 
> 图例控制块中，按钮和页信息之间的间隔。
> 
> 参见 [滚动图例（垂直）][Link 1] 或 [滚动图例（水平）][Link 2]。
> 
> legend.pageButtonGap  number
> 
> \[ default: null \]
> 
> [legend.type][] 为 `'scroll'` 时有效。
> 
> 图例控制块和图例项之间的间隔。
> 
> 参见 [滚动图例（垂直）][Link 1] 或 [滚动图例（水平）][Link 2]。
> 
> legend.pageButtonPosition  string
> 
> \[ default: 'end' \]
> 
> [legend.type][] 为 `'scroll'` 时有效。
> 
> 图例控制块的位置。可选值为：
> 
>  *  `'start'`：控制块在左或上。
>  *  `'end'`：按钮快在右或下。
> 
> 参见 [滚动图例（垂直）][Link 1] 或 [滚动图例（水平）][Link 2]。
> 
> legend.pageFormatter  string, Function
> 
> \[ default: '\{current\}/\{total\}' \]
> 
> [legend.type][] 为 `'scroll'` 时有效。
> 
> 图例控制块中，页信息的显示格式。默认为 `'{current}/{total}'`，其中 `{current}` 是当前页号（从 1 开始计数），`{total}` 是总页数。
> 
> 如果 `pageFormatter` 使用函数，须返回字符串，参数为：
> 
>     { current: number total: number }
> 
> 参见 [滚动图例（垂直）][Link 1] 或 [滚动图例（水平）][Link 2]。
> 
> legend.pageIcons  Object
> 
> [legend.type][] 为 `'scroll'` 时有效。
> 
> 图例控制块的图标。
> 
> 展开详情 ...
> 
> legend.pageIconColor  string
> 
> \[ default: '\#2f4554' \]
> 
> [legend.type][] 为 `'scroll'` 时有效。
> 
> 翻页按钮的颜色。
> 
> 参见 [滚动图例（垂直）][Link 1] 或 [滚动图例（水平）][Link 2]。
> 
> legend.pageIconInactiveColor  string
> 
> \[ default: '\#aaa' \]
> 
> [legend.type][] 为 `'scroll'` 时有效。
> 
> 翻页按钮不激活时（即翻页到头时）的颜色。
> 
> 参见 [滚动图例（垂直）][Link 1] 或 [滚动图例（水平）][Link 2]。
> 
> legend.pageIconSize  number, Array
> 
> \[ default: 15 \]
> 
> [legend.type][] 为 `'scroll'` 时有效。
> 
> 翻页按钮的大小。可以是数字，也可以是数组，如 `[10, 3]`，表示 `[宽，高]`。
> 
> 参见 [滚动图例（垂直）][Link 1] 或 [滚动图例（水平）][Link 2]。
> 
> legend.pageTextStyle  Object
> 
> [legend.type][] 为 `'scroll'` 时有效。
> 
> 图例页信息的文字样式。
> 
> 展开详情 ...
> 
> legend.animation  boolean
> 
> 图例翻页是否使用动画。
> 
> legend.animationDurationUpdate  number
> 
> \[ default: 800 \]
> 
> 图例翻页时的动画时长。
> 
>   
> 
> 
> 案例
> 
>     <!DOCTYPE HTML>
>     <html>
>     	<head>
>     		<meta  charset="utf-8"/>
>     		<title>echarts之组件title</title>
>     		
>     		<script type="text/javascript" src="../js/echarts.js" ></script>
>     	</head>
>     	<body>
>     		<div id="title" style="width: 600px; height: 400px;"></div>
>     		<script type="text/javascript">
>     			//初始化echarts
>     			var myChart = echarts.init(document.getElementById('title'));
>     			//配置
>     			var option = {
>     				title:{
>     					//是否显示，默认true
>     					show:true,
>     					//标题文本
>     					text:'我的主标题',
>     					textStyle:{
>     						//主标题字体颜色
>     						color:'green',
>     						//主标题的字体风格，斜体加粗
>     						fontStyle:'oblique',
>     						//文字大小
>     						fontSize:24,
>     					},
>     					subtext:'我的副标题',
>     					//副标题样式
>     					subtextStyle:{
>     						color:'#FF4500',
>     						fontSize:15
>     					},
>     					//距离容器左边的距离，居中，九宫格布局
>     					left:'center',
>     				},
>     				legend:{
>     					//是否显示，默认true
>     					show:true,
>     					//图例类型，普通类型
>     					type:'plain',
>     					//图例数据与series的name对应
>     					data:['图例1','图例2'],
>     					//离容器左边的距离，左对齐
>     					left:'center',
>     					//离容器顶端的距离，靠底端
>     					top:'bottom',
>     					//图例布局的朝向，水平
>     					orient:'horizontal',
>     					//图例与文本的对齐方式，默认auto
>     					align:'right',
>     					//图例之间的间距
>     					itemGap:10,
>     					//图形的宽高
>     					itemWidth:25,
>     					itemHeight:14,
>     					symbolKeepAspect:true,
>     					//文字格式器，支持函数
>     					formatter:'{name}数据',
>     					//图例选择模式，多选模式
>     					selectMode:'multiple',
>     					//图例关闭时的颜色，默认为#CCC
>     					inactiveColor:'#48D1CC',
>     					//图例选中状态
>     					selected:{
>     						'图例1':true,
>     						'图例2':false
>     					},
>     					//文本样式
>     					textStyle:{
>     						color:'#FFD700',
>     						fontSize:16
>     					},
>     					//提示框，默认不显示
>     					tooltip:{
>     						show:true
>     					}
>     				},
>     				xAxis:{
>     					type:'category',
>     					data:['小米','魅族','华为','苹果','一加']
>     				},
>     				yAxis:{},
>     				series:[
>     					{
>     						name:'图例1',
>     						type:'bar',
>     						data:[15,45,78,56,45]
>     					},
>     					{
>     						name:'图例2',
>     						type:'line',
>     						data:[15,45,78,56,45]
>     					}
>     				]
>     			};
>     			//显示
>     			myChart.setOption(option);
>     		</script>
>     	</body>
>     </html>
> 
> 效果图
> 
> ![70][]建议还是多动手！！！！

[Link 1]: http://echarts.baidu.com/gallery/editor.html?c=pie-legend&edit=1&reset=1
[Link 2]: http://echarts.baidu.com/gallery/editor.html?c=radar2&edit=1&reset=1
[Link 3]: http://echarts.baidu.com/option.html#legend
[legend.scrollDataIndex]: http://echarts.baidu.com/option.html#legend.scrollDataIndex
[legend.pageButtonItemGap]: http://echarts.baidu.com/option.html#legend.pageButtonItemGap
[legend.pageButtonGap]: http://echarts.baidu.com/option.html#legend.pageButtonGap
[legend.pageButtonPosition]: http://echarts.baidu.com/option.html#legend.pageButtonPosition
[legend.pageFormatter]: http://echarts.baidu.com/option.html#legend.pageFormatter
[legend.pageIcons]: http://echarts.baidu.com/option.html#legend.pageIcons
[legend.pageIconColor]: http://echarts.baidu.com/option.html#legend.pageIconColor
[legend.pageIconInactiveColor]: http://echarts.baidu.com/option.html#legend.pageIconInactiveColor
[legend.pageIconSize]: http://echarts.baidu.com/option.html#legend.pageIconSize
[legend.pageTextStyle]: http://echarts.baidu.com/option.html#legend.pageTextStyle
[legend.animation]: http://echarts.baidu.com/option.html#legend.animation
[legend.animationDurationUpdate]: http://echarts.baidu.com/option.html#legend.animationDurationUpdate
[left]: http://echarts.baidu.com/option.html#legend.left
[orient]: http://echarts.baidu.com/option.html#legend.orient
[Link 4]: http://echarts.baidu.com/tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE
[tooltip]: http://echarts.baidu.com/option.html#tooltip
[Link 5]: http://echarts.baidu.com/option.html#series-pie
[series.name]: http://echarts.baidu.com/option.html#series.name
[series.encode]: http://echarts.baidu.com/option.html#series.encode
[Link 6]: http://echarts.baidu.com/option.html#series-funnel
[SVG PathData]: http://www.w3.org/TR/SVG/paths.html#PathData
[legend.type]: http://echarts.baidu.com/option.html#legend.type
[legendScroll]: http://echarts.baidu.com/api.html#action.legend.legendScroll
[70]: /images/20220522/6bbfb6227a7e43a8801b61d18026b017.png