ECharts Legend完整教程：设计数据可视化和互动图表

EHVL • 2024-10-04 00:15 • 编程

一、什么是ECharts？

ECharts是一个开源的可视化图表库，由阿里巴巴前端团队根据业务需求自主研发。它可以通过HTML5 Canvas或者SVG实现可交互的数据可视化展现。

使用ECharts，开发者可以轻松构建各种类型的图表，如折线图、柱状图、饼图等。同时，它还支持动态数据更新和交互事件，如数据区域缩放、数据展示、数据标记等。

二、ECharts中的Legend

Legend是图例的意思，用于说明图表中不同系列的含义。在ECharts中，Legend可以用于切换不同的数据系列的可见性，方便用户查看不同系列的数据。

在ECharts中，我们可以通过配置项中的legend属性来定义Legend的样式、位置、数据等信息。

下面我们看一下Legend的基本配置代码：

option = {
    legend: {
        data: ['销量']
    },
    xAxis: {
        data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
}

在这段代码中，legend属性中的data属性表示Legend的数据，这里我们只有一个数据项，即销量。

三、Legend的样式配置

在ECharts中，Legend的样式可以通过多个属性进行配置，下面我们介绍一些常用的属性。

1. orient：表示Legend的布局方向，可设置为horizontal和vertical。默认是水平方向。

下面是一个垂直方向的Legend配置示例：

option = {
    legend: {
        orient: 'vertical',
        x: 'right',
        y: 'middle',
        data: ['销量']
    },
    ...
}

2. textStyle：表示Legend文本的样式，可设置字体大小、字体颜色等信息。

下面是购买量Legend的文本样式配置示例：

option = {
    legend: {
        data: [{
            name: '化妆品',
            textStyle: {
                fontSize: '20',
                color: '#FF4500'
            }
        }]
    },
    ...
}

3. backgroundColor：表示Legend的背景颜色，可设置为任意有效的颜色值。

下面是Legend的背景颜色配置示例：

option = {
    legend: {
        backgroundColor: '#F5FCFF',
        data: ['销量']
    },
    ...
}

四、Legend的数据源配置

在ECharts中，Legend的数据源可以使用多个方式配置，下面我们介绍几种常用方式。

1. data属性：用于固定数据源，可以使用数组或对象的形式。

下面是使用数组形式的数据源配置示例：

option = {
    legend: {
        data: ['销量']
    },
    ...
}

下面是使用对象形式的数据源配置示例：

option = {
    legend: {
        data: [{
            name: '销量',
            icon: 'rect'
        }]
    },
    ...
}

2. series属性：用于从数据系列中动态绑定数据源，使用数组的形式。

下面是使用series属性动态绑定数据源的配置示例：

option = {
    xAxis: {
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: {},
    legend: {
        data: []
    },
    series: [{
        name: '购买量',
        type: 'bar',
        data: [100, 200, 300, 400, 500, 600],
        showInLegend: true
    }]
}

在这个示例中，Legend的数据源为空数组，series属性中的showInLegend选项设置为true，则自动将图例绑定到该数据系列。

五、Legend的事件配置

在ECharts中，Legend也可绑定事件，如单击事件（click），双击事件（dblclick）等。

下面是一个单击事件的配置示例：

option = {
    legend: {
        data: ['销量'],
        selected: {
            '销量': true
        },
        align: 'left',
        padding: 10,
        itemGap: 20,
        itemWidth: 50,
        itemHeight: 30,
        textStyle: {
            color: 'black',
            fontSize: 14
        },
        emphasis: {
            textStyle: {
                color: 'red'
            }
        }
    },
    series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
    }]
}

myChart.on('legendselectchanged', function(obj) {
    console.log(obj.name);
});

在这个示例中，我们通过on方法绑定了一个名为legendselectchanged的事件，当用户单击Legend时，控制台会输出对应的数据项名称。

六、总结

本文介绍了ECharts中Legend的基本概念、样式、数据源和事件绑定等。使用ECharts，你可以轻松地创建可视化图表，并通过Legend来展示不同系列的数据信息。

原创文章，作者：EHVL，如若转载，请注明出处：https://www.506064.com/n/135764.html