Echarts的配置解释(柱状图)legend

最新推荐文章于 2024-10-29 16:15:23 发布

郑建零零发

最新推荐文章于 2024-10-29 16:15:23 发布

阅读量5.2k

点赞数 3

分类专栏： vue 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_52421092/article/details/127893041

版权

vue 专栏收录该内容

75 篇文章 2 订阅

订阅专栏

本文详细介绍了ECharts中图例组件（legend）的各项配置选项，包括类型、显示、位置控制、布局、对齐、内边距、间隔、图形样式、选择模式、关闭时颜色及文本样式等，帮助开发者更好地定制图表的视觉效果。

摘要由CSDN通过智能技术生成

一、legend(图例组件)

1、type(图例组件的类型)

'plain'：普通图例；

'scroll'：可滚动翻页的图例；

2、show(显示图例组件)

true: 显示图例组件

false: 不显示图例组件

3、Z(相当于css的z-index控制图形的前后顺序)

用法： Z: 6 // 赋值为number类型

4、left、top、right、bottom(控制图例组件的上下左右的位置)

值的类型可以是数字、百分百比、方向词

5、orient(图例列表的布局朝向)

'vertical' : 垂直朝向

'horizontal' : 水平朝向

6、align(图例标记和文本的对齐)

'auto': 默认自动，根据组件的位置和 orient 决定

'left': 图例标记在左，文本在右

'right': 文本在左，图例标记在右

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

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

8、itemGap(图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。)

用法： itemGap: 10

9、itemWidth(图例标记的图形宽度)

用法： itemWidth: 10

10、itemHeight(图例标记的图形高度)

用法： itemHeight: 10

11、itemStype(图例的图形样式)

itemStype: {}

(1)、color(图形的颜色。)

用法：color: "rgba(210, 57, 57, 1)"

(2)、borderColor(图形的边框)

用法：borderColor: "rgba(222, 29, 29, 1)"

(3)、borderWidth(图形边框的宽度)

用法： borderWidth: 1.5

(4)、borderType(边框的类型)

用法：borderType: "solid"

12、selecteMode(图例选择的模式)

用法： selectedMode: true // 点击图例图形可以在柱状图中取消或显示对象柱子，false反之

13、inactiveColor(图例关闭时的颜色)

用法： inactiveColor: "rgba(225, 19, 19, 1)"

14、textStyle(图例的文本样式)

(1)、color(文字的颜色)

用法：color: "rgba(241, 8, 8, 1)"

(2)、fontStyle(文字的风格)

用法： fontStyle: "oblique" | "normal" | "normal"

(3)、fontWeight(文字的粗细)

用法： fontWeight: 700

(4)、lineHeight(行高)

用法： lineHeight: 13

(5)、padding(文字的内边距)

用法： padding: [7, 7, 7, 7]