正文

如何用 ECharts 制作实用堆积图：轻松展示复杂数据，一看便懂！

/0 浏览量
0702

使用 ECharts 制作实用堆积图：轻松展示复杂数据，一看便懂！

一、简介

堆积图是一种常见的图表类型，主要用于展示多个系列数据的变化趋势和相互关系。ECharts 作为一款功能强大的前端可视化库，支持丰富的图表类型，其中堆积图可以直观地展示多维度数据的堆积效果。本文将详细讲解如何使用 ECharts 制作实用的堆积图。

二、准备工作

  1. 引入 ECharts：首先需要在 HTML 文件中引入 ECharts 库。 
    
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.2/echarts.min.js"></script>
  2. HTML 结构：为 ECharts 图表设置一个容器，通常使用 div 标签。 
    
<div id="main" style="width: 600px;height:400px;"></div>
  3. CSS 样式（可选）：根据需要为容器设置样式，例如宽度、高度等。

三、创建堆积图

  1. 定义图表类型：在 ECharts 初始化的 echarts.init() 方法中，指定图表类型为 'line'（折线图），然后使用 setOption() 方法设置图表的配置项和数据。

    var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
    title: {
        text: '堆积图示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'line',
        stack: '总量',
        data: [5, 20, 36, 10, 10, 20]
    }]
});

  2. 设置堆积图参数：

    • stack：指定数据的堆叠方式，默认为 'unstack'，表示不堆叠。
    • type：指定数据系列的图表类型，这里使用 'line' 表示折线图，其他可选类型包括 'bar'（柱状图）、'pie'（饼图）等。

  3. 设置数据：

    • xAxis.data：X 轴的标签，代表各个数据系列的分类。
    • series[0].data：第一个数据系列的数值，代表不同分类的销量。

四、个性化定制

  1. 修改图表颜色：通过修改 series[0].itemStyle.normal.color 可以自定义图表的颜色。

    series: [{
    name: '销量',
    type: 'line',
    stack: '总量',
    itemStyle: {
        normal: {
            color: '#f00' // 设置红色
        }
    },
    data: [5, 20, 36, 10, 10, 20]
}]

  2. 设置图例显示位置：通过修改 legend.bottom 和 legend.right 可以自定义图例的显示位置。

    legend: {
    data:['销量'],
    bottom: 'bottom', // 底部显示
    right: 'right' // 右侧显示
},

  3. 添加交互效果：使用 ECharts 的交互功能，如点击数据标签、图例等，获取详细信息。

    tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'cross'
    },
    formatter: function (params) {
        var result = params[0].seriesName + '<br/>' + params[0].name + ' : ' + params[0].value;
        params.forEach(function (item) {
            result += '<br/>' + item.seriesName + ' : ' + item.value;
        });
        return result;
    }
}

五、总结

使用 ECharts 制作堆积图可以帮助您轻松展示复杂数据，并通过个性化的定制使其更符合您的需求。希望本文对您有所帮助，祝您使用愉快！

-- 展开阅读全文 --