正文

学会echarts，轻松制作可视化堆积图，数据呈现新高度

/0 浏览量
1017

在信息爆炸的今天，如何直观、有效地展示数据变得至关重要。ECharts 是一个使用 JavaScript 实现的开源可视化库，能够帮助开发者轻松实现丰富的图表，包括堆积图。堆积图是一种常用的图表类型，可以直观地展示数据的累积和变化趋势。以下是学习 ECharts 制作堆积图的详细步骤和技巧。

环境准备

在开始之前，你需要确保以下几点：

  1. 安装 Node.js 和 npm：Node.js 是 JavaScript 的运行环境，npm 是 Node.js 的包管理器。
  2. 创建 HTML 文件：新建一个 HTML 文件，用于引入 ECharts 库和展示图表。
  3. 引入 ECharts 库：你可以从 ECharts 官网下载最新版本的 ECharts 库，并在 HTML 文件中通过 <script> 标签引入。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ECharts 堆积图示例</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
</head>
<body>
    <!-- 准备一个用于放置图表的 DOM 元素 -->
    <div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>

数据准备

堆积图的数据结构通常如下所示：

var option = {
    title: {
        text: '堆叠的柱状图'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    xAxis: {
        data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
    },
    yAxis: {},
    series: [{
        name:'邮件营销',
        type:'bar',
        stack: '总量',
        data:[5, 20, 36, 10, 10, 20, 25, 20, 15, 25, 15, 20]
    }, {
        name:'联盟广告',
        type:'bar',
        stack: '总量',
        data:[10, 15, 13, 5, 7, 20, 25, 15, 10, 20, 25, 15]
    }, {
        name:'视频广告',
        type:'bar',
        stack: '总量',
        data:[20, 30, 40, 10, 10, 20, 25, 20, 15, 25, 15, 20]
    }, {
        name:'直接访问',
        type:'bar',
        stack: '总量',
        data:[30, 35, 45, 20, 20, 30, 35, 30, 25, 35, 25, 30]
    }, {
        name:'搜索引擎',
        type:'bar',
        stack: '总量',
        data:[10, 15, 25, 20, 25, 15, 20, 15, 20, 25, 15, 20]
    }]
};

在这个例子中，我们创建了一个包含四个系列（邮件营销、联盟广告、视频广告、直接访问和搜索引擎）的堆积图。

初始化图表

在 HTML 文件的 <body> 部分，添加以下代码来初始化图表：

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

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

颜色、标签和提示

为了使图表更加美观和易读，你可以对图表的颜色、标签和提示进行调整：

  • 颜色：你可以为每个系列设置不同的颜色。
  • 标签：调整标签的位置和样式。
  • 提示：自定义提示框的内容和格式。

例如，为每个系列设置颜色：

series: [{
    name: '邮件营销',
    type: 'bar',
    stack: '总量',
    color: '#f00',
    data: [5, 20, 36, 10, 10, 20, 25, 20, 15, 25, 15, 20]
}, {
    name: '联盟广告',
    type: 'bar',
    stack: '总量',
    color: '#0f0',
    data: [10, 15, 13, 5, 7, 20, 25, 15, 10, 20, 25, 15]
}, // ... 其他系列

通过以上步骤，你就可以使用 ECharts 创建一个简单的堆积图了。当然，ECharts 的功能远不止于此，还有更多高级功能和配置选项等待你去探索。不断实践和学习，相信你会制作出更多精美的图表。

-- 展开阅读全文 --