正文

学会echarts轻松添加标题与图例，图表更清晰易懂

/0 浏览量
1024

在数据可视化领域，ECharts 是一款非常流行的 JavaScript 库，它可以帮助我们快速、轻松地生成各种图表。其中，添加标题与图例是让图表更清晰易懂的关键步骤。本文将详细介绍如何在 ECharts 中添加标题与图例，让你轻松掌握这一技能。

一、添加标题

在 ECharts 中，添加标题非常简单。首先，我们需要在配置项中设置 title 属性，然后根据需要调整其子属性。

1.1. 设置标题文本

title: {
    text: '示例标题'
}

1.2. 设置标题样式

ECharts 提供了丰富的样式配置，包括字体、颜色、字号等。

title: {
    text: '示例标题',
    textStyle: {
        color: '#333',
        fontSize: 18,
        fontWeight: 'bold'
    }
}

1.3. 设置标题位置

ECharts 支持多种标题位置，如顶部、中部、底部等。

title: {
    text: '示例标题',
    textStyle: {
        color: '#333',
        fontSize: 18,
        fontWeight: 'bold'
    },
    left: 'center',
    top: 'top'
}

二、添加图例

图例是图表中用于说明不同系列数据的信息。在 ECharts 中，添加图例同样简单。

2.1. 设置图例数据

legend: {
    data: ['系列1', '系列2']
}

2.2. 设置图例样式

与标题类似，图例也支持丰富的样式配置。

legend: {
    data: ['系列1', '系列2'],
    textStyle: {
        color: '#333',
        fontSize: 12
    }
}

2.3. 设置图例位置

ECharts 支持多种图例位置，如顶部、右侧、底部等。

legend: {
    data: ['系列1', '系列2'],
    textStyle: {
        color: '#333',
        fontSize: 12
    },
    right: 'right',
    bottom: 'bottom'
}

三、示例代码

以下是一个简单的示例，展示了如何使用 ECharts 添加标题与图例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: '示例标题',
                textStyle: {
                    color: '#333',
                    fontSize: 18,
                    fontWeight: 'bold'
                },
                left: 'center',
                top: 'top'
            },
            legend: {
                data: ['系列1', '系列2'],
                textStyle: {
                    color: '#333',
                    fontSize: 12
                },
                right: 'right',
                bottom: 'bottom'
            },
            xAxis: {
                type: 'category',
                data: ['A', 'B', 'C', 'D', 'E']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '系列1',
                type: 'line',
                data: [10, 20, 30, 40, 50]
            }, {
                name: '系列2',
                type: 'line',
                data: [20, 30, 40, 50, 60]
            }]
        };

        myChart.setOption(option);
    </script>
</body>
</html>

通过以上步骤，你可以在 ECharts 中轻松添加标题与图例，让你的图表更加清晰易懂。希望本文能对你有所帮助！

-- 展开阅读全文 --