ECharts数据可视化入门教程：用真实销售数据教你制作折线图柱状图饼图

嗨！很高兴你能在这里停下来。今天我们要聊的是一个非常实用的技能——用ECharts来做数据可视化。你可能会想，数据可视化是什么？别急，我给你举个例子。

想象一下，你是一家小商店的老板，每个月都会记录下了营业额、销售量、产品种类等等。这些数字躺在表格里，密密麻麻的，看起来是不是有点头疼？但是，如果你能把这些数据变成漂亮的图表，一眼就能看出哪个月卖得最好、哪种产品最受欢迎，那该多好啊！这就是数据可视化的魔力。

ECharts就是帮你实现这个魔力的工具，它是由百度开源的一个 JavaScript 可视化库，功能超级强大，而且使用简单。好了，废话不多说，我们直接开始吧！

准备工作：我们需要什么

在开始之前，我们先来看看需要准备的工具：

一台电脑（有浏览器就行）
一个代码编辑器（VS Code 是个不错的选择）
基本的 HTML 知识（就像你认识字母就能读文章一样）

如果你还没有准备，没关系，这篇文章会一步步带你做。我们首先创建一个 HTML 文件，然后引入 ECharts 的库。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ECharts 入门教程</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 800px; height: 400px;"></div>
    <script>
        // 这里我们会写代码
    </script>
</body>
</html>

你看，这很简单吧？我们只是引入了一个 ECharts 的库，然后创建了一个 div 容器，等会儿图表就会显示在这里面。

真实销售数据：我们用什么来画图？

为了让你更好地理解，我准备了一份模拟的”小商店”销售数据。这是过去半年的销售情况：

1月：销售额 15000 元，其中 A 产品卖了 5000 元，B 产品卖了 6000 元，C 产品卖了 4000 元
2月：销售额 18000 元，其中 A 产品卖了 6000 元，B 产品卖了 7000 元，C 产品卖了 5000 元
3月：销售额 22000 元，其中 A 产品卖了 7000 元，B 产品卖了 9000 元，C 产品卖了 6000 元
4月：销售额 20000 元，其中 A 产品卖了 6500 元，B 产品卖了 8500 元，C 产品卖了 5000 元
5月：销售额 25000 元，其中 A 产品卖了 8000 元，B 产品卖了 10000 元，C 产品卖了 7000 元
6月：销售额 28000 元，其中 A 产品卖了 9000 元，B 产品卖了 11000 元，C 产品卖了 8000 元

有了这份数据，我们就可以开始制作各种图表了！

折线图：看趋势，一眼就懂

折线图非常适合用来展示数据的变化趋势。我们先用折线图来展示过去半年的销售额变化。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>折线图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="lineChart" style="width: 800px; height: 400px;"></div>
    <script>
        // 初始化 ECharts 实例
        var chartDom = document.getElementById('lineChart');
        var myChart = echarts.init(chartDom);
        
        // 准备数据
        var months = ['1月', '2月', '3月', '4月', '5月', '6月'];
        var sales = [15000, 18000, 22000, 20000, 25000, 28000];
        
        // 配置选项
        var option = {
            title: {
                text: '过去半年销售额变化趋势',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: months
            },
            yAxis: {
                type: 'value',
                name: '销售额（元）'
            },
            series: [{
                data: sales,
                type: 'line',
                smooth: true,
                itemStyle: {
                    color: '#5470c6'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(84, 112, 198, 0.5)' },
                        { offset: 1, color: 'rgba(84, 112, 198, 0.1)' }
                    ])
                }
            }]
        };
        
        // 使用配置项显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

你看，我们创建了一个折线图，展示了销售额随时间的变化趋势。从图中可以清楚地看到，销售额总体呈上升趋势，虽然在4月有一点回落，但整体是增长的。

柱状图：比较大小，一目了然

柱状图适合用来比较不同类别之间的数据。我们用柱状图来展示6月份三种产品的销售额对比。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>柱状图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="barChart" style="width: 800px; height: 400px;"></div>
    <script>
        // 初始化 ECharts 实例
        var chartDom = document.getElementById('barChart');
        var myChart = echarts.init(chartDom);
        
        // 准备数据
        var products = ['A产品', 'B产品', 'C产品'];
        var sales = [9000, 11000, 8000];
        
        // 配置选项
        var option = {
            title: {
                text: '6月份各产品销售额对比',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: products
            },
            yAxis: {
                type: 'value',
                name: '销售额（元）'
            },
            series: [{
                data: sales,
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#91cc75' },
                        { offset: 1, color: '#5470c6' }
                    ])
                },
                label: {
                    show: true,
                    position: 'top',
                    formatter: function(params) {
                        return params.value + '元';
                    }
                }
            }]
        };
        
        // 使用配置项显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

这个柱状图展示了6月份三种产品的销售额对比。从图中可以清楚看到，B产品的销售额最高，达到了11000元，其次是A产品的9000元，C产品是8000元。柱状图让这种比较变得非常直观。

饼图：看占比，谁是大头一目了然

饼图适合用来展示各部分占总体的比例。我们用饼图来展示上半年总销售额中，三种产品各占多少比例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>饼图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="pieChart" style="width: 800px; height: 400px;"></div>
    <script>
        // 初始化 ECharts 实例
        var chartDom = document.getElementById('pieChart');
        var myChart = echarts.init(chartDom);
        
        // 计算三种产品的总销售额
        var productASales = 5000 + 6000 + 7000 + 6500 + 8000 + 9000; // 37500
        var productBSales = 6000 + 7000 + 9000 + 8500 + 10000 + 11000; // 51500
        var productCSales = 4000 + 5000 + 6000 + 5000 + 7000 + 8000; // 35000
        
        // 准备数据
        var data = [
            { value: productASales, name: 'A产品' },
            { value: productBSales, name: 'B产品' },
            { value: productCSales, name: 'C产品' }
        ];
        
        // 配置选项
        var option = {
            title: {
                text: '上半年各产品销售额占比',
                subtext: '总计 ' + (productASales + productBSales + productCSales) + ' 元',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c}元 ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '销售额',
                    type: 'pie',
                    radius: '50%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        
        // 使用配置项显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

这个饼图展示了上半年三种产品销售额的占比情况。你可以看到，B产品占了最大的份额，其次是A产品和C产品。饼图让这种比例关系变得非常直观。

进阶玩法：组合图表，信息量爆炸

学会了基本的图表之后，我们来玩点高级的——把折线图和柱状图组合在一起。比如，我们想在柱状图上显示每个月各产品的销售额，同时在折线图上显示总销售额的变化趋势。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>组合图表示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="comboChart" style="width: 900px; height: 500px;"></div>
    <script>
        // 初始化 ECharts 实例
        var chartDom = document.getElementById('comboChart');
        var myChart = echarts.init(chartDom);
        
        // 准备数据
        var months = ['1月', '2月', '3月', '4月', '5月', '6月'];
        var productA = [5000, 6000, 7000, 6500, 8000, 9000];
        var productB = [6000, 7000, 9000, 8500, 10000, 11000];
        var productC = [4000, 5000, 6000, 5000, 7000, 8000];
        var totalSales = [15000, 18000, 22000, 20000, 25000, 28000];
        
        // 配置选项
        var option = {
            title: {
                text: '上半年销售数据分析',
                subtext: '柱状图：各产品月销售额 | 折线图：总销售额趋势',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            legend: {
                data: ['A产品', 'B产品', 'C产品', '总销售额'],
                top: '10%'
            },
            xAxis: [
                {
                    type: 'category',
                    data: months,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '销售额（元）',
                    position: 'left'
                },
                {
                    type: 'value',
                    name: '总销售额（元）',
                    position: 'right'
                }
            ],
            series: [
                {
                    name: 'A产品',
                    type: 'bar',
                    data: productA,
                    itemStyle: {
                        color: '#5470c6'
                    }
                },
                {
                    name: 'B产品',
                    type: 'bar',
                    data: productB,
                    itemStyle: {
                        color: '#91cc75'
                    }
                },
                {
                    name: 'C产品',
                    type: 'bar',
                    data: productC,
                    itemStyle: {
                        color: '#fac858'
                    }
                },
                {
                    name: '总销售额',
                    type: 'line',
                    yAxisIndex: 1,
                    data: totalSales,
                    itemStyle: {
                        color: '#ee6666'
                    },
                    smooth: true,
                    lineStyle: {
                        width: 3
                    }
                }
            ]
        };
        
        // 使用配置项显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

这个组合图表展示了上半年各产品的月销售额（柱状图）和总销售额的变化趋势（折线图）。你可以一眼看出，虽然4月份总销售额略有下降，但各产品的销售额都在稳步增长。

让图表更漂亮：自定义样式

ECharts 提供了非常丰富的自定义选项，你可以让图表看起来更符合你的需求。下面是一个稍微美化过的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>美化柱状图示例</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="beautyChart" style="width: 800px; height: 400px;"></div>
    <script>
        // 初始化 ECharts 实例
        var chartDom = document.getElementById('beautyChart');
        var myChart = echarts.init(chartDom);
        
        // 准备数据
        var months = ['1月', '2月', '3月', '4月', '5月', '6月'];
        var sales = [15000, 18000, 22000, 20000, 25000, 28000];
        
        // 配置选项
        var option = {
            backgroundColor: '#f5f5f5',
            title: {
                text: '上半年销售额变化',
                left: 'center',
                textStyle: {
                    fontSize: 20,
                    fontWeight: 'bold',
                    color: '#333'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                backgroundColor: 'rgba(255, 255, 255, 0.9)',
                borderColor: '#ccc',
                borderWidth: 1,
                textStyle: {
                    color: '#333'
                },
                formatter: function(params) {
                    return params[0].name + '<br/>销售额: <b>' + params[0].value + ' 元</b>';
                }
            },
            xAxis: {
                type: 'category',
                data: months,
                axisLine: {
                    lineStyle: {
                        color: '#ccc'
                    }
                },
                axisLabel: {
                    color: '#666',
                    fontSize: 12
                }
            },
            yAxis: {
                type: 'value',
                name: '销售额（元）',
                nameTextStyle: {
                    color: '#666',
                    fontSize: 12
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    color: '#666',
                    fontSize: 12,
                    formatter: function(value) {
                        if (value >= 10000) {
                            return (value / 10000).toFixed(1) + '万';
                        }
                        return value;
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#e0e0e0',
                        type: 'dashed'
                    }
                }
            },
            series: [{
                name: '销售额',
                type: 'bar',
                data: sales,
                barWidth: '60%',
                itemStyle: {
                    borderRadius: [5, 5, 0, 0],
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },
                label: {
                    show: true,
                    position: 'top',
                    formatter: function(params) {
                        if (params.value >= 10000) {
                            return (params.value / 10000).toFixed(1) + '万';
                        }
                        return params.value;
                    },
                    textStyle: {
                        color: '#333',
                        fontSize: 12
                    }
                }
            }]
        };
        
        // 使用配置项显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

这个美化后的图表有几个亮点：

背景色是浅灰色，看起来更舒适
柱状图有渐变色效果，从浅蓝到深蓝
柱状图的顶部是圆角，看起来更柔和
纵坐标轴用”万”来表示大数字，更简洁
鼠标悬停时有更详细的提示信息

常见问题与解决方案

在学习 ECharts 的过程中，你可能会遇到一些问题。下面列出了一些常见问题及其解决方案：

问题1：图表不显示

如果你发现图表没有显示，首先要检查以下几点：

确认 ECharts 库是否正确引入

<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

确认容器有正确的宽度和高度

#main {
    width: 800px;
    height: 400px;
}

确认在 DOM 加载完成后才初始化图表

window.onload = function() {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    // ...
};

问题2：数据太长显示不全

如果你的数据项很多，可以考虑：

旋转 X 轴标签

xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
    axisLabel: {
        interval: 0,
        rotate: 30
    }
}

使用滚动条

dataZoom: [
    {
        type: 'inside',
        start: 0,
        end: 100
    },
    {
        start: 0,
        end: 100
    }
]

问题3：响应式调整

为了让图表在不同设备上都能正常显示，可以使用 ECharts 的响应式功能：

// 监听窗口大小变化
window.addEventListener('resize', function() {
    myChart.resize();
});

总结

今天我们一起学习了如何使用 ECharts 制作折线图、柱状图和饼图。我们使用了真实的销售数据作为示例，还学习了如何组合图表和美化图表。

记住，ECharts 的强大之处不仅在于它能制作各种图表，更在于它的灵活性和可定制性。你可以调整颜色、样式、动画效果等等，让它完全符合你的需求。

如果你对这些内容还不太熟悉，不要着急。多练习几遍，你就会越来越熟练。下次当你需要展示数据的时候，你就可以自信地说：”用 ECharts 画图，小菜一碟！”

正文

ECharts数据可视化入门教程文档：用真实销售数据教你制作折线图柱状图饼图

ECharts数据可视化入门教程：用真实销售数据教你制作折线图柱状图饼图

准备工作：我们需要什么

真实销售数据：我们用什么来画图？

折线图：看趋势，一眼就懂

柱状图：比较大小，一目了然

饼图：看占比，谁是大头一目了然

进阶玩法：组合图表，信息量爆炸

让图表更漂亮：自定义样式

常见问题与解决方案

问题1：图表不显示

问题2：数据太长显示不全

问题3：响应式调整

总结

相关阅读

股票投资必备：学会这份股票分析文档，轻松掌握投资技巧

门头设计：打造个性店铺，从创意门头开始

揭秘字节跳动飞书文档：高效团队协作的秘密武器，轻松管理项目与文件！

揭秘字节跳动内部竞聘攻略：如何轻松通关？

如何避免百度复制文字后Word文档格式错乱，轻松排版攻略

红米手机使用指南：轻松上手，快速掌握红米手机各项功能

揭秘朋友圈回忆录，打造你的独家记忆宝库

石墨文档助力企业、个人及教育行业高效协作与文档管理

揭秘石墨文档违规问题：如何避免违规操作，保护信息安全

遭遇石墨文档被覆盖，如何轻松找回丢失内容？掌握5招，确保数据安全！