正文

新手必看！轻松掌握ECharts图表中图例显示对应值的方法与技巧

/0 浏览量
0515

在数据可视化领域，ECharts 是一款非常流行的 JavaScript 库，它可以帮助我们轻松创建各种图表。而在 ECharts 中，图例是一个非常重要的组成部分，它能够帮助我们识别图表中的不同系列。本文将详细介绍如何在 ECharts 图表中设置图例，并使其显示对应的值。

一、图例的基本概念

在 ECharts 中，图例用于显示图表中的系列信息。每个系列在图例中都会对应一个标志和文本，这个文本可以是系列的名称，也可以是其他自定义的内容。图例的位置、样式和内容都可以根据需求进行调整。

二、图例显示对应值的方法

1. 设置系列名称

在 ECharts 中，每个系列都有一个 name 属性，这个属性就是图例中显示的文本。例如：

var option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '系列1',
        data: [10, 20, 30, 40],
        type: 'line'
    }, {
        name: '系列2',
        data: [20, 10, 30, 40],
        type: 'bar'
    }]
};

在上面的代码中，图例中会显示“系列1”和“系列2”。

2. 自定义图例内容

除了使用系列名称外，我们还可以自定义图例中的内容。这可以通过 label 属性实现，该属性可以设置图例中每个项的标签配置。

var option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '系列1',
        data: [10, 20, 30, 40],
        type: 'line',
        label: {
            show: true,
            position: 'top',
            formatter: '{c}'
        }
    }, {
        name: '系列2',
        data: [20, 10, 30, 40],
        type: 'bar',
        label: {
            show: true,
            position: 'top',
            formatter: '{c}'
        }
    }],
    legend: {
        data: ['系列1', '系列2']
    }
};

在上面的代码中，图例中会显示每个系列的数据值。

3. 使用 tooltip 属性

除了在图例中显示数据值外，我们还可以通过 tooltip 属性在鼠标悬停时显示数据值。

var option = {
    xAxis: {
        type: 'category',
        data: ['A', 'B', 'C', 'D']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '系列1',
        data: [10, 20, 30, 40],
        type: 'line'
    }, {
        name: '系列2',
        data: [20, 10, 30, 40],
        type: 'bar'
    }],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
        formatter: function (params) {
            var res = params[0].name + '<br>';
            params.forEach(function (item) {
                res += item.marker + ' ' + item.seriesName + ' : ' + item.value + '<br>';
            });
            return res;
        }
    }
};

在上面的代码中，当鼠标悬停在图表上时，会显示每个系列的数据值。

三、图例的技巧

1. 调整图例位置

ECharts 允许我们通过 legend 属性调整图例的位置。例如：

legend: {
    orient: 'vertical', // 垂直排列
    left: 'right', // 右侧显示
    top: 'center' // 居中显示
}

2. 图例样式

我们可以通过 legend 属性设置图例的样式，例如：

legend: {
    itemWidth: 20, // 图例项宽度
    itemHeight: 10, // 图例项高度
    itemGap: 10, // 图例项间距
    textStyle: {
        color: '#333' // 图例文字颜色
    }
}

3. 隐藏图例

如果不需要显示图例，可以通过设置 legend 属性的 show 属性为 false 来隐藏图例。

legend: {
    show: false
}

通过以上方法，我们可以轻松地在 ECharts 图表中设置图例，并使其显示对应的值。希望本文能帮助您更好地掌握 ECharts 图例的使用技巧。

-- 展开阅读全文 --