公司项目要用图表展示数据我自学Echarts一个月从0到上手分享最实用的视频教程入门指南手把手教你画柱状图饼图折线图让零基础也能看懂

上个月我们老板突然说要加个数据看板，我整个人都懵了——前端开发两年，除了会调调bootstrap的组件，图表这种东西我连碰都没碰过。那时候真是急得团团转，但一个月后，我不仅独立做出了三个报表页面，还顺手把团队其他同事都教会了。今天就把我踩过的坑、看过的资源、总结出来的套路，全部掏心窝子分享给你。

先说结论：Echarts是真的对新手友好，只要你不是那种”看文档像看天书”的性格，正常理解能力的人，一个礼拜就能上手画图表，一个月足够应付大部分业务场景。

第一个问题：该去哪里找视频教程？

说实话，现在网上教程多如牛毛，但质量参差不齐。我试了好几个，最后只留下这几个真正值得看的：

B站免费课（首选）

《Echarts五分钟上手系列》——作者讲得非常细，从安装到配置每一项都拆解得很清楚，适合完全零基础的人
《尚硅谷Echarts教程》——这个更全面，涵盖了地图、3D图表这些进阶内容，虽然篇幅长，但你可以当字典查
《Echarts从入门到实战》——偏项目实战，看完能让你知道怎么把图表套进实际业务里

付费课（可选）

慕课网上有几个好评率95%以上的课程，大概几十块钱，好处是有作业和答疑，适合那种”需要有人推一把”的人
我其实没买过付费课，因为B站的内容已经够用了，你要是时间紧、想系统学，可以试试

我的建议：先把B站那几个免费课的前三章看完，如果你还能坚持下来，再继续深入；如果觉得太枯燥，那说明你可能需要先补一下JavaScript基础。

入门前的准备：你真的需要懂什么？

很多人被劝退不是因为Echarts难，而是因为前置知识没补好。我来列一下你需要掌握的东西，按优先级排序：

必须会（不然你连demo都跑不起来）

懂一点HTML，知道<div>是什么
懂一点JavaScript，知道var/let/const、函数、对象怎么写
知道怎么在浏览器里打开一个.html文件
会用npm或者直接在网页里引入CDN（后面教你）

会了更好（不影响入门，但能让你少走弯路）

懂一点Promise和async/await（后面异步数据加载要用到）
知道一点DOM操作（手动更新图表数据时用）
了解一点Vue/React（我们公司项目用的是Vue，后面会结合着讲）

完全不需要

不用会Canvas（Echarts帮你封装好了）
不用懂数学（数据是你业务里的，不是要你算的）
不用精通CSS（图表样式配置里都给你写好了）

我自己的JavaScript水平其实也就中级，平时写写CRUD项目的那种，但学Echarts完全没问题。你要是前端小白，建议先花两天时间把上面”必须会”的东西过一遍，找个教程敲敲代码就行。

第一步：搭建你的第一个Echarts页面

别想得太复杂，我们直接从最简单的开始。新建一个文件夹，里面建一个index.html，然后复制下面这段代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个Echarts图表</title>
    <!-- 引入Echarts CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        #chart {
            width: 800px;
            height: 400px;
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <!-- 给Echarts准备一个容器 -->
    <div id="chart"></div>

    <script>
        // 初始化Echarts实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 配置项
        var option = {
            title: {
                text: '我的第一个图表'
            },
            xAxis: {
                type: 'category',
                data: ['一月', '二月', '三月', '四月', '五月']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70],
                type: 'bar'
            }]
        };

        // 把配置项给实例
        myChart.setOption(option);
    </script>
</body>
</html>

保存后双击打开，你会看到一张柱状图出现在浏览器里。就这么简单。

几个关键点解释一下：

echarts.init() 是初始化方法，告诉Echarts要把图表画到哪个DOM元素上
option 是核心，所有图表的配置都写在这里，后面我们大部分时间都在改这个对象
setOption() 是把配置应用到图表的方法

手把手教你画柱状图

柱状图是业务报表里最常用的图表之一，销量对比、月度统计、排名之类的场景基本都在用它。我们继续在上面代码的基础上改。

横向柱状图（适合标签比较长的场景）

var option = {
    title: {
        text: '各部门月度销售额',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
    },
    xAxis: {
        type: 'value',  // 数值轴在横向
        boundaryGap: [0, 0.01]
    },
    yAxis: {
        type: 'category',  // 类目轴在左边
        data: ['研发部', '市场部', '销售部', '运营部', '客服部']
    },
    series: [{
        name: '销售额（万元）',
        type: 'bar',
        data: [320, 302, 341, 354, 190],
        itemStyle: {
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
            ])
        },
        label: {
            show: true,
            position: 'right'
        }
    }]
};

柱状图+折线图的混合图（业务里经常要用）

var option = {
    title: { text: '月度销售与利润对比' },
    tooltip: { trigger: 'axis' },
    legend: { data: ['销售额', '利润'] },
    xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
    },
    yAxis: { type: 'value' },
    series: [
        {
            name: '销售额',
            type: 'bar',
            data: [820, 932, 901, 934, 1290, 1330],
            itemStyle: { color: '#5470c6' }
        },
        {
            name: '利润',
            type: 'line',
            data: [320, 432, 401, 434, 690, 730],
            itemStyle: { color: '#91cc75' },
            smooth: true  // 让折线更圆润
        }
    ]
};

柱状图常见配置技巧：

series: [{
    type: 'bar',
    // 柱子宽度控制
    barWidth: '60%',
    // 柱子圆角
    itemStyle: {
        borderRadius: [4, 4, 0, 0]
    },
    // 柱子渐变（更专业的效果）
    itemStyle: {
        color: function(params) {
            var colorList = ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'];
            return colorList[params.dataIndex];
        }
    },
    // 数据标签显示
    label: {
        show: true,
        position: 'top',
        formatter: '{c} 万元'  // 显示具体数值
    }
}]

手把手教你画饼图

饼图适合展示占比关系，比如”各渠道销售占比”、”用户来源分布”这类场景。

基础饼图

var option = {
    title: {
        text: '用户来源渠道分布',
        subtext: '本月数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)'  // b是名称，c是数值，d是百分比
    },
    legend: {
        orient: 'vertical',
        left: 'left'
    },
    series: [{
        name: '来源渠道',
        type: 'pie',
        radius: '50%',  // 饼图半径，可以改成 ['40%', '70%'] 做成环形
        data: [
            { value: 1048, name: '搜索引擎' },
            { value: 735, name: '直接访问' },
            { value: 580, name: '邮件营销' },
            { value: 484, name: '联盟广告' },
            { value: 300, name: '视频广告' }
        ],
        emphasis: {
            itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
        }
    }]
};

环形图（现在更流行这种，比实心饼图好看）

series: [{
    name: '访问来源',
    type: 'pie',
    radius: ['40%', '70%'],  // 内半径和外半径
    avoidLabelOverlap: false,
    itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
    },
    label: {
        show: true,
        formatter: '{b}\n{d}%',
        fontSize: 12
    },
    data: [
        { value: 1048, name: '搜索引擎', itemStyle: { color: '#5470c6' } },
        { value: 735, name: '直接访问', itemStyle: { color: '#91cc75' } },
        { value: 580, name: '邮件营销', itemStyle: { color: '#fac858' } },
        { value: 484, name: '联盟广告', itemStyle: { color: '#ee6666' } },
        { value: 300, name: '其他', itemStyle: { color: '#73c0de' } }
    ]
}]

饼图常见配置技巧：

// 让某一块扇区突出显示
data: [
    { value: 1048, name: '搜索引擎' },
    { value: 735, name: '直接访问', itemStyle: { emphasis: { itemStyle: { areaColor: '#ff6b6b' } } } }
]

// 控制文字显示位置
label: {
    position: 'outside',  // 放在饼图外面
    formatter: '{b}: {c} ({d}%)'
}

// 饼图中心显示汇总文字（中间带字的效果）
label: {
    show: true,
    formatter: function(params) {
        if (params.percent > 20) {
            return '{percentage|' + params.percent + '%}\n{name|' + params.name + '}';
        }
        return '';
    },
    rich: {
        percentage: { fontSize: 16, fontWeight: 'bold' },
        name: { fontSize: 12 }
    }
}

手把手教你画折线图

折线图适合展示趋势，比如”近半年用户增长趋势”、”股价走势”这类数据。

基础折线图

var option = {
    title: { text: '近7日网站访问量' },
    tooltip: { trigger: 'axis' },
    legend: { data: ['访问量', '新增用户'] },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '访问量',
            type: 'line',
            smooth: true,
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            itemStyle: { color: '#5470c6' },
            areaStyle: {
                opacity: 0.1
            }
        },
        {
            name: '新增用户',
            type: 'line',
            smooth: true,
            data: [320, 432, 401, 434, 690, 730, 820],
            itemStyle: { color: '#91cc75' },
            areaStyle: {
                opacity: 0.1
            }
        }
    ]
};

动态更新数据的折线图（业务里经常需要实时刷新）

var myChart = echarts.init(document.getElementById('chart'));

var data = [];
var now = new Date();
var oneDay = 24 * 3600 * 1000;

// 初始化一些模拟数据
for (var i = 0; i < 100; i++) {
    data.push({
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            Math.round((Math.random() - 0.5) * 20 + data[i - 1]?.value[1] ?? 10)
        ]
    });
    now = new Date(now - oneDay);
}
data.reverse();

var option = {
    title: { text: '实时数据更新' },
    tooltip: {
        trigger: 'axis',
        formatter: function(params) {
            return params[0].axisValueLabel + '<br/>' +
                   params[0].marker + params[0].seriesName + ': ' + params[0].value[1];
        }
    },
    xAxis: {
        type: 'category',
        data: data.map(function(item) { return item.value[0]; })
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%']
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        smooth: true,
        data: data.map(function(item) { return item.value[1]; }),
        areaStyle: {}
    }]
};

myChart.setOption(option);

// 模拟实时数据更新（每秒更新一次）
setInterval(function() {
    var lastValue = data[data.length - 1].value[1];
    var newValue = lastValue + Math.round((Math.random() - 0.5) * 10);
    var now = new Date();
    
    data.shift();
    data.push({
        name: now.toString(),
        value: [
            [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'),
            newValue
        ]
    });
    
    myChart.setOption({
        xAxis: { data: data.map(function(item) { return item.value[0]; }) },
        series: [{ data: data.map(function(item) { return item.value[1]; }) }]
    });
}, 1000);

折线图常见配置技巧：

series: [{
    type: 'line',
    // 显示拐点
    symbol: 'circle',
    symbolSize: 8,
    // 平滑曲线
    smooth: true,
    // 多条线不同颜色
    itemStyle: { color: '#5470c6' },
    // 区域填充
    areaStyle: {
        opacity: 0.2
    },
    // 堆叠折线（多条线堆在一起）
    stack: 'total',
    // 断点处理
    connectNulls: true,
    // 标记点（最高点、最低点）
    markPoint: {
        data: [
            { type: 'max', name: '最大值' },
            { type: 'min', name: '最小值' }
        ]
    },
    // 标记线（平均值线）
    markLine: {
        data: [
            { type: 'average', name: '平均值' }
        ]
    }
}]

从零基础到能干活，我给自己定的学习计划

说实话，教程看再多，不如自己动手画几个。下面把我当时给自己定的计划贴给你，照着做，一个月应该能搞定：

第一周：熟悉+模仿

安装Echarts，跑通Hello World
照着官方文档的案例，逐个把柱状图、饼图、折线图画一遍
每个图表改几个配置项，看看效果变化
这一步不要急着理解原理，先混个脸熟

第二周：配置项研究

打开官方文档的配置项手册，从头到尾过一遍
重点理解：xAxis、yAxis、series、tooltip、legend 这几个核心配置
尝试自己组合配置，做出一些稍微复杂的图表
遇到不懂的配置项，去问ChatGPT或者搜博客

第三周：结合实际数据

拿一些真实数据来练手（网上找或者用自己的业务数据）
尝试把多个图表放在一个页面里
学习用axios或fetch从接口获取数据，然后渲染图表
这一步比较关键，因为你以后工作里用的都是真实数据

第四周：项目实战

找一个完整的数据看板项目，从头到尾自己做一遍
学习响应式处理（窗口缩放时图表自适应）
学习图表之间的联动（点击一个图，另一个图跟着变化）
把这段经历写进简历，面试的时候能拿出作品来说

常见坑和一些实用建议

坑1：图表容器没有设置宽高 这是新手最容易踩的坑。Echarts依赖容器的高度来计算图表大小，如果容器没有明确的高度，图表可能显示不出来或者高度为0。解决办法：给容器div设置明确的宽和高，或者用CSS确保父元素有高度。

坑2：数据格式不对 Echarts对数据格式要求比较严格。柱状图的data是一维数组，饼图的data是对象数组，折线图又是数组。格式不对图表直接报错或者不显示。

坑3：多次调用setOption覆盖了之前的配置 这是Echarts的一个特性，每次调用setOption都是合并而不是替换。如果你只想更新数据而不想改变配置，需要把配置单独抽出来，只更新series.data。

坑4：异步加载数据时图表空白 解决办法是在数据加载完成后，再调用init或者setOption。

几个实用建议：

善用浏览器的开发者工具——按F12看console报错，很多配置错误会直接提示你
多看官方示例——Echarts官网的示例库非常丰富，复制粘贴改一改就能用
配置项不要死记——记不住就去查文档，文档写得挺清楚的
颜色搭配别太花——业务报表的图表，颜色简洁大气比花哨更重要
学会用F12调试——Echarts支持在浏览器里动态修改配置并实时预览

写在最后

说实话，学Echarts这件事，最难的不是技术本身，而是”开始动手”这一步。我之前也是看了好多教程，感觉自己会了，但真让画一个图表还是不知道从哪里下手。后来我逼着自己先把第一个Hello World跑出来，后面就顺了。

你现在可能觉得配置项那么多，不知道从哪下手。我的建议是：先别管那么多，直接拿一个最简单的柱状图案例，把它跑起来，然后一个一个改配置项，看看效果。改着改着你就懂了。

如果有什么具体问题，可以在评论区留言，我看到都会回。祝大家早日上手，不再被数据看板难住！

正文

公司项目要用图表展示数据我自学Echarts一个月从0到上手分享最实用的视频教程入门指南手把手教你画柱状图饼图折线图让零基础也能看懂

公司项目要用图表展示数据我自学Echarts一个月从0到上手分享最实用的视频教程入门指南手把手教你画柱状图饼图折线图让零基础也能看懂

第一个问题：该去哪里找视频教程？

入门前的准备：你真的需要懂什么？

第一步：搭建你的第一个Echarts页面

手把手教你画柱状图

手把手教你画饼图

手把手教你画折线图

从零基础到能干活，我给自己定的学习计划

常见坑和一些实用建议

写在最后

相关阅读

揭秘风水入门：轻松学会居家布局，避开家居风水误区

破解风水奥秘：新手必看，快速入门指南，轻松布局家居风水，提升生活品质

曲笛昆曲初学者必备：轻松掌握曲笛演奏技巧，昆曲之美从入门开始体验

告别健身小白：轻松入门，告别枯燥力量训练攻略

新手必看！轻松掌握机车换挡技巧，安全驾驶无忧

新手必看！颜值与实力并存，轻松驾驭高颜值机车入门指南

新手学骑本田雅阁机车，这样挑图片更实用

新手如何选车？盘点最适合机车初学者的车型攻略

新手必看：全面解析机车价格，从入门级到豪华款，帮你选对心仪座驾

新手必看：如何挑选与保养真皮手帐，打造个性化记事本

公司项目要用图表展示数据 我自学Echarts一个月从0到上手 分享最实用的视频教程入门指南手把手教你画柱状图饼图折线图让零基础也能看懂

第一个问题：该去哪里找视频教程？

入门前的准备：你真的需要懂什么？

第一步：搭建你的第一个Echarts页面

手把手教你画柱状图

手把手教你画饼图

手把手教你画折线图

从零基础到能干活，我给自己定的学习计划

常见坑和一些实用建议

写在最后

相关阅读

揭秘风水入门：轻松学会居家布局，避开家居风水误区

破解风水奥秘：新手必看，快速入门指南，轻松布局家居风水，提升生活品质

曲笛昆曲初学者必备：轻松掌握曲笛演奏技巧，昆曲之美从入门开始体验

告别健身小白：轻松入门，告别枯燥力量训练攻略

新手必看！轻松掌握机车换挡技巧，安全驾驶无忧

新手必看！颜值与实力并存，轻松驾驭高颜值机车入门指南

新手学骑本田雅阁机车，这样挑图片更实用

新手如何选车？盘点最适合机车初学者的车型攻略

新手必看：全面解析机车价格，从入门级到豪华款，帮你选对心仪座驾

新手必看：如何挑选与保养真皮手帐，打造个性化记事本

公司项目要用图表展示数据我自学Echarts一个月从0到上手分享最实用的视频教程入门指南手把手教你画柱状图饼图折线图让零基础也能看懂