正文

零基础学Echarts视频入门：从画第一张折线图到搞定动态交互图表的完整路径

/0 浏览量
0912

嘿，朋友！看到标题里的“零基础”三个字，你是不是既松了一口气，又隐隐有点担心？“我完全不懂代码，真的能学会吗？”、“视频看了会不会还是不会？”……别慌，深呼吸。今天我不是来给你灌鸡汤的，也不是来甩一堆枯燥文档让你背的。我是来带你玩的。

想象一下，Echarts就像是一个超级强大的“数据魔术师”。你只需要给它几张“卡片”（数据）和几句简单的“咒语”（配置代码），它就能变出炫酷的折线图、柱状图、地图，甚至还能动！

这篇指南，就是你和这位“魔术师”的第一次握手。我们不讲大道理，直接上手。我会把整个过程拆解成几个轻松的小关卡，你就像打游戏一样，一关一关过，最后你会发现：原来图表也没那么难，甚至有点好玩！

准备好了吗？让我们开始第一段旅程。

第一关：认识你的“魔术棒”——Echarts到底是什么？

在动手之前，我们先聊聊Echarts是啥。别被名字吓到，它其实就是一个JavaScript图表库。

什么叫“JavaScript图表库”？别急，我换个说法：

  • JavaScript：就是给网页“加特技”的语言。网页原本只是静止的HTML和CSS，加上JS，网页就能动、能响应点击了。
  • 图表库：就是一套现成的、别人帮你写好的“画图表的工具箱”。你不用从零开始写“怎么画一个圆圈”、“怎么画一条线”，你只需要告诉它：“我要画一个折线图，数据是这些”，它就帮你画好了。

Echarts（发音 /ˈɛtʃ tʃɑːrts/，有点像“爱图表”）是百度开源的一个项目，现在已经是Apache基金会的一个顶级项目了。它是目前中文互联网上最流行、文档最友好、功能最强大的图表库之一。

为什么选Echarts？

  1. 免费开源：随便用，不用花钱。
  2. 文档中文友好：官网是中文的，例子超全，新手非常友好。
  3. 图表类型超多：折线图、柱状图、饼图、散点图、雷达图、地图、热力图……几乎没有它画不了的。
  4. 交互性强：鼠标悬停显示详情、点击筛选数据、图表联动……这些炫酷效果，Echarts都内置支持。
  5. 社区庞大：遇到问题，一搜一大把答案。

你需要的前置知识

说实话，几乎为零。但为了让你真正理解，我会假设你是一点代码都不懂的。你只需要：

  1. 知道怎么用电脑。
  2. 会用文本编辑器（比如Windows的记事本，或者推荐安装VS Code，免费且强大）。
  3. 会保存文件、双击打开.html文件看效果。

敲黑板：不用安装任何复杂的开发环境！不用配Node.js！不用懂什么框架！就从一个简单的.html文件开始。

第二关：搭建你的第一个“画布”——创建HTML文件

一切开始于一个文件。

步骤1：创建项目文件夹

在你的电脑桌面上，新建一个文件夹，名字叫 my-first-echarts。

步骤2：创建HTML文件

在 my-first-echarts 文件夹里，新建一个文本文件，重命名为 index.html。

注意：一定要确保后缀是 .html，而不是 .html.txt。Windows系统可能会隐藏后缀名，你可以这样操作：

  • 打开“文件夹选项”
  • 切换到“查看”标签
  • 取消勾选“隐藏已知文件类型的扩展名”
  • 这样你就能看清并修改后缀了

步骤3：写入最基础的HTML骨架

用记事本或VS Code打开 index.html，粘贴以下代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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;
            margin: 50px auto; /* 居中显示 */
        }
    </style>
</head>
<body>
    <!-- 图表容器，Echarts会把图表渲染到这里 -->
    <div id="main"></div>

    <script>
        // 第三步：初始化Echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 第四步：配置项（稍后填充）
        var option = {
            // ... 配置代码 ...
        };

        // 第五步：使用配置项显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

代码解读（小白也能懂）

  • <!DOCTYPE html>：告诉浏览器“我是个现代网页”。
  • <html lang="zh-CN">：语言是简体中文。
  • <meta charset="UTF-8">：防止中文乱码，必写！
  • <script src="...">：这行是从网上加载Echarts库的代码。你不需要下载它，直接引用CDN（内容分发网络）就行，前提是你电脑要联网。
  • <div id="main">：这是图表的“画布”。你可以把它想象成一张白纸，Echarts会在这张白纸上画画。id="main" 是给这张纸起的名字，后面我们要用它来找到这张纸。
  • echarts.init(...)：意思是“我要用Echarts这个魔术师，在这张叫main的纸上开始工作”。
  • option = {...}：这是给魔术师下的“指令清单”。里面装着你想要什么样的图表、什么数据、什么颜色等等。
  • myChart.setOption(option)：意思是“把指令交给魔术师，让它开始画吧！”

现在，双击打开 index.html，浏览器会启动，但你会看到一个空白的页面。别慌！这很正常。因为我们还没给魔术师任何“指令”。接下来，我们就要填上这个 option。

第三关：画你的第一张图——折线图

折线图是最简单、也最常用的图表之一，适合展示数据随时间变化的趋势。

假设你想展示小明最近7天的身高（单位：厘米）：

日期 身高
周一 120
周二 120.5
周三 121
周四 121.2
周五 121.5
周六 121.8
周日 122

填充 option 配置项

回到 index.html，把 <script> 标签里的 option 部分替换成以下内容：

var option = {
    // 标题配置
    title: {
        text: '小明最近7天身高变化趋势'
    },
    // 提示框组件，鼠标悬停时显示详细信息
    tooltip: {
        trigger: 'axis' // 沿着坐标轴触发，会显示该点对应的所有系列信息
    },
    // 图例，显示在右上角，点击可以显示/隐藏某个系列
    legend: {
        data: ['身高']
    },
    // 直角坐标系网格配置（X轴和Y轴怎么放）
    xAxis: {
        type: 'category', // 类别轴，数据是文字（星期）
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
        type: 'value', // 数值轴，数据是数字（身高）
        min: 119,      // 设置Y轴起点，让波动更明显（可选）
        max: 123       // 设置Y轴终点（可选）
    },
    // 系列列表，每个系列通过 type 决定自己的图表类型
    series: [{
        name: '身高',
        type: 'line', // 折线图
        data: [120, 120.5, 121, 121.2, 121.5, 121.8, 122],
        // 折线样式
        smooth: true, // 平滑曲线，false是折线，true是曲线
        symbol: 'circle', // 数据点样式，circle是圆点
        symbolSize: 8,    // 圆点大小
        lineStyle: {
            width: 3,     // 线条粗细
            color: '#5470c6' // 线条颜色
        },
        itemStyle: {
            color: '#91cc75' // 数据点颜色
        },
        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)' }
            ])
        }
    }]
};

保存并刷新浏览器

按一下 Ctrl+S 保存，然后刷新浏览器页面（或者按 F5）。

哇！ 一个漂亮的、带平滑曲线、带区域填充、带数据点、鼠标悬停还有提示框的折线图就出现在你眼前了！

逐行解读（这次你肯定懂了）

  • title：图表的标题。你想放啥就放啥。
  • tooltip：鼠标悬停时的提示框。trigger: 'axis' 表示沿着坐标轴触发，这样鼠标靠近某条折线时，会显示该X轴位置的所有数据。
  • legend：右上角的图例。点击“身高”两个字，可以隐藏或显示这条折线。
  • xAxis：X轴配置。
    • type: 'category'：类别轴，也就是横轴是离散的、有名字的（周一、周二…）。
    • data: [...]：X轴上显示的具体标签。
  • yAxis：Y轴配置。
    • type: 'value'：数值轴，纵轴是连续的、可计算的数字。
    • min / max：可选，手动设置Y轴的显示范围，能让图表的波动看起来更明显（否则默认从0开始，看起来变化不大）。
  • series：系列列表，这是最核心的部分。
    • name: '身高'：这个系列的名字，会和图例对应。
    • type: 'line'：告诉Echarts“我要画折线图”。
    • data: [...]：具体的数值数据，顺序要和X轴的标签一一对应。
    • 样式配置：
      • smooth: true：画平滑曲线，默认是折线。
      • symbol / symbolSize：数据点（小圆点）的样式和大小。
      • lineStyle：线条的粗细和颜色。
      • itemStyle：数据点的颜色。
      • areaStyle：折线下方的填充样式。这里用了渐变，从上到下颜色由深变浅，看起来更有立体感。new echarts.graphic.LinearGradient(...) 是Echarts提供的一个创建渐变的工具，不用怕，直接用就行。

恭喜你！ 你已经完成了人生第一张Echarts图表。是不是比想象中简单得多？

第四关：换个花样——柱状图

折线图适合看趋势，柱状图适合比较不同类别之间的大小。

假设你想展示班级里喜欢不同运动项目的人数：

  • 篮球：30人
  • 足球：20人
  • 跑步：15人
  • 游泳：10人
  • 乒乓球：25人

修改 option

我们只需要改很少的部分：

var option = {
    title: {
        text: '班级同学喜爱运动项目统计'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow' // 鼠标悬停时显示阴影指示器
        }
    },
    legend: {
        data: ['人数']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true // 确保标签不会溢出容器
    },
    xAxis: {
        type: 'category',
        data: ['篮球', '足球', '跑步', '游泳', '乒乓球']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '人数',
        type: 'bar', // 关键！改成 'bar' 就是柱状图
        data: [30, 20, 15, 10, 25],
        // 柱状图特有样式
        itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
            ])
        },
        // 圆角柱子
        barMaxWidth: 50,
        // 柱子宽度可以统一设置
        barWidth: '60%'
    }]
};

关键变化解读

  • type: 'bar'：这就是柱状图。就这么简单，把 'line' 改成 'bar'。
  • tooltip.axisPointer.type: 'shadow'：柱状图鼠标悬停时，会显示一个阴影条，指向对应的柱子，体验更好。
  • grid：网格配置。containLabel: true 确保X轴的标签（篮球、足球…）不会被容器边缘切掉。
  • itemStyle.color：我们给柱子加了渐变色，从上到下由浅蓝变深蓝，更有质感。
  • barWidth：柱子宽度。可以用像素值（如 50），也可以用百分比（如 '60%'）。

刷新浏览器，看看效果。柱子是不是又高又漂亮？

第五关：再来一个——饼图

饼图适合展示各部分占整体的比例。

假设你想展示一周饮食结构的占比：

  • 早餐：20%
  • 午餐：35%
  • 晚餐：30%
  • 零食：15%

修改 option

饼图和前两个完全不同，它不需要X轴和Y轴。

var option = {
    title: {
        text: '一周饮食结构占比',
        subtext: '虚构数据',
        left: 'center' // 标题居中
    },
    tooltip: {
        trigger: 'item', // 饼图是item触发，不是axis
        formatter: '{a} <br/>{b} : {c} ({d}%)' // 格式化提示框内容
    },
    legend: {
        orient: 'vertical', // 图例垂直排列
        left: 'left'
    },
    series: [{
        name: '饮食占比',
        type: 'pie', // 关键！改成 'pie'
        radius: ['40%', '70%'], // 内半径和外半径，做成环形图！
        avoidLabelOverlap: false,
        itemStyle: {
            borderRadius: 10, // 圆角
            borderColor: '#fff', // 边框颜色
            borderWidth: 2 // 边框宽度
        },
        label: {
            show: true, // 显示标签
            formatter: '{b}: {c} ({d}%)' // 标签格式：名称: 数值 (百分比)
        },
        emphasis: {
            label: {
                show: true,
                fontSize: 16,
                fontWeight: 'bold'
            }
        },
        data: [
            { value: 20, name: '早餐' },
            { value: 35, name: '午餐' },
            { value: 30, name: '晚餐' },
            { value: 15, name: '零食' }
        ]
    }]
};

关键变化解读

  • type: 'pie'：饼图。
  • radius: ['40%', '70%']：这是环形图的关键！如果只写一个数值，比如 radius: '60%'，就是普通饼图。写两个数值，就是内半径和外半径，形成甜甜圈形状，看起来更现代。
  • tooltip.trigger: 'item'：饼图的提示框是点击或悬停某个扇区触发的，所以用 'item'。
  • tooltip.formatter：自定义提示框内容。{a} 是系列名，{b} 是数据名，{c} 是数据值，{d} 是百分比。
  • data 格式不同：饼图的数据是一个对象数组，每个对象有 value 和 name。
  • label：直接显示在扇区上的标签。show: true 表示显示。
  • itemStyle.borderRadius：给每个扇区加圆角，避免尖锐的边角，更美观。
-- 展开阅读全文 --