正文

零基础学Echarts教程视频入门从安装配置到绘制第一个图表实战解决常见报错

/0 浏览量
0726

嘿，朋友！如果你正盯着屏幕上的空白网页发愁，或者刚下载了 ECharts 却不知道怎么让它动起来，那这篇内容就是为你准备的。别被那些复杂的术语吓到了，ECharts 其实就像是一个超级强大的乐高积木盒，只要找对说明书，哪怕你是第一次接触前端图表，也能拼出让人惊叹的作品。我们今天就抛开那些枯燥的理论，直接上手，从“怎么拿到它”到“怎么画出一个会动的饼图”，再到“为什么我的图是黑的”，一步步把路铺平。

第一步：先把“工具箱”拿在手里

很多人卡在第一步，是因为不知道去哪里找这个工具。ECharts 是百度开源的一个项目，现在由 Apache 基金会托管，这意味着它是免费、安全且社区活跃的。对于零基础的朋友，我有两个建议，选一个适合你的就行。

方法一：最简单的“懒人包”（推荐新手）

你不需要安装任何 Node.js 环境，也不需要配置 Webpack。你只需要一个 HTML 文件。去 ECharts 的官网（echarts.apache.org），点击“下载”，然后选择“下载最新版”。你会得到一个 zip 包，解压后里面有个 dist 文件夹，里面有个 echarts.min.js 文件。

把这个文件放在你的项目文件夹里。然后在你的 HTML 文件头部引入它：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个ECharts</title>
    <!-- 引入 ECharts 文件 -->
    <script src="./echarts.min.js"></script>
</head>
<body>
    <!-- 这里放图表 -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 接下来的代码写在这里
    </script>
</body>
</html>

你看，是不是很简单？这就是你的“工具箱”。那个 div 标签就是你要画图的“画布”，记得给它指定宽和高，否则 ECharts 不知道往哪儿画。

方法二：现代开发者的“专业包”（使用 npm）

如果你在用 Vue、React 或者打算构建大型应用，那么用命令行工具会更爽。打开终端（Terminal 或 CMD），进入你的项目文件夹，输入：

npm install echarts --save

然后在你的 JS 文件里这样引用：

import * as echarts from 'echarts';

这两种方式本质是一样的，只是加载资源的方式不同。对于初学者，我强烈建议先用第一种，直观，不折腾环境。

第二步：让图表“活”起来——绘制第一个柱状图

现在，画布有了，工具箱也有了。我们来看看怎么画出一个最简单的柱状图。很多教程上来就讲配置项参数，那样太抽象了。我们把画图想象成填表格。

ECharts 的核心逻辑只有三步：

  1. 初始化：告诉 ECharts 把图画在哪个 div 上。
  2. 准备数据：告诉 ECharts 横轴是什么，纵轴是什么，柱子多高。
  3. 设置配置：告诉 ECharts 长什么样（颜色、标题等）。

让我们写一段完整的代码，你可以直接复制到刚才那个 HTML 文件的 <script> 标签里：

// 1. 初始化 echarts 实例
// 这里的 'main' 对应上面 div 的 id
var myChart = echarts.init(document.getElementById('main'));

// 2. 指定配置项和数据
var option = {
    // 标题组件
    title: {
        text: '本周销售情况', // 图表的大标题
        subtext: '纯属虚构',   // 副标题
        left: 'center'       // 标题位置
    },
    // 提示框组件，鼠标悬停时显示详情
    tooltip: {},
    // 图例组件，用来控制显示哪些系列
    legend: {
        data: ['销量']
    },
    // X轴：通常用于类目（比如星期几）
    xAxis: {
        data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
    },
    // Y轴：数值轴
    yAxis: {},
    // 系列列表：这是核心，告诉 ECharts 具体画什么类型的图
    series: [{
        name: '销量', // 对应 legend 里的 data
        type: 'bar',  // 图表类型，这里是柱状图 (bar)，还有 line(折线), pie(饼) 等
        // 数据：对应 xAxis 的每个类目，数值代表高度
        data: [5, 20, 36, 10, 10, 20, 5]
    }]
};

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

保存 HTML 文件，双击打开浏览器。哇，一个漂亮的柱状图出现了！

这里有个小细节要教给你： 为什么 data: [5, 20...] 能对应上 ["周一", "周二"...]？因为它们是数组，顺序是一一对应的。第一个数 5 对应周一，第二个数 20 对应周二。这种“坐标对应法”是理解 ECharts 数据的关键。

第三步：换个口味，试试饼图

柱状图比较直男，有时候我们需要柔和一点的，比如饼图，用来展示占比。其实代码改动非常小，只需要改 series 里的 type 和 data 的结构。

看下面这段代码，替换掉上面的 option 变量部分：

var option = {
    title: {
        text: '用户访问来源',
        subtext: '模拟数据',
        left: 'center'
    },
    tooltip: {
        trigger: 'item', // 触发类型为项
        formatter: '{a} <br/>{b} : {c} ({d}%)' // 自定义提示内容格式
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',      // 注意这里变成了 pie
            radius: '50%',    // 饼图的半径，这里指内径和外径的比例
            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)' // 鼠标悬停时的阴影效果
                }
            }
        }
    ]
};

你会发现，饼图的 data 不再是简单的数字数组，而是一个对象数组 {value: xxx, name: 'xxx'}。这是因为饼图需要同时知道“数值是多少”和“这一块叫什么名字”。

给小朋友也能听懂的比喻： 柱状图就像是一排小朋友比身高，每个人站成一列，谁高谁就冒出来。 饼图就像是一块披萨，我们要切蛋糕，每一块都要标清楚是谁的那一份，以及这块有多大。

第四步：避坑指南——那些让你抓狂的常见报错

当你第一次运行时，很可能不会一帆风顺。别慌，90% 的新手都会遇到以下几个“坑”，我帮你把路障提前清除了。

1. “我的图表怎么是黑色的/灰色的？” 或者 “Uncaught ReferenceError: echarts is not defined”

  • 原因：这是最最常见的错误。意思是浏览器不认识 echarts 这个变量。
  • 排查：
    • 检查你的 <script src="./echarts.min.js"></script> 路径是否正确？文件真的放在那里了吗？文件名拼写对吗？（注意大小写，Linux 服务器区分大小写）。
    • 如果你是用 CDN 链接，检查网络是否通畅。
    • 确保在初始化之前，脚本已经加载完毕。把 init 代码放在引入 JS 之后。

2. “为什么图表显示不出来，或者是一片空白？”

  • 原因：画布没有尺寸。
  • 排查：回到 HTML 里的 <div id="main">。你必须给它设置 CSS 样式，明确指定 width 和 height。 
    
#main {
    width: 600px;
    height: 400px;
}
    如果不设宽高，默认是 0x0，ECharts 画了你也看不见。

3. “数据更新了，但图表没变？”

  • 原因：你可能以为修改了 JavaScript 变量，图表就会自动刷新。

  • 真相：ECharts 不是双向绑定的框架（像 Vue/React 那样）。当你改变数据后，必须手动调用 setOption 来告诉 ECharts “嘿，数据变了，重绘一下！”

    // 错误做法
myChart.options.series[0].data = [1, 2, 3]; 


// 正确做法
myChart.setOption({
    series: [{
        data: [1, 2, 3]
    }]
});

4. “中文显示为方块？”

  • 原因：编码问题。
  • 排查：确保你的 HTML 文件头部有 <meta charset="UTF-8">。同时，保存 HTML 文件时，也要用 UTF-8 编码保存。大多数现代编辑器（VS Code, Sublime Text）默认都是 UTF-8，如果你用的是记事本，记得另存为时选择编码。

第五步：进阶一点点——让图表更漂亮

默认的图表虽然能用，但有点“素”。我们可以加一点“化妆品”。比如，你想让柱状图的颜色是渐变的，或者想让线条更圆润。

ECharts 的配置项非常强大，支持丰富的视觉映射。比如，我们可以给柱状图加上渐变色彩：

series: [{
    name: '销量',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20, 5],
    itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' }, // 顶部颜色
            { offset: 0.5, color: '#188df0' }, // 中间颜色
            { offset: 1, color: '#188df0' }  // 底部颜色
        ])
    }
}]

你看，itemStyle 里面可以放很多东西，不仅仅是颜色。你还可以设置圆角 barBorderRadius，设置阴影 shadowBlur 等等。

一个小技巧：不要死记硬背所有配置项。ECharts 的官方文档有一个“示例中心”（gallery.echartsjs.com）。那里有成千上万个现成的例子。看到喜欢的效果，直接点进去看代码，复制过来，改改数据，就是你的了。这才是最高效的学习方式。

结语：开始你的创作之旅

到这里，你已经从零开始，掌握了 ECharts 的安装、基础图表绘制以及常见问题的解决。这只是一个开始。ECharts 还支持地图、3D 地球、关系图等高级功能，但万变不离其宗，核心逻辑永远是：初始化 -> 配置 Option -> 渲染。

不要害怕报错，每一个报错信息都是浏览器在帮你定位问题。试着去修改代码里的数字，看看图表会有什么变化；试着换一种图表类型，看看数据呈现有什么不同。

记住，编程和绘图一样，动手实践才是王道。现在，打开你的编辑器，新建一个 HTML 文件，把刚才的代码敲进去，运行起来。当你在浏览器里看到自己亲手制作的图表时，那种成就感，是任何教程都替代不了的。

如果在后续的学习中遇到更奇怪的问题，欢迎随时回来查阅，或者去 ECharts 的 GitHub Issues 区看看，那里有很多和你一样的新手留下的宝贵经验。祝你绘图愉快！

-- 展开阅读全文 --