Git 分支与远程仓库（四）

本页对应 Git 分支与远程仓库，共 6 段视频，约 41 分钟。

学习目标

• 能够创建远程空仓库，使用 git remote add origin 关联本地仓库，并通过 git push -u origin master 完成首次推送且解释 origin 与 -u 的作用。
• 能够在本地完成新提交后使用 git push 推送已有分支，并能区分首次推送新分支与后续推送已有分支的命令差异。
• 能够使用 git clone 克隆远程仓库，使用 git branch -a 查看全部分支并切换到指定开发分支。
• 能够使用 git pull 拉取远端更新，验证本地与远端同步，并说明拉取不会覆盖本地已有修改。
• 能够生成 SSH 公钥、添加到远程平台、使用 ssh -T 测试连接，并通过 SSH 地址重新添加远程仓库后完成免密推送。
• 能够完成 ECharts 的引入、图表容器初始化及基础配置项设置，并成功渲染一个基础图表。

知识点

拉取解决什么问题

为什么需要： 远程仓库不是只用来“备份”的。多人协作时，你开发你的功能，我开发我的功能，同事可能已经把代码提交到远程，而你本地并不知道。如果一直只写本地、只推送，不同步，就容易在推送时发现本地和远程不一致。

怎么想： 拉取（git pull）的作用是：从远程仓库拉取代码并合并到本地，让本地代码和远程分支保持一致。转写稿里强调两个时机：每天开工前拉一次，以及每次推送前先拉一次，保证你推送前本地和远程是同步的。

怎么做： 在本地仓库中执行：

git pull

易错点： git pull 拉取的是“当前分支”对应的远程分支。你人在 dev 分支，远程改的是 master，直接 git pull 不一定能看到 master 的变化。转写稿的调试过程就是：远程在 master 改了 index.html 并提交；本地在 dev 下执行 git pull 后没变化；切回 master 再拉取，文件才更新。所以拉取前先确认分支。

拉取前先确认当前分支

为什么需要： 转写稿中演示拉取时，本地当前在 dev，远程修改发生在 master。如果不切分支，就会误以为“拉取没生效”。

怎么想： 先看当前分支，再决定拉哪个分支。常用：

git branch
git checkout master
git pull

怎么做： 如果当前不在目标分支，先切过去，再拉取。拉取后打开文件确认远程修改是否出现。

易错点： 不要只看“命令有没有报错”。转写稿里第一次拉取后打开文件发现没变，是因为分支不对；切到 master 后再 git pull，才看到 index.html 发生变化。关键步骤如下图所示：

在 Gitee 设置开源

为什么需要： 笔记明确提醒：如果要让其他人访问自己的仓库，需要设置为开源。否则别人拿到仓库 URL 也未必能访问。

怎么想： 先确认仓库里已经有内容，再到仓库首页进入管理设置。笔记里写得很清楚：仓库需要有内容才可以设置开源。

怎么做：

1. 打开仓库首页，点击管理；
2. 拉到页面底部，勾选对应的开源选项，然后保存；
3. 设置完成后，把仓库的 Gitee URL 地址发给其他小伙伴即可。

设置入口如下图所示：

易错点： 空仓库先设置开源可能不满足条件；另外，发给别人的是仓库 URL，不是本地路径。

拉取操作与调试过程

为什么需要： 拉取不是“覆盖本地”，而是把远程有、本地没有的更新合并下来。转写稿中远程修改并提交后，本地执行 git pull，终端提示 index.html 有增删变化，再打开文件才看到更新。

怎么想： 拉取前可以先看状态，避免把未提交修改和拉取混在一起：

git status
git pull

日常协作常见流程是：

git add .
git commit -m "本次修改说明"
git pull
git push

怎么做： 转写稿最后总结：工作中最常用的命令就是 git add .、git commit、git pull、git push。推送前先 pull，能减少本地与远程不一致。

易错点： 转写稿说“你自己写的代码，它不会给你删掉，只会把你没有、远程有的代码给你新增上”，但仍要先看清当前分支和文件状态。拉取后不要只看终端，打开对应文件确认内容。若拉取没变化，先检查：当前分支对不对、远程修改的是不是这个分支、是否已经提交到远程。

为什么需要配置 SSH

远程仓库可以用 HTTPS 地址操作，也可以用 SSH 地址操作。转写稿里反复出现一个实际问题：用 HTTPS 推送或克隆时，经常要输入用户名和密码；后面账号密码一换，又要重新输入，很麻烦。SSH 是一种网络协议，用于计算机之间的加密登录。配置好 SSH 公钥后，再对远程仓库进行操作，就不需要反复输入用户名和密码。

怎么想： 不要把“配置 SSH”理解成改 Git 的某个全局开关，它本质上是让本地电脑和 Gitee 之间建立一种可信的密钥认证关系。本地生成一对密钥，把“公钥”交给 Gitee，本地保留私钥。以后用 SSH 地址访问时，Gitee 通过公钥认出这台电脑。

怎么做： 按笔记里的四步走：生成公钥、查看并拷贝公钥、配置到 Gitee、测试激活。官方文档地址是：https://gitee.com/help/articles/4181 。

易错点： 配置 SSH 不等于以后所有地址都自动变成 SSH。推送时仍要确认远程地址是 git@gitee.com:... 这种 SSH 形式，而不是 https://...。另外，转写稿特别说明：配置完成后不再输入账号密码，和“之前输入过账号密码”没有关系，而是因为这次用的是 SSH 协议，并且公钥已经配置成功。

第一步：生成 SSH 公钥

为什么需要： 没有公钥，Gitee 无法识别这台电脑，也就无法用 SSH 免密操作。

怎么想： 生成命令只需要指定加密方式和一段注释。注释可以是任意名字，方便自己辨认，不是账号密码。

怎么做： 在 Git Bash 或终端中执行：

ssh-keygen -t ed25519 -C "任意名字"

笔记特别说明：以下命令执行的 git bash 或 终端 没有路径要求，在哪里打开都行。转写稿里的调试过程是：执行后连续出现三次询问，直接回车即可；看到一段类似密钥图形的提示，就说明公钥生成成功。默认保存在 ~/.ssh/ 下。

易错点： 不要把“任意名字”误写成必须和 Gitee 用户名完全一致；它只是注释。生成过程中不要乱改默认路径，除非你清楚后续查看命令也要跟着改。

第二步：查看并拷贝公钥

为什么需要： 生成的是密钥文件，Gitee 需要的是其中的公钥文本，所以要查看并复制出来。

怎么想： 公钥文件以 .pub 结尾，pub 就是 public，表示公共的。私钥不要外传，公钥可以配置到远端。

怎么做： 执行：

cat ~/.ssh/id_ed25519.pub

终端会输出一整行公钥内容，把它完整复制。转写稿提醒：复制时不要多带换行或多余回车。

易错点： 不要复制成没有 .pub 的私钥文件；不要把公钥内容截断；复制后先别急着关终端，下一步要粘贴到 Gitee。

第三步：配置公钥到 Gitee

为什么需要： 只有把本地公钥登记到远端，远端才能认可本地这台电脑。

怎么想： 这一步是在 Gitee 的账号设置里完成的，不是在本地仓库里敲 Git 命令。

怎么做： 打开笔记给出的地址：https://gitee.com/profile/sshkeys ，把刚才复制的公钥粘贴进去，填写一个标题，确认保存。转写稿中描述的位置是 Gitee 的“设置”里找到 SSH 公钥配置处，粘贴后提交。

易错点： 公钥要粘贴完整；标题只是备注；如果页面要求验证，按页面提示完成即可。不要把自己的私钥贴到任何网站。

第四步：测试激活

为什么需要： 配置完不代表一定可用，要验证本地和 Gitee 的 SSH 认证是否打通。

怎么想： 用测试命令连接 Gitee，第一次通常会询问是否继续连接，确认后看返回结果。

怎么做： 执行：

ssh -T git@gitee.com

转写稿中的调试细节是：第一次询问时输入 yes，要输全，不要只输 y；如果看到绿色的 success 一类提示，就表示配置成功。笔记中的成功提示截图如下：

易错点： 地址是 git@gitee.com，不是 HTTPS 地址；如果失败，先检查公钥是否完整配置、测试命令是否拼写正确。

通过 SSH 推送时的补充易错点

配置好 SSH 后，新建远程仓库时要选择 SSH 地址。转写稿中演示了本地仓库首次推送的流程：先 git remote add origin 仓库地址 给远程地址起别名 origin，再 git push -u origin master 推送主分支。若推送的是新分支，首次也要写 -u origin 分支名；后续普通提交只需 git push。

易错点： 如果本地仓库已经添加过 origin，再次执行 git remote add origin ... 会提示已存在。转写稿给出的处理方式是先删除别名再添加：

git remote remove origin

然后重新 git remote add origin 新地址。不要误以为 SSH 配置失败，很多时候只是 origin 别名冲突。

一、先明确“重新上传”要解决什么问题

为什么需要： 前面可能已经用 HTTPS 地址向远程仓库推送过代码，但 HTTPS 方式在推送时往往需要输入用户名和密码。现在 SSH 已经配置好了，就要把本地仓库与远程仓库的连接方式改成 SSH，避免反复输入账号密码。

怎么想： “重新上传”不是把本地项目删掉重来，也不是重新 git init，而是把本地仓库里记录的旧远程地址换掉，再重新推送。远程仓库可以新建一个空仓库；笔记里说“设置开源”不是必须的，按平台要求操作即可。转写里反复强调：新建远程仓库时，不要额外勾选初始化选项，否则远程仓库不是空的，后续推送容易冲突。

怎么做： 先确认本地仓库已经有提交记录；在远程平台新建空仓库；在仓库页面把地址切换成 SSH，复制 SSH 地址备用。

易错点： 不要复制成 HTTPS 地址；不要把“新建远程仓库”误做成“新建本地仓库”；远程仓库若被初始化出文件，就不是空仓库，推送时可能被拒绝。

二、删除旧的远程地址 origin

为什么需要： 本地仓库通常已经把远程地址命名为 origin。如果之前用 HTTPS 添加过 origin，现在再执行 git remote add origin ...，同名别名会冲突。转写中的调试现象是：再次添加同名 origin 会提示已经存在，所以要先删除旧地址。

怎么想： git remote remove origin 删除的是本地仓库里保存的“远程别名和地址”，不会删除远程平台上的仓库，也不会删除本地代码。删除后再添加 SSH 地址，相当于把连接方式换掉。

怎么做：

# 删除之前记录的地址
git remote remove origin

易错点： 命令是 git remote remove origin，不是删除远程仓库；如果当前没有 origin，执行删除可能报错，这时应先确认本地远程配置，不要慌。删除后要马上添加新地址，否则后续 push 找不到 origin。

三、添加 SSH 地址，并理解 origin 只是别名

为什么需要： 本地仓库需要知道“推送到哪里”。添加远程仓库就是建立本地仓库与远程仓库的连接。

怎么想： origin 只是远程地址的别名，习惯上都叫 origin，也可以换名字，但初学阶段不要改，避免命令对不上。转写里解释得很清楚：git remote add origin 地址 的作用是给远程仓库地址起别名 origin，后面推送时就不用写一长串地址。

怎么做：

# 添加SSH地址
git remote add origin 远程仓库SSH地址

添加成功后一般没有提示。转写里说“没有报错就是成功”。如果地址重复或别名已存在，会提示 origin already exists，这时回到上一步先删除再添加。

易错点： 复制 SSH 地址时不要多复制空格、换行；必须确认页面选的是 SSH，不是 HTTPS；SSH 地址依赖前面配置的公钥，没配置公钥不能正常使用。

四、首次推送：指定分支并建立关联

为什么需要： 第一次把某个本地分支推到远程时，需要告诉 Git 推到哪个远程、哪个分支，并用 -u 建立本地分支与远程分支的跟踪关系。建立后，后续才能直接 git push。

怎么想： 笔记里写的是“分支名”，实际执行时要换成你当前要推送的分支。转写里有一个关键调试过程：当时本地在 dev 分支，但准备推的是 master，所以先查看状态，确认工作区干净，再切回 master 后推送。不能人在 dev 分支却机械写 master。

怎么做：

# 本地某分支推送到远程，并建立关联（第一次）
git push -u origin 分支名
# 后续直接推送即可
git push

转写中首次推送 master 后，页面刷新可以看到代码，且本地会出现类似 origin/master 的远程跟踪标记，说明远程分支已经建立。推送成功后页面大致如下：

易错点： 分支名写错会推错分支；首次推送新分支仍要 git push -u origin 分支名；切换分支前先确认工作区状态，避免把未提交修改带到错误分支。

五、后续推送与常见排查

为什么需要： 远程地址和分支关联配置一次即可，后续日常开发只需要提交后推送。转写里说，第二次提交后直接 git push 就能把当前分支推到对应远程分支。

怎么想： 如果只是已有分支的新提交，直接 git push；如果是全新分支，仍要执行一次 git push -u origin 新分支名。推送前应确认当前分支是不是目标分支。

怎么做： 修改代码后依次提交并推送：

git add .
git commit -m "提交说明"
git push

易错点： 不要以为 git remote remove origin 会删远程仓库；如果推送失败，先检查 origin 是否已换成 SSH 地址、当前分支是否正确、远程仓库是否为空；如果提示 origin 已存在，就先 git remote remove origin，再 git remote add origin SSH地址，最后重新推送。

说明：本节笔记主题是“数据可视化及ECharts体验”，而转写稿内容为Git远程仓库创建、推送、克隆、拉取与SSH配置，二者主题不一致。为避免编造，以下教程正文严格依据本节笔记扩写，不把Git操作混入ECharts推导；转写稿中的同音字如“getE/Git”“remount/remote”“不ush/push”等属于另一主题，未纳入本节。

数据可视化是什么，为什么需要它

为什么需要： 笔记开篇给出定义：数据可视化主要旨在借助于图形化手段，清晰有效地传达与沟通信息。原始数据往往是一行行数字或表格，读者很难一眼看出差异、趋势和重点；图形化后，数据特点会更突出。

怎么想： 不要先把“可视化”理解成“画得好看”，而要先想清楚：这组数据要传达什么？是让读者比较大小、看分布，还是看变化？本节笔记强调的核心是“清晰有效地传达”，所以图形应服务于信息表达。

怎么做： 把数据转换为图形。笔记用下图说明数据特点更加突出：

易错点： 只追求图形炫酷，却忽略数据本身的特点；或者图形元素过多，反而让读者看不清重点。可视化不是装饰，而是信息沟通手段。

ECharts简介：它是什么、为什么选它

为什么需要： 当我们决定用图形化方式传达信息时，需要一个能落地到网页中的图表库。ECharts官网给出的定位是：一个基于JavaScript的开源可视化图表库。

怎么想： 选择图表库时，要看性能、兼容性、图表丰富度和定制能力。笔记列出ECharts的特点：性能好，流畅运行于PC和移动端；兼容主流浏览器；提供非常多的常用图表，且支持定制。

怎么做： 先建立整体认识。笔记展示了ECharts官网页面：

并特别提醒：首页的图形除了顶部已经渲染的部分，均使用ECharts完成。这说明ECharts不仅能画基础图表，也能支撑复杂页面中的图形展示。

易错点： 把ECharts当成“只需引入就自动出图”的工具。实际使用时仍需要准备容器、初始化实例、配置option并调用setOption。另一个易错点是忽略容器宽高，导致图表不可见。

快速上手：核心步骤与配置思路

为什么需要： 了解简介后，必须能生成基础图表。笔记给出的需求是：基于文档生成基础图表。文档示意图如下：

怎么想： 按“准备环境→准备容器→初始化实例→写配置项→渲染图表”的顺序推进。笔记把核心步骤分成两类：准备工作是下包+导包、准备定义了宽高的DOM容器；核心代码是初始化实例、指定配置项和数据、调用setOption显示图表。

怎么做： 先完成下包和导包，再在页面中准备一个带宽高的DOM容器。笔记代码中使用#main作为容器选择器。核心代码如下：

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

// 指定图表的配置项和数据
const option = {
  // 标题
  title: {
    // 标题的文本
    text: '商品销量'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '西蓝花']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 30, 36, 10, 10, 20, 66]
    }
  ]
}

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

这段代码中，echarts.init负责基于准备好的DOM初始化实例；option集中描述图表：title是标题，tooltip是提示框配置，legend是图例，xAxis是类目轴数据，yAxis是数值轴，series是系列数据，其中type: 'bar'表示柱状图，data与x轴类目一一对应。最后myChart.setOption(option)把配置交给实例渲染。

易错点： 第一，DOM容器没有宽高，图表可能不显示；第二，初始化时选择器写错或DOM尚未准备好；第三，series中的data与xAxis.data数量、顺序不对应，图形含义会错位；第四，忘记调用setOption，只写option不会自动显示。调试时可按“容器是否存在且宽高正常→初始化是否成功→option字段是否完整→setOption是否执行”的顺序排查。

本节说明与目标

本节要掌握的是 ECharts 的“配置项思维”：通过不同配置项的组合，拼出不同图表。笔记中的核心步骤只有两步：明确需求 → 查文档调整配置。需要说明的是，提供的转写稿实际讲的是 Git 远程仓库、克隆、拉取和 SSH 配置，与本节 ECharts 基础配置没有对应关系；为避免编造，下面只依据笔记中的配置项、代码和目标效果展开，不把 Git 内容硬套进 ECharts。

基础配置总览：先记骨架，再填细节

为什么需要：ECharts 的图表不是靠一个个 DOM 手写出来的，而是通过 option 描述“标题、图例、坐标轴、数据系列、颜色”等信息。先记住骨架，查文档时才知道该改哪一块。
怎么想：把 option 看成配置总表，先写空对象，再按需求逐项填。
怎么做：基础骨架如下：

const option = {
  // 标题
  title: {},
  // 图例
  legend: {},  // 绘图网络
  grid: {},
  // x轴
  xAxis: {},
  // y轴
  yAxis: {},
  // 提示框
  tooltip: {},
  // 系列图表
  series: [],
  // 颜色
  color: []
}

易错点：不要一上来背所有属性；先保证 series、xAxis、yAxis 能出图，再补 title、legend、tooltip 等增强项。

title 与 legend：标题和图例先对齐

为什么需要：标题告诉用户“这张图是什么”，图例用于切换系列显示/隐藏。
怎么想：标题用 title.text；图例的 data 要与 series.name 对应，否则图例无法正确显示。
怎么做：案例中写 title: { text: '食物售价' }，legend.data: ['价格']，同时 series[0].name 也设为 '价格'。
易错点：legend.data 和 series.name 不一致，是图例不显示的常见原因。

grid 与坐标轴：给图形留空间并组织类目

为什么需要：grid 控制绘图网格位置，xAxis、yAxis 组织类目和数值轴。
怎么想：左侧类目名较长时，用 grid.left 留空间；y 轴分割线可改成虚线提升可读性。
怎么做：案例中 grid.left: '20%'；xAxis.data 用 foodArr.map(v => v.name)；yAxis.splitLine.lineStyle.type: 'dashed'。
易错点：xAxis.data 与 series.data 顺序要一一对应，否则类目和数值会错位。

tooltip 与 series：交互和图形数据

为什么需要：tooltip 提供悬浮提示，series 决定图形类型和数据。
怎么想：柱状图用 type: 'bar'；希望按坐标轴整体提示时，用 trigger: 'axis'。
怎么做：tooltip: { trigger: 'axis' }；series: [{ name: '价格', type: 'bar', data: foodArr.map(v => v.price) }]。
易错点：series 是数组，不是对象；多个系列要放多个对象。

color 与完整案例：按需求查文档改配置

为什么需要：默认配色不一定符合设计，color 可统一调色盘。
怎么想：先明确目标效果，再查文档找对应配置项，最后逐项替换。
怎么做：案例设置 color: ['#86cce9']，并把前面的配置组合起来。目标效果如下：

完整代码如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #main {
      border: 1px solid #000;
    }
  </style>
  <title>Document</title>
</head>

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 800px;height:600px;"></div>
  <!-- 下包+导包 -->
  <script src="./lib/echarts.min.js"></script>
  <script>
    // 食物数据
    const foodArr = [
      { name: '西兰花', price: 150 },
      { name: '西瓜', price: 230 },
      { name: '西葫芦', price: 224 },
      { name: '西北风', price: 34 },
      { name: '西红柿', price: 135 },
      { name: '西芹', price: 147 },
      { name: '西洋菜', price: 260 },
    ]

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

    // 指定图表的配置项和数据
    const option = {
      // 标题组件
      title: {
        // 主标题文本
        text: '食物售价'
      },
      // 图例组件，可以用来切换图形的显示和隐藏
      legend: {
        // 离右侧的距离
        right: '5%',
        // 数据数组，修改内容，需要和series中的name属性对应，否则无法显示
        data: ['价格']
      },
      // 绘图网格
      grid: {
        // 离左侧容器的距离，默认10%
        left: '20%'
      },
      // 直角坐标系 grid 中的 x 轴
      xAxis: {
        // 类目数据
        data: foodArr.map(v => v.name)
        // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '西蓝花']
      },
      // 直角坐标系 grid 中的 y 轴
      yAxis: {
        // y轴的分割线
        splitLine: {
          // 分割线的样式
          lineStyle: {
            // 分割线的类型
            //  dashed 虚线，默认是solid 实线
            type: 'dashed'
          }
        }
      },
      // 提示框组件
      tooltip: {
        // 触发方式，默认图形
        trigger: 'axis'
      },
      // 系列列表（设置不同的图形）
      series: [
        {
          // 系列名称，tooltip,legend都会用到
          name: '价格',
          // 柱状图
          type: 'bar',
          // 系列的数据
          data: foodArr.map(v => v.price)
          // data: [5, 30, 36, 10, 10, 20, 66]
        }
      ],
      // 调色盘颜色列表
      color: ['#86cce9']
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  </script>
</body>

</html>

易错点：DOM 容器必须有宽高；echarts.init 要在 DOM 准备好后执行；改配置后调用 setOption 才生效。

课件图示

代码示例

示例一：ECharts 快速上手（基础柱状图）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ECharts 快速上手</title>
</head>

<body>
  <!-- 准备工作1：准备一个定义了宽高的 DOM 容器 -->
  <div id="main" style="width: 800px;height:600px;"></div>

  <!-- 准备工作2：下包+导包（需先把 echarts.min.js 放到 lib 目录下） -->
  <script src="./lib/echarts.min.js"></script>
  <script>
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.querySelector('#main'))

    // 指定图表的配置项和数据
    const option = {
      // 标题
      title: {
        // 标题的文本
        text: '商品销量'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '西蓝花']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 30, 36, 10, 10, 20, 66]
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  </script>
</body>

</html>

要点解释 / 易错点

• echarts.init(document.querySelector('#main')) 的参数必须是已经渲染出来、且写了宽高的 DOM，容器没宽高图表会显示不出来。
• series 里每一项的 name 要和 legend.data 中的内容一致，否则图例显示不出来、也无法切换显隐。
• xAxis.data 的类目个数要与 series.data 的数值个数对应，缺项会错位。
• 固定套路只有三步：下包+导包 → 准备有宽高的 dom → init + setOption，任何图表都是这个流程。

---

示例二：ECharts 基础配置（食物售价柱状图）

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    #main {
      border: 1px solid #000;
    }
  </style>
  <title>Document</title>
</head>

<body>
  <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
  <div id="main" style="width: 800px;height:600px;"></div>
  <!-- 下包+导包 -->
  <script src="./lib/echarts.min.js"></script>
  <script>
    // 食物数据
    const foodArr = [
      { name: '西兰花', price: 150 },
      { name: '西瓜', price: 230 },
      { name: '西葫芦', price: 224 },
      { name: '西北风', price: 34 },
      { name: '西红柿', price: 135 },
      { name: '西芹', price: 147 },
      { name: '西洋菜', price: 260 },
    ]

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

    // 指定图表的配置项和数据
    const option = {
      // 标题组件
      title: {
        // 主标题文本
        text: '食物售价'
      },
      // 图例组件，可以用来切换图形的显示和隐藏
      legend: {
        // 离右侧的距离
        right: '5%',
        // 数据数组，修改内容，需要和series中的name属性对应，否则无法显示
        data: ['价格']
      },
      // 绘图网格
      grid: {
        // 离左侧容器的距离，默认10%
        left: '20%'
      },
      // 直角坐标系 grid 中的 x 轴
      xAxis: {
        // 类目数据
        data: foodArr.map(v => v.name)
      },
      // 直角坐标系 grid 中的 y 轴
      yAxis: {
        // y轴的分割线
        splitLine: {
          // 分割线的样式
          lineStyle: {
            // 分割线的类型
            //  dashed 虚线，默认是solid 实线
            type: 'dashed'
          }
        }
      },
      // 提示框组件
      tooltip: {
        // 触发方式，默认图形
        trigger: 'axis'
      },
      // 系列列表（设置不同的图形）
      series: [
        {
          // 系列名称，tooltip,legend都会用到
          name: '价格',
          // 柱状图
          type: 'bar',
          // 系列的数据
          data: foodArr.map(v => v.price)
        }
      ],
      // 调色盘颜色列表
      color: ['#86cce9']
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  </script>
</body>

</html>

要点解释 / 易错点

• legend.data: ['价格'] 必须与 series[0].name: '价格' 一模一样，写错一个字图例就不显示。
• tooltip.trigger: 'axis' 是"按坐标轴触发"，鼠标移到整条柱子的竖线区域都会提示；默认是 'item'，只精确到图形。
• grid.left: '20%' 调大是为了给左侧 y 轴文字留空间，不调会被柱子压住或文字被裁掉。
• yAxis.splitLine.lineStyle.type: 'dashed' 只影响 y 轴分割线，x 轴分割线在 xAxis.splitLine 里配置。
• 用 foodArr.map(v => v.name) / .map(v => v.price) 从同一份数据取两个数组，比手写两遍更不容易对不上。

---

示例三：配置 SSH 并重新上传本地仓库

# 1. 生成 SSH 公钥（git bash 或终端，任意路径打开都行）
ssh-keygen -t ed25519 -C "任意名字"

# 2. 查看并拷贝公钥（复制输出的全部内容）
cat ~/.ssh/id_ed25519.pub

# 3. 把公钥粘贴到 gitee 的「设置 → SSH 公钥」并保存

# 4. 测试激活
ssh -T git@gitee.com

# 5. 删除之前记录的远程地址（原来用 HTTPS 时加过 origin）
git remote remove origin

# 6. 添加远程仓库（这次用 SSH 地址）
git remote add origin 远程仓库SSH地址

# 7. 推送到远程仓库
git push -u origin 分支名   # 第一次：推送并建立关联
git push                    # 后续：直接推送

要点解释 / 易错点

• ssh-keygen 生成过程中连按三次回车即可，公钥默认存在 ~/.ssh/id_ed25519.pub，一般不改路径。
• cat 出来的公钥整段复制，别多带换行/回车，多了会配置失败。
• ssh -T git@gitee.com 第一次会问 yes/no，必须输入完整的 yes，输 y 不生效；看到 success 才算配置成功。
• origin 是别名，不能重复添加：已经 add 过再 add 会报 remote origin already exists，必须先 git remote remove origin 再 add。
• -u 只在第一次推送该分支时需要（建立本地分支与远程分支的关联），之后直接 git push 即可；推送新分支时仍要写 git push -u origin 分支名。
• 用 SSH 地址推送时不会再提示输入用户名密码，这就是配置 SSH 的意义。

常见错误

1. 现象： 执行 git remote add origin ... 报 remote origin already exists。
   原因： 当前本地仓库已经添加过名为 origin 的远程地址。
   修法： 先 git remote remove origin 再重新添加；或直接 git remote set-url origin 新地址。

2. 现象： 新分支执行 git push 提示 no upstream branch。
   原因： 该分支首次推送时未建立本地与远程分支关联。
   修法： 首次使用 git push -u origin 分支名，后续再直接 git push。

3. 现象： git pull 时出现冲突，或担心本地修改被覆盖。
   原因： 本地与远端修改了同一文件，工作区不干净就拉取。
   修法： 先 git status 确认状态；先提交或 git stash，再 git pull，解决冲突后提交。

4. 现象： 配置 SSH 后仍然提示输入密码，或 Permission denied (publickey)。
   原因： 公钥未完整配置到平台、未测试成功，或远程地址仍是 HTTPS。
   修法： 重新 cat ~/.ssh/id_ed25519.pub 完整复制公钥；执行 ssh -T git@gitee.com 验证；用 git remote set-url origin SSH地址 改为 SSH。

5. 现象： 执行 git remote、git push 报 not a git repository。
   原因： 终端所在目录不是 Git 仓库根目录，或尚未初始化仓库。
   修法： cd 进入项目根目录，先 git status 确认；需要时执行 git init。

6. 现象： 拉取后目标分支代码没有更新。
   原因： 当前所在分支不是要拉取的分支。
   修法： git branch -a 查看分支，git checkout 目标分支 后再 git pull。

7. 现象： ECharts 图表区域空白。
   原因： 容器没有宽高，或初始化时 DOM 尚未准备好。
   修法： 给容器设置明确宽高；脚本放在容器之后，或等待 DOM 加载完成再 echarts.init。

8. 现象： 图例不显示或与图形名称不一致。
   原因： legend.data 与 series.name 不一致。
   修法： 统一 legend.data 和 series[].name 的文本。

练习

1. 新建一个远程空仓库，把本地 master 分支首次推送上去并建立关联；写出完整命令顺序，并说明第二次提交后只需执行什么。
2. 当前 origin 指向 HTTPS 地址，请将其改为 SSH 地址，并写出验证 SSH 是否配置成功的命令。
3. 模拟场景：同事已更新远端 master，你本地也有未提交修改。写出一次安全拉取的操作流程。
4. 使用给定 foodArr 数据，写出 ECharts 柱状图配置中需要调整的关键项：标题、图例、坐标轴、提示框、系列名称与数据、颜色。
5. 执行 git push 后提示当前分支没有 upstream，请写出修复命令，并说明后续推送方式。

原视频对照

#	视频	时长
1	远程仓库创建及推送	10:12
2	远程仓库多次提交	06:02
3	克隆仓库	06:30
4	拉取远端仓库内容	05:52
5	配置ssh	06:01
6	通过ssh再次上传本地仓库	06:45

小结

1. 远程操作前先确认三件事：当前目录是否为 Git 仓库、当前分支是否正确、远程地址是否为目标仓库。
2. 首次推送新分支要建立关联，后续推送才可以直接使用简写命令。
3. origin 只是远程地址别名，可删除、可重设，不必被名字限制。
4. 推送前和开工前先拉取，能显著减少本地与远端不一致带来的冲突。
5. SSH 配置属于一次配置长期受益，但必须保证公钥完整、地址协议匹配、测试通过。
6. ECharts 出图的核心检查点是：容器宽高、初始化时机、setOption 配置项对应关系。
7. 图例、系列、坐标轴等配置要保证名称和数据源一致，否则容易出现“有图无图例”或数据错位。
8. 遇到 Git 报错先看提示中的关键词，再按“目录→分支→远程地址→关联关系”顺序排查。