ECharts图表图例知识点小结

               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 图表的图例样式进行灵活调整,以达到更好的可视化效果。

版权声明:如无特殊标注,文章均来自网络,本站编辑整理,转载时请以链接形式注明文章出处,请自行分辨。

本文链接:https://www.shbk5.com/dnsj/75490.html