vue3 d3.js个人笔记呆更新

最新推荐文章于 2025-10-14 17:44:49 发布
原创 最新推荐文章于 2025-10-14 17:44:49 发布 · 1.1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用D3库构建的力导向图，展示了一种人物关系数据的可视化，通过节点和链接展示角色间的复杂联系。作者演示了如何加载数据、更新图例和交互功能，以及关键的布局和事件处理策略。

1 https://www.cnblogs.com/fastmover/p/7779660.html

<template>
  <div>
    <div class="container"></div>
  </div>
</template>

<script>
import * as d3 from "d3";

export default {
  data() {
    return {
      svgArea: null,
      links: [],
      nodes: [],
      nodesName: [],
      linksName: [],
      simulation: null,
      scale: 1,
      width: 1200,
      height: 600,
      colorList: [
        "#FD7623",
        "#3388B1",
        "#D82952",
        "#F3D737",
        "#409071",
        "#D64E52",
      ],
      testGraph: {
        nodes: [
          { id: "Myriel", group: 1 },
          { id: "Napoleon", group: 1 },
          { id: "Mlle.Baptistine", group: 1 },
          { id: "Mme.Magloire", group: 1 },
          { id: "CountessdeLo", group: 1 },
          { id: "Geborand", group: 1 },
          { id: "Champtercier", group: 1 },
          { id: "Cravatte", group: 1 },
          { id: "Count", group: 1 },
          { id: "OldMan", group: 1 },
          { id: "Labarre", group: 2 },
          { id: "Valjean", group: 2 },
          { id: "Marguerite", group: 3 },
          { id: "Mme.deR", group: 2 },
          { id: "Isabeau", group: 2 },
          { id: "Gervais", group: 2 },
          { id: "Tholomyes", group: 3 },
          { id: "Listolier", group: 3 },
          { id: "Fameuil", group: 3 },
          { id: "Blacheville", group: 3 },
          { id: "Favourite", group: 3 },
          { id: "Dahlia", group: 3 },
          { id: "Zephine", group: 3 },
          { id: "Fantine", group: 3 },
          { id: "Mme.Thenardier", group: 4 },
          { id: "Thenardier", group: 4 },
          { id: "Cosette", group: 5 },
          { id: "Javert", group: 4 },
          { id: "Fauchelevent", group: 0 },
          { id: "Bamatabois", group: 2 },
          { id: "Perpetue", group: 3 },
          { id: "Simplice", group: 2 },
          { id: "Scaufflaire", group: 2 },
          { id: "Woman1", group: 2 },
          { id: "Judge", group: 2 },
          { id: "Champmathieu", group: 2 },
          { id: "Brevet", group: 2 },
          { id: "Chenildieu", group: 2 },
          { id: "Cochepaille", group: 2 },
          { id: "Pontmercy", group: 4 },
          { id: "Boulatruelle", group: 6 },
          { id: "Eponine", group: 4 },
          { id: "Anzelma", group: 4 },
          { id: "Woman2", group: 5 },
          { id: "MotherInnocent", group: 0 },
          { id: "Gribier", group: 0 },
          { id: "Jondrette", group: 7 },
          { id: "Mme.Burgon", group: 7 },
          { id: "Gavroche", group: 8 },
          { id: "Gillenormand", group: 5 },
          { id: "Magnon", group: 5 },
          { id: "Mlle.Gillenormand", group: 5 },
          { id: "Mme.Pontmercy", group: 5 },
          { id: "Mlle.Vaubois", group: 5 },
          { id: "Lt.Gillenormand", group: 5 },
          { id: "Marius", group: 8 },
          { id: "BaronessT", group: 5 },
          { id: "Mabeuf", group: 8 },
          { id: "Enjolras", group: 8 },
          { id: "Combeferre", group: 8 },
          { id: "Prouvaire", group: 8 },
          { id: "Feuilly", group: 8 },
          { id: "Courfeyrac", group: 8 },
          { id: "Bahorel", group: 8 },
          { id: "Bossuet", group: 8 },
          { id: "Joly", group: 8 },
          { id: "Grantaire", group: 8 },
          { id: "MotherPlutarch", group: 9 },
          { id: "Gueulemer", group: 4 },
          { id: "Babet", group: 4 },
          { id: "Claquesous", group: 4 },
          { id: "Montparnasse", group: 4 },
          { id: "Toussaint", group: 5 },
          { id: "Child1", group: 10 },
          { id: "Child2", group: 10 },
          { id: "Brujon", group: 4 },
          { id: "Mme.Hucheloup", group: 8 },
        ],
        links: [
          { source: "Napoleon", target: "Myriel", value: 1 },
          { source: "Mlle.Baptistine", target: "Myriel", value: 8 },
          { source: "Mme.Magloire", target: "Myriel", value: 10 },
          { source: "Mme.Magloire", target: "Mlle.Baptistine", value: 6 },
          { source: "CountessdeLo", target: "Myriel", value: 1 },
          { source: "Geborand", target: "Myriel", value: 1 },
          { source: "Champtercier", target: "Myriel", value: 1 },
          { source: "Cravatte", target: "Myriel", value: 1 },
          { source: "Count", target: "Myriel", value: 2 },
          { source: "OldMan", target: "Myriel", value: 1 },
          { source: "Valjean", target: "Labarre", value: 1 },
          { source: "Valjean", target: "Mme.Magloire", value: 3 },
          { source: "Valjean", target: "Mlle.Baptistine", value: 3 },
          { source: "Valjean", target: "Myriel", value: 5 },
          { source: "Marguerite", target: "Valjean", value: 1 },
          { source: "Mme.deR", target: "Valjean", value: 1 },
          { source: "Isabeau", target: "Valjean", value: 1 },
          { source: "Gervais", target: "Valjean", value: 1 },
          { source: "Listolier", target: "Tholomyes", value: 4 },
          { source: "Fameuil", target: "Tholomyes", value: 4 },
          { source: "Fameuil", target: "Listolier", value: 4 },
          { source: "Blacheville", target: "Tholomyes", value: 4 },
          { source: "Blacheville", target: "Listolier", value: 4 },
          { source: "Blacheville", target: "Fameuil", value: 4 },
          { source: "Favourite", target: "Tholomyes", value: 3 },
          { source: "Favourite", target: "Listolier", value: 3 },
          { source: "Favourite", target: "Fameuil", value: 3 },
          { source: "Favourite", target: "Blacheville", value: 4 },
          { source: "Dahlia", target: "Tholomyes", value: 3 },
          { source: "Dahlia", target: "Listolier", value: 3 },
          { source: "Dahlia", target: "Fameuil", value: 3 },
          { source: "Dahlia", target: "Blacheville", value: 3 },
          { source: "Dahlia", target: "Favourite", value: 5 },
          { source: "Zephine", target: "Tholomyes", value: 3 },
          { source: "Zephine", target: "Listolier", value: 3 },
          { source: "Zephine", target: "Fameuil", value: 3 },
          { source: "Zephine", target: "Blacheville", value: 3 },
          { source: "Zephine", target: "Favourite", value: 4 },
          { source: "Zephine", target: "Dahlia", value: 4 },
          { source: "Fantine", target: "Tholomyes", value: 3 },
          { source: "Fantine", target: "Listolier", value: 3 },
          { source: "Fantine", target: "Fameuil", value: 3 },
          { source: "Fantine", target: "Blacheville", value: 3 },
          { source: "Fantine", target: "Favourite", value: 4 },
          { source: "Fantine", target: "Dahlia", value: 4 },
          { source: "Fantine", target: "Zephine", value: 4 },
          { source: "Fantine", target: "Marguerite", value: 2 },
          { source: "Fantine", target: "Valjean", value: 9 },
          { source: "Mme.Thenardier", target: "Fantine", value: 2 },
          { source: "Mme.Thenardier", target: "Valjean", value: 7 },
          { source: "Thenardier", target: "Mme.Thenardier", value: 13 },
          { source: "Thenardier", target: "Fantine", value: 1 },
          { source: "Thenardier", target: "Valjean", value: 12 },
          { source: "Cosette", target: "Mme.Thenardier", value: 4 },
          { source: "Cosette", target: "Valjean", value: 31 },
          { source: "Cosette", target: "Tholomyes", value: 1 },
          { source: "Cosette", target: "Thenardier", value: 1 },
          { source: "Javert", target: "Valjean", value: 17 },
          { source: "Javert", target: "Fantine", value: 5 },
          { source: "Javert", target: "Thenardier", value: 5 },
          { source: "Javert", target: "Mme.Thenardier", value: 1 },
          { source: "Javert", target: "Cosette", value: 1 },
          { source: "Fauchelevent", target: "Valjean", value: 8 },
          { source: "Fauchelevent", target: "Javert", value: 1 },
          { source: "Bamatabois", target: "Fantine", value: 1 },
          { source: "Bamatabois", target: "Javert", value: 1 },
          { source: "Bamatabois", target: "Valjean", value: 2 },
          { source: "Perpetue", target: "Fantine", value: 1 },
          { source: "Simplice", target: "Perpetue", value: 2 },
          { source: "Simplice", target: "Valjean", value: 3 },
          { source: "Simplice", target: "Fantine", value: 2 },
          { source: "Simplice", target: "Javert", value: 1 },
          { source: "Scaufflaire", target: "Valjean", value: 1 },
          { source: "Woman1", target: "Valjean", value: 2 },
          { source: "Woman1", target: "Javert", value: 1 },
          { source: "Judge", target: "Valjean", value: 3 },
          { source: "Judge", target: "Bamatabois", value: 2 },
          { source: "Champmathieu", target: "Valjean", value: 3 },
          { source: "Champmathieu", target: "Judge", value: 3 },
          { source: "Champmathieu", target: "Bamatabois", value: 2 },
          { source: "Brevet", target: "Judge", value: 2 },
          { source: "Brevet", target: "Champmathieu", value: 2 },
          { source: "Brevet", target: "Valjean", value: 2 },
          { source: "Brevet", target: "Bamatabois", value: 1 },
          { source: "Chenildieu", target: "Judge", value: 2 },
          { source: "Chenildieu", target: "Champmathieu", value: 2 },
          { source: "Chenildieu", target: "Brevet", value: 2 },
          { source: "Chenildieu", target: "Valjean", value: 2 },
          { source: "Chenildieu", target: "Bamatabois", value: 1 },
          { source: "Cochepaille", target: "Judge", value: 2 },
          { source: "Cochepaille", target: "Champmathieu", value: 2 },
          { source: "Cochepaille", target: "Brevet", value: 2 },
          { source: "Cochepaille", target: "Chenildieu", value: 2 },
          { source: "Cochepaille", target: "Valjean", value: 2 },
          { source: "Cochepaille", target: "Bamatabois", value: 1 },
          { source: "Pontmercy", target: "Thenardier", value: 1 },
          { source: "Boulatruelle", target: "Thenardier", value: 1 },
          { source: "Eponine", target: "Mme.Thenardier", value: 2 },
          { source: "Eponine", target: "Thenardier", value: 3 },
          { source: "Anzelma", target: "Eponine", value: 2 },
          { source: "Anzelma", target: "Thenardier", value: 2 },
          { source: "Anzelma", target: "Mme.Thenardier", value: 1 },
          { source: "Woman2", target: "Valjean", value: 3 },
          { source: "Woman2", target: "Cosette", value: 1 },
          { source: "Woman2", target: "Javert", value: 1 },
          { source: "MotherInnocent", target: "Fauchelevent", value: 3 },
          { source: "MotherInnocent", target: "Valjean", value: 1 },
          { source: "Gribier", target: "Fauchelevent", value: 2 },
          { source: "Mme.Burgon", target: "Jondrette", value: 1 },
          { source: "Gavroche", target: "Mme.Burgon", value: 2 },
          { source: "Gavroche", target: "Thenardier", value: 1 },
          { source: "Gavroche", target: "Javert", value: 1 },
          { source: "Gavroche", target: "Valjean", value: 1 },
          { source: "Gillenormand", target: "Cosette", value: 3 },
          { source: "Gillenormand", target: "Valjean", value: 2 },
          { source: "Magnon", target: "Gillenormand", value: 1 },
          { source: "Magnon", target: "Mme.Thenardier", value: 1 },
          { source: "Mlle.Gillenormand", target: "Gillenormand", value: 9 },
          { source: "Mlle.Gillenormand", target: "Cosette", value: 2 },
          { source: "Mlle.Gillenormand", target: "Valjean", value: 2 },
          { source: "Mme.Pontmercy", target: "Mlle.Gillenormand", value: 1 },
          { source: "Mme.Pontmercy", target: "Pontmercy", value: 1 },
          { source: "Mlle.Vaubois", target: "Mlle.Gillenormand", value: 1 },
          { source: "Lt.Gillenormand", target: "Mlle.Gillenormand", value: 2 },
          { source: "Lt.Gillenormand", target: "Gillenormand", value: 1 },
          { source: "Lt.Gillenormand", target: "Cosette", value: 1 },
          { source: "Marius", target: "Mlle.Gillenormand", value: 6 },
          { source: "Marius", target: "Gillenormand", value: 12 },
          { source: "Marius", target: "Pontmercy", value: 1 },
          { source: "Marius", target: "Lt.Gillenormand", value: 1 },
          { source: "Marius", target: "Cosette", value: 21 },
          { source: "Marius", target: "Valjean", value: 19 },
          { source: "Marius", target: "Tholomyes", value: 1 },
          { source: "Marius", target: "Thenardier", value: 2 },
          { source: "Marius", target: "Eponine", value: 5 },
          { source: "Marius", target: "Gavroche", value: 4 },
          { source: "BaronessT", target: "Gillenormand", value: 1 },
          { source: "BaronessT", target: "Marius", value: 1 },
          { source: "Mabeuf", target: "Marius", value: 1 },
          { source: "Mabeuf", target: "Eponine", value: 1 },
          { source: "Mabeuf", target: "Gavroche", value: 1 },
          { source: "Enjolras", target: "Marius", value: 7 },
          { source: "Enjolras", target: "Gavroche", value: 7 },
          { source: "Enjolras", target: "Javert", value: 6 },
          { source: "Enjolras", target: "Mabeuf", value: 1 },
          { source: "Enjolras", target: "Valjean", value: 4 },
          { source: "Combeferre", target: "Enjolras", value: 15 },
          { source: "Combeferre", target: "Marius", value: 5 },
          { source: "Combeferre", target: "Gavroche", value: 6 },
          { source: "Combeferre", target: "Mabeuf", value: 2 },
          { source: "Prouvaire", target: "Gavroche", value: 1 },
          { source: "Prouvaire", target: "Enjolras", value: 4 },
          { source: "Prouvaire", target: "Combeferre", value: 2 },
          { source: "Feuilly", target: "Gavroche", value: 2 },
          { source: "Feuilly", target: "Enjolras", value: 6 },
          { source: "Feuilly", target: "Prouvaire", value: 2 },
          { source: "Feuilly", target: "Combeferre", value: 5 },
          { source: "Feuilly", target: "Mabeuf", value: 1 },
          { source: "Feuilly", target: "Marius", value: 1 },
          { source: "Courfeyrac", target: "Marius", value: 9 },
          { source: "Courfeyrac", target: "Enjolras", value: 17 },
          { source: "Courfeyrac", target: "Combeferre", value: 13 },
          { source: "Courfeyrac", target: "Gavroche", value: 7 },
          { source: "Courfeyrac", target: "Mabeuf", value: 2 },
          { source: "Courfeyrac", target: "Eponine", value: 1 },
          { source: "Courfeyrac", target: "Feuilly", value: 6 },
          { source: "Courfeyrac", target: "Prouvaire", value: 3 },
          { source: "Bahorel", target: "Combeferre", value: 5 },
          { source: "Bahorel", target: "Gavroche", value: 5 },
          { source: "Bahorel", target: "Courfeyrac", value: 6 },
          { source: "Bahorel", target: "Mabeuf", value: 2 },
          { source: "Bahorel", target: "Enjolras", value: 4 },
          { source: "Bahorel", target: "Feuilly", value: 3 },
          { source: "Bahorel", target: "Prouvaire", value: 2 },
          { source: "Bahorel", target: "Marius", value: 1 },
          { source: "Bossuet", target: "Marius", value: 5 },
          { source: "Bossuet", target: "Courfeyrac", value: 12 },
          { source: "Bossuet", target: "Gavroche", value: 5 },
          { source: "Bossuet", target: "Bahorel", value: 4 },
          { source: "Bossuet", target: "Enjolras", value: 10 },
          { source: "Bossuet", target: "Feuilly", value: 6 },
          { source: "Bossuet", target: "Prouvaire", value: 2 },
          { source: "Bossuet", target: "Combeferre", value: 9 },
          { source: "Bossuet", target: "Mabeuf", value: 1 },
          { source: "Bossuet", target: "Valjean", value: 1 },
          { source: "Joly", target: "Bahorel", value: 5 },
          { source: "Joly", target: "Bossuet", value: 7 },
          { source: "Joly", target: "Gavroche", value: 3 },
          { source: "Joly", target: "Courfeyrac", value: 5 },
          { source: "Joly", target: "Enjolras", value: 5 },
          { source: "Joly", target: "Feuilly", value: 5 },
          { source: "Joly", target: "Prouvaire", value: 2 },
          { source: "Joly", target: "Combeferre", value: 5 },
          { source: "Joly", target: "Mabeuf", value: 1 },
          { source: "Joly", target: "Marius", value: 2 },
          { source: "Grantaire", target: "Bossuet", value: 3 },
          { source: "Grantaire", target: "Enjolras", value: 3 },
          { source: "Grantaire", target: "Combeferre", value: 1 },
          { source: "Grantaire", target: "Courfeyrac", value: 2 },
          { source:
最低0.47元/天 解锁文章
利用vue3+d3实现一个小的数据可视化网页
RaBaSrCaMgBe的博客
05-13 2145
利用vue3+d3，弄了一个数据可视化的小网页。
Echarts气泡图（相邻效果，气泡之间不叠加）
m0_67401851的博客
03-03 2202
效果图 借助Echarts中提供的样例完成，官网样例可自行前往 官网链接放下面啦！！ Examples - Apache ECharts 使用版本 完整代码如下 <!-- d3js 气泡图 --> <template> <div id="bubble" style="width: 500px;height:500px"></div> </template> <script> import * as echarts from
vued3一个D3的Vuejs插件
08-10
vue-d3：一个D3的Vue.js插件
前端可视化突围之路：D3.js与React/Vue集成的3种高效方案
最新发布
InitFlow的博客
10-14 454
掌握前端可视化d3的集成之道，本文详解D3.js与React/Vue三种高效融合方案，涵盖组件封装、状态同步与性能优化，适用于数据大屏与交互图表开发，提升项目可视化能力，值得收藏。
在Vue项目里面使用d3.js
weixin_30892889的博客
04-30 1114
之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.js的方法,npm 上面的D3相对来说 可以说是很不人性化了 完全没有说 在webpack上怎么使用D3.js 最后折腾很久 看到某位外国大佬 看他的案例 成功的实现了在Vue项目里面实现D3的使用 首先安装 npm install d3 --save-dev 以防万一,然后看packa...
vue3中使用d3.js绘制流程图(TS语法)
qq_45079530的博客
07-11 6400
【代码】vue3中使用d3.js绘制流程图(TS语法)
精选资源
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
01-18
针对上一篇文章，进行对svg文件里面的元素进行赋值和放大缩小的补充笔记 svg元素赋值 1. 先看看svg文件的代码 思路：我的想法就是循环拿到里面的id，然后跟后台的数据匹配，然后赋值。因为后台返回的数据id是没有...
vue2使用d3.js实现网络拓扑图
收集、分享
02-26 1315
vue2使用d3.js实现网络拓扑图
vue使用svg文件补充-svg放大缩小（使用d3.js）
黄小堆
04-30 4546
前言 项目需求是要引入svg文件，然后对里面的元素进行赋值，完了之后还要能够让svg放大缩小，点击查看全屏。针对上一篇文章，进行对svg文件里面的元素进行赋值和放大缩小的补充笔记 svg元素赋值 先看看svg文件的代码 思路：我的想法就是循环拿到里面的id，然后跟后台的数据匹配，然后赋值。因为后台返回的数据id是没有后面的_C和_V 的。所以需要我前端的处理。 2. 前端js代码： ...
d3+jQuery类似天眼查企查查的股权穿透图代码.zip
09-23
首先，d3.js（Data-Driven Documents）是一个强大的JavaScript库，用于创建数据驱动的网页可视化。d3的核心理念是将数据绑定到DOM（文档对象模型）元素，并通过数据的变化来驱动视觉表示的更新。在这个项目中，d3.js...
用 Vue 3 + D3.js 实现动态数据流图
idree的博客
04-11 1909
用 Vue 3 + D3.js 实现动态数据流图
d3vue：VueJS的D3插件
02-05
如果您当前正在使用d3vue，我们将暂停该项目的更新。 我们创建了一个新插件，可使用独立组件更深入地与Vue集成。 查看我们的Github页面以获取 D3 + Vue：VueJS的D3插件 D3与Vue.js集成 d3vue是VueJS 2的插件，它使您可以从Vue实例中获取数据并将该数据绑定到D3 v4数据可视化。 d3vue使用v4合并语法，因此当您可以在生命周期事件（即已挂载，beforeUpdate）中调用同一函数时。 函数签名为： this.$helpers.chart.barChart(this.$d3, this.dataSet, this.options); $ d3是对
如何在Vue3中使用D3.js实现数据可视化？
有我更精彩的博客
06-14 2701
随着Web技术的发展，数据可视化已经成为前端开发中的一个热门话题。而D3.js作为最强大的数据可视化库之一，通常与各种前端框架一起使用，如Vue.js。在这篇文章中，我们将探讨如何在Vue3中结合D3.js来实现数据可视化。我们将通过一个具体的示例，逐步介绍实现的过程。
在Vue3.0里面动态创建svg(d3.js)
ouyangyiming的博客
09-28 1533
svg, d3
Vue3 与 D3.js 集成：实现数据可视化和动态图表的交互效果
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
11-12 2639
将 D3.js 图表封装成 Vue3 组件可以实现高复用性。可以通过props接收不同的数据集或图表配置，灵活生成各种类型的图表。在图表组件中，可以添加propsprops: {width: {},height: {},通过将 Vue3 和 D3.js 集成，可以创建具有高度定制化和交互效果的图表。在实际项目中，灵活地运用 Vue 的响应式数据流和 D3 的数据驱动特性，将能有效增强系统的用户体验和数据展示效果。
NodeJS+Vue3+D3
qq_46141123的博客
06-22 600
使用vue制作一个包含d3直方图的网页 再加上一个饼图、词云图或力导向图。
Vue中 引入使用 D3.js
weixin_44867717的博客
06-25 7633
Vue中 引入使用 D3.js 1. D3.js 学习文档 D3.js 中文网 D3.js 入门教程 D3.js v5版入门教程 d3.js API中文手册-【看云】 d3.layout (布局)-【书栈网】 2. D3.js 在 Vue 中简单应用 2.1 安装 D3.js npm install d3 --save-dev // 或者 cnpm install d3 --save-dev 2.2 组件应用 <template> <div> <svg widt
【Vue3+D3】基于Vue3+D3的数据可视化
weixin_45939929的博客
05-08 7587
使用Vue+D3绘制直方图、饼图。
Maja：自托管的Vue.js个人笔记与思维导图工具
1. Vue.js：Vue.js是一个开源的JavaScript框架，用于构建用户界面和单页应用程序。它采用数据驱动的视图，以及组件系统来帮助开发者构建复杂、动态的网页应用。Vue.js的特点是轻量级、灵活和易于集成。 2. 记笔记...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yusirxiaer

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值