正文

如何用 ECharts 制作实用堆积图，轻松解析数据趋势与占比

/0 浏览量
1112

堆积图是一种在 ECharts 中常用的图表类型，它能够将多个数据系列堆积在一起，直观地展示数据系列之间的趋势和占比关系。下面，我将详细讲解如何使用 ECharts 制作实用的堆积图，并解析数据趋势与占比。

1. 准备工作

在开始制作堆积图之前，你需要确保以下几点：

  • 已安装 ECharts 库：你可以从 ECharts 官网下载 ECharts.js 文件，并将其引入到你的项目中。
  • 准备数据：堆积图需要多个数据系列，每个系列包含一系列数值。

2. 创建基础堆积图

下面是一个简单的堆积图示例，展示了三个数据系列在一段时间内的趋势和占比：

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var option = {
    title: {
        text: '基础堆积图'
    },
    tooltip: {},
    legend: {
        data:['系列1', '系列2', '系列3']
    },
    xAxis: {
        data: ["1月", "2月", "3月", "4月", "5月", "6月"]
    },
    yAxis: {},
    series: [
        {
            name: '系列1',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        },
        {
            name: '系列2',
            type: 'bar',
            stack: '总量',
            data: [10, 15, 25, 20, 25, 30]
        },
        {
            name: '系列3',
            type: 'bar',
            stack: '总量',
            data: [15, 10, 20, 15, 15, 25]
        }
    ]
};

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

在上面的代码中，我们首先引入了 ECharts 的主模块、柱状图模块、提示框和标题组件。然后，我们初始化了一个 ECharts 实例，并设置了图表的配置项和数据。最后，我们使用 setOption 方法将配置项和数据应用到图表实例上。

3. 添加交互效果

为了提高堆积图的实用性，我们可以添加一些交互效果，例如：

  • 鼠标悬停时显示提示框
  • 鼠标点击时切换数据系列

以下是如何添加鼠标悬停提示框的示例：

// 添加鼠标悬停提示框
myChart.on('mouseover', function (params) {
    if (params.componentType === 'series') {
        myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: params.seriesIndex
        });
    }
});

myChart.on('mouseout', function (params) {
    if (params.componentType === 'series') {
        myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: params.seriesIndex
        });
    }
});

在上面的代码中，我们监听了 mouseover 和 mouseout 事件，并在事件触发时调用 dispatchAction 方法来高亮或取消高亮对应的数据系列。

4. 解析数据趋势与占比

堆积图能够直观地展示数据系列之间的趋势和占比关系。以下是如何解析堆积图中的数据趋势与占比：

  • 趋势：观察每个数据系列随时间变化的趋势，可以发现哪些数据系列增长较快，哪些增长较慢。
  • 占比：观察每个数据系列在总量中所占的比例，可以发现哪些数据系列对总量贡献较大，哪些贡献较小。

通过以上方法，你可以轻松地使用 ECharts 制作实用的堆积图，并解析数据趋势与占比。

-- 展开阅读全文 --