您现在的位置是：网站首页 > ECharts 中的柱状图与条形图应用文章详情

ECharts 中的柱状图与条形图应用

陈川【 ECharts 】 30070人已围观

在数据可视化领域，图表是展示和理解数据的重要工具。ECharts 是一款基于 JavaScript 的数据可视化库，提供了丰富的图表类型，其中柱状图（Bar Chart）和条形图（Column Chart）是两种非常常见且使用广泛的图表类型。它们在展示不同数据集之间的比较、趋势分析等方面具有显著优势。本文将深入探讨 ECharts 如何创建柱状图和条形图，并通过实例代码展示具体的应用场景。

柱状图与条形图的区别

柱状图和条形图在本质上是相似的，都用于比较不同类别的数值大小。然而，它们在显示方向上存在差异：

柱状图：垂直显示，每个柱子代表一个类别，高度表示该类别的数值大小。
条形图：水平显示，与柱状图类似，但其展示方式为水平排列，同样通过长度表示数值大小。

在实际应用中，选择使用柱状图还是条形图主要取决于数据的展示需求和阅读习惯。例如，如果数据集的类别较多，垂直显示可以更有效地利用空间；如果需要突出显示某个特定类别的详细信息，则水平显示可能更为直观。

创建柱状图与条形图的步骤

准备环境

首先，确保你的项目中引入了 ECharts 的 CDN 或者通过 npm 或 yarn 添加依赖。

<!-- 引入 ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>

基本配置

创建一个容器用于放置图表，并初始化 ECharts 实例。

// 初始化 ECharts 实例
let myChart = echarts.init(document.getElementById('main'));

// 配置选项
let option = {
  // 图表的基本配置项
};

定义数据

定义要展示的数据集，包括各个类别的名称和对应的数值。

let data = [
  {name: 'Category A', value: 120},
  {name: 'Category B', value: 180},
  {name: 'Category C', value: 150},
  // ... 其他数据点
];

创建柱状图或条形图

使用 option 对象设置图表的类型、数据源、系列等属性。对于柱状图和条形图，主要区别在于 type 属性的设置。

柱状图实例

option = {
  // ... 其他配置项
  series: [{
    type: 'bar', // 设置为柱状图
    data: data,
  }],
};

条形图实例

option = {
  // ... 其他配置项
  series: [{
    type: 'column', // 设置为条形图
    data: data,
  }],
};

绑定并渲染图表

最后，将配置好的选项绑定到 ECharts 实例，并进行渲染。

myChart.setOption(option);
myChart.resize(); // 自动调整图表尺寸以适应容器

示例代码

柱状图示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts 柱状图示例</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
    let myChart = echarts.init(document.getElementById('main'));

    let data = [
        {name: 'Category A', value: 120},
        {name: 'Category B', value: 180},
        {name: 'Category C', value: 150},
        {name: 'Category D', value: 200}
    ];

    let option = {
        title: {
            text: '柱状图示例'
        },
        tooltip: {},
        xAxis: {
            data: ['Category A', 'Category B', 'Category C', 'Category D']
        },
        yAxis: {},
        series: [{
            name: '数值',
            type: 'bar',
            data: data.map(item => item.value)
        }]
    };

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

条形图示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts 条形图示例</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
    let myChart = echarts.init(document.getElementById('main'));

    let data = [
        {name: 'Category A', value: 120},
        {name: 'Category B', value: 180},
        {name: 'Category C', value: 150},
        {name: 'Category D', value: 200}
    ];

    let option = {
        title: {
            text: '条形图示例'
        },
        tooltip: {},
        xAxis: {
            data: ['Category A', 'Category B', 'Category C', 'Category D']
        },
        yAxis: {},
        series: [{
            name: '数值',
            type: 'column',
            data: data.map(item => item.value)
        }]
    };

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

结语

通过上述示例，我们可以看到如何在 ECharts 中轻松创建柱状图和条形图，并根据实际需求灵活调整图表的样式和数据展示方式。无论是用于报告制作、数据分析还是用户界面设计，柱状图和条形图都是不可或缺的工具。熟练掌握 ECharts 的基础操作和特性，能够帮助我们更加高效地处理和呈现复杂的数据集。

我的名片

网名：川

职业：前端开发工程师

现居：四川省-成都市

邮箱：chuan@chenchuan.com

站点信息

建站时间：2017-10-06
网站程序：Koa+Vue
本站运行：
文章数量：
总访问量：
微信公众号：扫描二维码，关注我