ECharts图表图例知识点小结

               ECharts 图表图例简述

 

一、知识点

 

1. 作用：

- 用于标识图表中的不同系列，帮助用户理解图表所展示的数据内容。

2. 位置：

- 可以通过配置项设置图例的位置，如 top 、 bottom 、 left 、 right 等。

3. 显示状态控制：

- 可以通过点击图例项来控制对应系列的显示与隐藏。

4. 样式设置：

- 可以设置图例的字体、颜色、大小等样式。

- 可以设置图例项的间距、对齐方式等。

 

二、实例

 

1. 简单柱状图图例：

 

 

option = {

    xAxis: {

        type: 'category',

        data: ['苹果', '香蕉', '橙子']

    },

    yAxis: {

        type: 'value'

    },

    series: [

        {

            name: '销量',

            type: 'bar',

            data: [120, 80, 90]

        }

    ],

    legend: {

        bottom: '5%',

        left: 'center',

        data: ['销量']

    }

};

 

 

在这个例子中，柱状图的图例显示在底部居中位置，标识了图表中的系列名称为“销量”。

 

2. 多个系列折线图图例：

 

 

option = {

    xAxis: {

        type: 'category',

        data: ['周一', '周二', '周三', '周四', '周五']

    },

    yAxis: {

        type: 'value'

    },

    series: [

        {

            name: '系列 1',

            type: 'line',

            data: [10, 20, 15, 25, 30]

        },

        {

            name: '系列 2',

            type: 'line',

            data: [15, 25, 20, 30, 35]

        }

    ],

    legend: {

        top: '5%',

        right: '5%',

        data: ['系列 1', '系列 2']

    }

};

 

 

此例中，折线图有两个系列，图例显示在右上角，分别标识了“系列 1”和“系列 2”。

 

通过以上知识点简述，可以更好地理解和使用 ECharts 图表的图例功能。               

             ECharts图表图例配置

在 ECharts 中，图例的样式可以通过多种方式进行设置。以下是一些主要的样式设置方法：

 

一、字体样式

 

可以设置图例的字体相关属性，如：

 

-  textStyle.color ：设置图例文字的颜色。例如： textStyle: { color: '#333' } ，将图例文字颜色设置为灰色。

-  textStyle.fontSize ：设置字体大小。例如： textStyle: { fontSize: 14 } ，设置字体大小为 14 像素。

-  textStyle.fontWeight ：设置字体粗细。可以是 normal （正常）、 bold （粗体）等。例如： textStyle: { fontWeight: 'bold' } ，设置为粗体。

 

二、背景样式

 

-  legend.backgroundColor ：设置图例的背景颜色。如： backgroundColor: 'rgba(255, 255, 255, 0.8)' ，设置为半透明白色背景。

-  legend.borderColor ：设置图例边框颜色。例如： borderColor: '#999' ，设置边框为灰色。

-  legend.borderWidth ：设置边框宽度。例如： borderWidth: 1 ，设置边框宽度为 1 像素。

 

三、间距和对齐方式

 

-  legend.itemGap ：设置图例项之间的间距。例如： itemGap: 10 ，设置间距为 10 像素。

-  legend.align ：设置图例的对齐方式，可以是 left 、 right 、 center 。例如： align: 'right' ，将图例对齐到右侧。

 

四、图标样式

 

-  legend.icon ：可以设置图例项的图标类型，如 'circle' （圆形）、 'rect' （矩形）、 'roundRect' （圆角矩形）等。例如： icon: 'circle' ，设置图标为圆形。

 

五、交互样式

 

-  legend.inactiveColor ：设置图例项在不活动状态下的颜色。例如：当对应的系列被隐藏时，该图例项的文字颜色会变为这个设置的值。

-  legend.selectedMode ：设置图例的选择模式，可以是 single （单选）、 multiple （多选）等，影响用户点击图例项时的交互行为。

 

通过以上各种设置方法，可以根据具体需求对 ECharts 图表的图例样式进行灵活调整，以达到更好的可视化效果。