正文

前端可视化入门从echarts图表教程文档到配置项详解轻松画出柱状图折线图饼图

/0 浏览量
1009

如果你刚开始接触前端数据可视化，面对密密麻麻的 ECharts 配置项文档，是不是有种“道理都懂，就是不会画”的挫败感？别急，其实 ECharts 没那么可怕。今天咱们不整那些虚头巴脑的理论，我就当你是坐在我对面的新手朋友，咱们边聊边敲代码，从最基础的三个图形——柱状图、折线图、饼图——开始，一步步拆解配置项，让你真正搞懂它背后的逻辑。

先说个误区：很多人一上来就死磕官方文档的 API 列表，结果被几百个配置项吓退了。其实，ECharts 的核心配置结构非常固定，就像搭积木一样，只要记住几个关键板块，剩下的都是微调。咱们先从环境搭建说起，然后每个图表类型都给一个完整的、可运行的 HTML 示例，最后我再带你细品那些最常用的配置项，保证你看完就能上手。

第一步：把 ECharts 装进你的网页

ECharts 是百度开源的一个纯 JavaScript 图表库，支持在浏览器中渲染各种图表。最简单的引入方式是使用 CDN，不用安装任何依赖，直接在 HTML 里加几行代码就行。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ECharts 入门练习</title>
    <!-- 引入 ECharts 主文件 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        /* 给图表容器一个明确的高度，这是新手容易忘的关键点！ */
        #main {
            width: 800px;
            height: 400px;
        }
    </style>
</head>
<body>
    <!-- 为 ECharts 准备一个 Dom，必须有宽和高 -->
    <div id="main"></div>
</body>
</html>

注意：容器必须有明确的宽度和高度，否则图表可能渲染不出来或者显示异常。这点很重要，我见过太多新手在这里栽跟头。

第二步：初始化 ECharts 实例

引入库之后，我们需要在 JavaScript 中获取 DOM 元素并初始化 ECharts 实例。这一步是固定的模板代码：

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

接下来，就是通过 setOption 方法传入配置项来绘制图表了。配置项是一个大的 JSON 对象，我们重点关注的有：title（标题）、tooltip（提示框）、legend（图例）、xAxis（X 轴）、yAxis（Y 轴）、series（数据系列）。

第三步：绘制第一个图表——柱状图

柱状图适合用于展示数据之间的对比关系。比如，我想展示某公司 2023 年五个季度的销售额，用柱状图再直观不过。

先看完整代码，然后我再逐项解释：

<!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>
    <style>
        #barChart { width: 800px; height: 400px; }
    </style>
</head>
<body>
    <div id="barChart"></div>
    <script>
        // 初始化实例
        var myChart = echarts.init(document.getElementById('barChart'));

        // 配置项
        var option = {
            // 标题配置
            title: {
                text: '某公司2023年季度销售额',
                left: 'center',
                textStyle: { fontSize: 18, fontWeight: 'bold' }
            },
            // 提示框组件，鼠标悬停时显示详情
            tooltip: {
                trigger: 'axis',
                axisPointer: { type: 'shadow' }
            },
            // 图例组件，展示不同系列的标识
            legend: {},
            // X 轴配置
            xAxis: {
                type: 'category',
                data: ['Q1', 'Q2', 'Q3', 'Q4', '全年总计'],
                axisLabel: { fontSize: 14 }
            },
            // Y 轴配置
            yAxis: {
                type: 'value',
                name: '销售额（万元）',
                nameTextStyle: { fontSize: 12 }
            },
            // 系列列表，每个系列通过 type 决定图表类型
            series: [{
                name: '销售额',
                type: 'bar',  // 柱状图
                data: [1200, 1500, 1800, 2000, 6500],
                // 柱子的样式配置
                itemStyle: {
                    color: '#5470c6'
                },
                // 数据标签，直接在柱子上显示数值
                label: {
                    show: true,
                    position: 'top'
                }
            }]
        };

        // 使用配置项绘制图表
        myChart.setOption(option);
    </script>
</body>
</html>

运行这段代码，你就能看到一个简洁美观的柱状图了。现在我来拆解几个关键点：

1. xAxis.type 和 yAxis.type 这是新手最需要理解的概念。type: 'category' 表示分类轴，数据是离散的类别（如 Q1、Q2 等）；type: 'value' 表示数值轴，用于连续的数据范围。如果你的 X 轴是时间、类别或名称，就用 category；如果是纯数值刻度，就用 value。

2. series.type 这一项决定了图表的类型。'bar' 是柱状图，'line' 是折线图，'pie' 是饼图，还有 'scatter'（散点）、' Radar'（雷达）等。你只需要修改这里，就能换一种图表形式。

3. tooltip.trigger 'axis' 表示当鼠标悬停在某个坐标轴上的点时，提示框会显示该轴上所有系列的数据；'item' 则只在鼠标悬停在单个数据点上时触发。柱状图和折线图通常用 'axis'，饼图用 'item'。

4. series.label.show 很多新手不知道柱子或点上面可以直接显示数值。只要设置 label: { show: true }，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>
    <style>
        #lineChart { width: 800px; height: 400px; }
    </style>
</head>
<body>
    <div id="lineChart"></div>
    <script>
        var myChart = echarts.init(document.getElementById('lineChart'));

        var option = {
            title: {
                text: '2019-2023年某公司年度利润趋势',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['净利润', '毛利率']
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,  // 折线图通常不设置边界空白
                data: ['2019', '2020', '2021', '2022', '2023']
            },
            yAxis: {
                type: 'value',
                name: '利润（万元）'
            },
            // 可以增加网格线，让图表更易读
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            series: [
                {
                    name: '净利润',
                    type: 'line',
                    smooth: true,  // 平滑曲线，默认为折线
                    data: [320, 332, 401, 454, 520],
                    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)' }
                        ])
                    }
                },
                {
                    name: '毛利率',
                    type: 'line',
                    smooth: true,
                    data: [20, 22, 25, 28, 32],
                    itemStyle: { color: '#91cc75' }
                }
            ]
        };

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

折线图和柱状图的区别主要在于 series.type: 'line'，以及 xAxis.boundaryGap: false——这意味着数据点会直接落在坐标轴上，而不是像柱状图那样有空隙。

这里我还加了一个很实用的配置：areaStyle，它可以给折线下方填充颜色渐变，让趋势的视觉冲击力更强。smooth: true 则让折线变得圆润，适合展示平滑的趋势。如果你想要尖锐的折线，把 smooth 去掉或者设为 false 即可。

第五步：绘制饼图——展示占比关系

饼图适合展示各部分占总体的比例。比如，我想展示公司不同产品线的营收占比：

<!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>
    <style>
        #pieChart { width: 800px; height: 400px; }
    </style>
</head>
<body>
    <div id="pieChart"></div>
    <script>
        var myChart = echarts.init(document.getElementById('pieChart'));

        var option = {
            title: {
                text: '公司产品线营收占比',
                subtext: '2023年度数据',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',  // 饼图用 item，因为每个扇区是独立项
                formatter: '{a} <br/>{b}: {c} ({d}%)'  // 自定义提示框内容
            },
            legend: {
                orient: 'vertical',  // 图例垂直排列
                left: 'left'
            },
            series: [{
                name: '营收占比',
                type: 'pie',
                radius: ['40%', '70%'],  // 饼图半径，可以做成环形图
                center: ['60%', '50%'],  // 饼图中心位置
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    formatter: '{b}: {d}%',
                    fontSize: 14
                },
                labelLine: {
                    show: true
                },
                // 数据格式：name 是类别名，value 是数值
                data: [
                    { value: 1048, name: '电子产品' },
                    { value: 735, name: '服装' },
                    { value: 580, name: '食品' },
                    { value: 484, name: '家居' },
                    { value: 300, name: '其他' }
                ]
            }]
        };

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

饼图有几个特别的配置点需要留意：

1. radius 数组 radius: ['40%', '70%'] 表示内半径和外半径，这样可以做出一个环形图（也叫甜甜圈图）。如果只想做普通饼图，可以写成 radius: '60%'，只有一个值时默认是外半径，内半径为 0。

2. tooltip.formatter 饼图的提示框默认只显示名称和数值，通过 formatter 你可以自定义显示的 HTML 内容。{a} 代表系列名，{b} 代表数据项名，{c} 代表数值，{d} 代表百分比。这个自定义功能非常强大，能让你展示更丰富的信息。

3. label.formatter 和 tooltip 类似，饼图扇区上的标签也可以通过 formatter 自定义，比如这里我只显示“类别: 百分比”，而不是默认的“类别: 数值”。

第六步：配置项通用结构总结

不管画什么图，ECharts 的配置项都遵循一个通用结构。我帮你整理了一个“地图”，以后你看文档就知道去哪找东西了：

var option = {
    // 1. 标题
    title: { text: '图表标题', left: 'center' },
    
    // 2. 提示框（鼠标悬停时显示的浮层）
    tooltip: { trigger: 'axis', formatter: '' },
    
    // 3. 图例（展示系列名称的开关）
    legend: { data: ['系列1', '系列2'] },
    
    // 4. 直角坐标系网格（控制图表区域大小）
    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
    
    // 5. X 轴（用于柱状图、折线图、散点图等）
    xAxis: { type: 'category', data: ['A', 'B', 'C'] },
    
    // 6. Y 轴
    yAxis: { type: 'value', name: '数值' },
    
    // 7. 系列列表（核心配置，决定图表类型和数据）
    series: [
        {
            name: '系列1',
            type: 'bar',  // 或 'line', 'pie', 'scatter' 等
            data: [10, 20, 30],
            itemStyle: { color: '#5470c6' },
            label: { show: true }
        }
    ]
};

记住这个结构，你去查官方文档时就能快速定位。比如你想修改柱子颜色，就去 series[].itemStyle.color；想修改 X 轴标签字体，就去 xAxis.axisLabel.fontSize。

第七步：一些实用技巧让图表更专业

当你能画出基本图表后，这些技巧能让你的图表看起来更专业：

1. 响应式处理 浏览器窗口大小改变时，图表应该自动调整。只需在窗口 resize 时调用 resize() 方法：

window.addEventListener('resize', function() {
    myChart.resize();
});

2. 主题切换 ECharts 内置了几套主题，如 'chalk'、'essos'、'infographic' 等。引入主题文件后，初始化时指定即可：

var myChart = echarts.init(document.getElementById('main'), 'essos');

3. 颜色配置 如果你不想手动设置每个系列的 itemStyle.color，可以全局设置调色板：

option.color = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];

ECharts 会自动从调色板中按顺序取色，避免你自己记颜色代码的麻烦。

4. 数据异步加载 在实际项目中，数据通常来自后端接口。你可以用 $.ajax 或 fetch 获取数据后再 setOption：

fetch('/api/sales-data')
    .then(response => response.json())
    .then(data => {
        myChart.setOption({
            xAxis: { data: data.categories },
            series: [{ data: data.values }]
        });
    });

第八步：常见坑点及解决方案

作为过来人，我帮你列举几个新手最容易踩的坑：

坑 1：图表不显示 99% 是因为容器没有设置高度。HTML 中 #main 的 height 必须显式指定，不能依赖默认值。

坑 2：X 轴标签重叠 如果分类太多，标签会挤在一起。解决方法：

  • 旋转标签：xAxis.axisLabel.rotate = 45
  • 间隔显示：xAxis.axisLabel.interval = 2（每隔 2 个显示一个）
  • 使用类目轴截断：xAxis.axisLabel.formatter: function(value) { return value.substring(0, 3) + '...'; }

**坑 3：饼图

-- 展开阅读全文 --