echarts 定制legend内容，显示和位置

Posted 2023-04-02 ฅQSω[*邱╭

echarts 定制legend内容，显示和位置

• 1.type(当图例很多的时候可以用到)
• 2.orient(图例的排版方向)
• 3.top,bottom,left,right(图例在容器中的位置)
• 4.width,height（图例组件的大小）;itemWidth,itemHeight(图例图标的大小)
• 5. align（图例标记和文本的对齐）
• 5. padding（图例内边距），itemGap（图例每项之间的间隔）
• 6.icon(图例项的 icon)
• 7.textStyle（图例的文本样式）
• • 7.1 rich（自定义富文本样式）
• 8.formatter（用来格式化图例文本）

1.type(当图例很多的时候可以用到)

type，图例的类型，可选值为’plain’：普通图例。缺省(默认)就是普通图例。
‘scroll’：可滚动翻页的图例。当图例数量较多时可以使用。
scroll的效果是这样的：

2.orient(图例的排版方向)

orient可选值为’horizontal’（水平默认），‘vertical’（垂直）

3.top,bottom,left,right(图例在容器中的位置)

top,bottom,left,right的值可以是像 20 这样的具体像素值，可以是像 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’, ‘center’, ‘right’。

如果 left 的值为’left’, ‘center’, ‘right’，组件会根据相应的位置自动对齐。
如果 top 的值为’top’, ‘middle’, ‘bottom’，组件会根据相应的位置自动对齐。

4.width,height（图例组件的大小）;itemWidth,itemHeight(图例图标的大小)

wdith和height都可以为String或则Number，默认为自适应
itemWidth和itemHeight为Number，只针对图标

5. align（图例标记和文本的对齐）

默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 ‘right’ 以及纵向布局（orient 为 ‘vertical’）的时候为右对齐，即为 ‘right’。

可选：‘auto’，‘left’，‘right’

5. padding（图例内边距），itemGap（图例每项之间的间隔）

padding，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。

使用示例：

// 设置内边距为 5 padding: 5 // 设置上下的内边距为 5，左右的内边距为 10 padding: [5, 10] //
分别设置四个方向的内边距 padding: [
5, // 上
10, // 右
5, // 下
10, // 左 ]

itemGap,横向布局时为水平间隔，纵向布局时为纵向间隔。

6.icon(图例项的 icon)

图例图标的显示样式，

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

7.textStyle（图例的文本样式）

当你不满足于系统的文本样式就可以用这个啦，字体大小颜色样式都有对应的属性。挑个个重点的讲下

7.1 rich（自定义富文本样式）

这个有什么用处呢？假如你的文本样式不止一种呢，是这样的

那就很有用了，先在rich中定义
eg：

  rich: 
                  a: 
                    width: 200,
                    padding: [0, 40, 0, 0],
                    align: "left",
                  ,
 //然后在下面讲到的formatter中使用就可以了                 

// styleName|text content text content 标记样式名。进行运用

8.formatter（用来格式化图例文本）

个人感觉这个多用在项目开发中，后台返回的数据不是最终的结果的话就需要自己做点处理。建议直接写成回调函数

// 使用回调函数 formatter: function (name)
//逻辑代码
// return ["a|" +name +""]; //使用了rich定义的样式
return 'Legend ’ + name; //最后返回的就是每一项图例的文字描述

一般开发这个就够了，看机会再更新吧

Echarts legend属性使用

参考技术A

Echarts的legend属性是对图例组件的相关配置
而legend就是Echarts图表中对图形的解释部分：

其中legend自身常用的配置属性如下：

设置图例的朝向

属性值：

设置图例在X轴方向上的位置以及在Y轴方向上的位置

例子：

注意：边框宽度和内边距属性值为数值，不加单位。

控制每一项的间距，也就是图例之间的距离
属性值为数值，不带单位

控制图例图形的高度
属性值为数字，不加单位

设置图例文字样式
属性值为一个对象

设置图例的某个选项的数据默认是显示还是隐藏。
false: 隐藏
属性值：对象，属性值内容：图例上的数据与boolean构成键值对
如果某选项设置为false，那么图标上的数据也会默认不显示，而图例会以灰色样式显示

图例上显示的文字信息，如果不设置该项，默认会以series设置的信息作为图例信息。如果设置该项， 必须与series设置的信息一致 ，才会生效。
而该属性的作用：可以单独对图例中某个选项进行单独设置样式
比如：

以上单独设置中
name:指定该项的名称，必填
icon:指定图例项的icon，可以为内置的图形7个图形，或者自定义图标的形式： \'image://url\'
textStyle:：设置文本样式