基于ECharts的数据大屏制作

已于 2022-04-21 10:07:32 修改
阅读量6.4k 收藏 107
点赞数 32
分类专栏： 前端 文章标签： echarts jquery flex js css
于 2021-04-26 13:58:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ans_min/article/details/116142936
版权

P.S.

项目用到的所有文件我放在了百度网盘中，方便下载
链接：https://pan.baidu.com/s/1z_vfDC-SK09CYFrDFMl91Q
提取码：0ajm

零、知识点补充

这里我会写两种的解释，一个是用我自己的话来说（简单版）；另一种就是看百度的解释（详细版）。

0.1 Less

简单版

就是辅助写css的，加快项目开发效率。

可以理解为一种类似css写法的一个语言，每次你保存less文件的时候，他会给你自动转换成wxss（微信小程序的样式文件）或者css文件，相对于你直接写css语法所需的代码，用less写要少很多。

当然，less也提供了css没有的东西，从另一角度看，less是一个加强版css。

详细版

0.2 jQuery插件

简单版

js插件，一个比较基本的js插件，也很小，很方便导入，一些前端的框架也基于jQuery写的，比如Bootstrap框架，使用Bootstrap的时候，必须先导入jQuery.js，才能正常使用Bootstrap。

详细版

jQuery官网：按住Ctrl点击跳转

官网是英文的，但是What is jQuery这个标题应该都可以找得到。

0.3 Flex布局

简单版

一种布局方式，让我们快速布局。此项目我们用Flex布局来快速布局，以及屏幕适配。

详细版

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

这里给出菜鸟的Flex介绍：按住Ctrl点击跳转

0.4 rem

简单版

rem就是一个相对的单位，会根据网页长宽的变化而变化。rem常用来实现响应式布局。

详细版

这个玩意就是个相对计算出来的单位，官网应该没有（我是没找到。。）

给大家看看菜鸟教程上写的东西吧：px、em、rem区别介绍，一样道理按住Ctrl点击即可跳转。

一、项目准备

1.1 项目使用技术

项目学到或用到如下技术：

  • div+css布局
  • flex布局
  • less辅助样式开发
  • 原生js+jQuery使用
  • rem屏幕适配
  • echarts基础

1.2 文件准备

1.2.1 插件文件
  1. flexible.js插件
  2. jquery.js插件
  3. 包含默认组件的echarts.js（或echarts.min.js）插件
  4. VS Code插件
    1. Easy LESS（以下简称less插件）
    2. px to rem & rpx (cssrem)（一下简称rem插件）
1.2.2 VS Code插件下载
步骤

先打开VS Code点击插件下载的图标
在这里插入图片描述

分别搜索Easy LESS和px to rem & rpx (cssrem)，搜索到之后点击安装（install）

在这里插入图片描述

详细插件的页面

如果怕自己下载错了，我这里给出两个插件的详情页面。

Easy LESS：
在这里插入图片描述
px to rem & rpx (cssrem)：
在这里插入图片描述

可能出现的问题

如果你之前用过less辅助开发微信小程序的话，less默认生成的文件是wxss，我们在less插件的settings.js文件中配置一下就好。

首先我们找到settings.js，并打开；
在这里插入图片描述
设置settings.js，将less自动转化格式为css；
在这里插入图片描述
保存less文件，可以看到css文件自动生成成功，问题解决。
在这里插入图片描述

1.3 适配方案

首先我们目标是1920px的大屏幕，flexible.js默认把屏幕分为24等份（1920px÷24=80px）

规划好了，我们再来设置rem插件的配置信息。首先和上面类似，找到rem插件的扩展设置，然后就能看到Root Font Size这一项了；
在这里插入图片描述

修改成80即可，不用带px单位，其他单位也不用。

二、项目步骤

2.1 项目实现效果

在这里插入图片描述

2.2 项目流程

项目文件架构

项目文件架构为
在这里插入图片描述
除了index.html（手动创建）、index.less（手动创建）、index.js（手动创建）、index.css（less文件保存后自动生成的，不用手动创建）外，其他文件都是能从网上找到的，我们不用自己写。

制作步骤

按图中的序号来。
在这里插入图片描述
先做header部分，然后开始做main部分；main部分中，先做left再做right最后做中间部分；中间部分分上面的数字部分和下面的地图部分。

合适的开发流程有利于提高代码写的效率。

2.3 body基础样式

撰写index.html基本代码骨架（VS Code中输入!，然后Enter，就可以快速生成HTML基本骨架）

P.S. 最好将自动生成的骨架中html的lang属性设置为zh-CN（声明是中文网页），不然每次生成网页，他都提示你翻不翻译，影响开发效率。
在这里插入图片描述
设置80px为1rem，方便屏幕适配（前面配过了这步就不用管了）
在这里插入图片描述
导入flexible布局（flexible.js）
在这里插入图片描述
插入body（整个页面）的背景图
在这里插入图片描述
效果如下图所示
在这里插入图片描述

2.4 头部栏的制作

2.4.1 实现代码
<!-- index.html -->
<header>
    <h1>2018212229+朱明</h1>
    <div class="showTime"></div>
</header>
<!-- showTime模块实现 -->
<script>
    // 格式： 当前时间：2020年3月17-0时54分14秒
    var t = null;
    t = setTimeout(time, 1000);//開始运行
    function time() {
        clearTimeout(t);//清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();//获取时
        var m = dt.getMinutes();//获取分
        var s = dt.getSeconds();//获取秒
        document.querySelector(".showTime").innerHTML = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
        t = setTimeout(time, 1000); //设定定时器，循环运行     
    }
</script>

// less中的代码
header {
    position: relative;
    height: 1.25rem;
    background: url(../images/head_bg.png) no-repeat;
    background-size: 100% 100%;
    h1 {
        font-size: .475rem;
        color: #FFF;
        text-align: center;
        line-height: 1rem;
    }
    .showTime {
        position: absolute;
        right: .375rem;
        top: 0;
        line-height: .9375rem;
        color: rgba(255, 255, 255, 0.7);
        font-size: .25rem;
    }
}
2.4.2 步骤

增加头部栏（header），并在其中增加标题（h1）和showTime模块区域（div）
在这里插入图片描述
用JavaScript实现showTime模块功能
在这里插入图片描述
当前实现的页面效果如下图所示，不符合预期效果
在这里插入图片描述
当前代码如下：
在这里插入图片描述
经原因分析，h1默认占一行，虽然父标签header设置了position为relative，showTime()模块position为absolute还不行，还需设置top值，我们增加less代码：top: 0
在这里插入图片描述
问题解决。
在这里插入图片描述

2.5 主体部分的制作

2.5.1 实现代码
<!-- 页面主体 -->
<section class="mainbox">
    <!-- 左侧部分制作 -->
    <div class="column">
        <div class="panel bar">
            <h2>柱形图-就业行业</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line">
            <h2>折线图-就业行业</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie">
            <h2>饼状图-就业行业</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
    <!-- 中间部分制作 -->
    <div class="column">
        <!-- no数字模块的制作 -->
        <div class="no">
            <div class="no-hd">
                <ul>
                    <li>123123</li>
                    <li>123123</li>
                </ul>
            </div>
            <div class="no-bd">
                <ul>
                    <li>前端需求人数</li>
                    <li>市场供应人数</li>
                </ul>
            </div>
        </div>
        <div class="map">
            <div class="map1"></div>
            <div class="map2"></div>
            <div class="map3"></div>
            <div class="chart">地图模块</div>
        </div>
    </div>
    <!-- 右侧部分制作 -->
    <div class="column">
        <div class="panel bar1">
            <h2>柱形图-就业行业</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel line1">
            <h2>折线图-就业行业</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
        <div class="panel pie1">
            <h2>饼状图-就业行业</h2>
            <div class="chart"></div>
            <div class="panel-footer"></div>
        </div>
    </div>
</section>

// less代码
// 字体声明
@font-face {
    font-family: electronicFont;
    src: url(../font/DS-DIGIT.TTF);
}

// 页面主体部分
.mainbox {
    display: flex;
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    padding: .125rem .125rem 0;
    .column {
        flex: 3;
    }
    .column:nth-child(2) {
        flex: 5;
        margin: 0 .125rem .1875rem;
    }
    // 全部的图表模块
    .panel {
        position: relative;
        height: 3.875rem;
        border: 1px solid rgba(25, 186, 139, 0.17);
        padding: 0 .1875rem .5rem;
        margin-bottom: .1875rem;
        background: url(../images/line\(1\).png) rgba(255, 255, 255, 0.03);
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            width: 10px;
            height: 10px;
            border-left: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;;
            content: "";
        }
        &::after {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            height: 10px;
            border-right: 2px solid #02a6b5;
            border-top: 2px solid #02a6b5;;
            content: "";
        }
        .panel-footer {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            &::before {
              position: absolute;
              bottom: 0;
              left: 0;
              content: "";
              width: 10px;
              height: 10px;
              border-bottom: 2px solid #02a6b5;
              border-left: 2px solid #02a6b5;
            }
            &::after {
              position: absolute;
              bottom: 0;
              right: 0;
              content: "";
              width: 10px;
              height: 10px;
              border-bottom: 2px solid #02a6b5;
              border-right: 2px solid #02a6b5;
            }
        }
        h2 {
            height: .6rem;
            color: #FFF;
            line-height: .6rem;
            text-align: center;
            font-size: 0.25rem;
            font-weight: 400;
        }
        .chart {
            height: 3rem;
        }  
    }
}

// no数字模块
.no {
    background: rgba(101, 132, 226, 0.1);
    padding: .1875rem;
    .no-hd {
        position: relative;
        border: 1px solid rgba(25, 186, 139, 0.17);
        &::before {
            position: absolute;
            top: 0;
            left: 0;
            content: "";
            width: 25px;
            height: 15px;
            border-top: 2px solid #02a6b5;
            border-left: 2px solid #02a6b5;
        }
        &::after {
            position: absolute;
            bottom: 0;
            right: 0;
            content: "";
            width: 25px;
            height: 15px;
            border-bottom: 2px solid #02a6b5;
            border-right: 2px solid #02a6b5;
        }
        ul {
            display: flex;
            li {
                position: relative;
                flex: 1;
                list-style: none;
                height: 1rem;
                font-size: .875rem;
                color: #ffeb7b;
                text-align: center;
                font-family: 'electronicFont';
            }
            li:nth-child(1)::after {
                content: "";
                position: absolute;
                top: 25%;
                right: 0;
                height: 50%;
                width: 1px;
                background: rgba(255, 255, 255, 0.2);
            }
        }
    }
    .no-bd {
        ul {
            display: flex;
            li {
                position: relative;
                flex: 1;
                list-style: none;
                height: .5rem;
                font-size: .225rem;
                color: rgba(255, 255, 255, 0.7);
                text-align: center;
                padding-top: .125rem;
            }
        }
    }
}

// 地图部分样式
.map {
    position: relative;
    height: 10.125rem;
    .map1 {
        width: 6.475rem;
        height: 6.475rem;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: url(../images/map.png);
        background-size: 100% 100%;
        opacity: 0.3;
    }
    .map2 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8.0375rem;
        height: 8.0375rem;
        background: url(../images/lbx.png);
        background-size: 100% 100%;
        animation: rotate1 15s linear infinite;
        opacity: 0.6;
    }
    @keyframes rotate1 {
        from {
            transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    .map3 {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 7.075rem;
        height: 7.075rem;
        background: url(../images/jt.png);
        background-size: 100% 100%;
        animation: rotate2 10s linear infinite;
        opacity: 0.6;
    }

    @keyframes rotate2 {
        from {
          transform: translate(-50%, -50%) rotate(0deg);
        }
        to {
          transform: translate(-50%, -50%) rotate(-360deg);
        }
    }
    .chart {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5;
        height: 10.125rem;
        width: 100%;
    }
}
2.5.2 左侧的制作

先制作底层，插入背景图，然后加一个0.03透明度的白底背景颜色
在这里插入图片描述
通过设置panel的before和after来制作上方角边框效果
在这里插入图片描述
我们放置一个div置于panel的底部，然后设置该div的after和before来制作下方角边框效果
在这里插入图片描述
加入标题（h2）和放置图表的区域（div）
在这里插入图片描述
下面两个区域也是这样做，我们CV一下，然后修改部分代码，最终效果如下图所示。
在这里插入图片描述

2.5.3 右侧的制作

这部分与左侧一样，我们CV一下，代码都可以完全不改，效果如下图所示。
在这里插入图片描述

2.5.4 中间上半部分的制作

先做中间的上面部分，我们称为no部分，先准备一下底层div的背景
在这里插入图片描述
然后采用flex布局，分为两部分展示两个数字
在这里插入图片描述
然后我们导入字体，在less文件前面声明font路径
在这里插入图片描述

然后我们下面调用刚声明的字体即可
在这里插入图片描述
将no（div）中的no-hd（div）展示的数字字体修改为我们导入的字体，效果如下
在这里插入图片描述
然后我们还要解决中间的小竖线，我们给li标签的after加上50%的边框即可
在这里插入图片描述
但是我们不想让第二个li的after也产生竖线
在这里插入图片描述
我们将less的样式限制第一个li标签就好了，下面是改善的代码
在这里插入图片描述
解决最后的效果如下图所示
在这里插入图片描述
那我们经过上面的操作，很容易就写出剩余的部分，我们直接贴出代码
在这里插入图片描述
上半部分最终的效果如下图所示
在这里插入图片描述

2.5.5 中间下半部分的制作

该部分我们命名为map模块，我们先制作最底部div（map1）的背景图
在这里插入图片描述
实现最底部div的效果如下
在这里插入图片描述
再新建一个map2的div，我们进行动画的一些配置
在这里插入图片描述
动图实现效果因为动图展示不了的原因，我们就只能放一个静态图片了
在这里插入图片描述
接下来我们开始制作map3的div，也是动图，我们进行相应的配置
在这里插入图片描述
最终效果实现如下
在这里插入图片描述

2.5.6 每个部分chart的制作

（1）中间的中国地图实现

我们在index.js中写好所需的js代码，并采用即时执行函数，节省变量名
在这里插入图片描述
index.html中引入index.js以及echarts.min.js插件
在这里插入图片描述
效果实现完成
在这里插入图片描述
（2）两侧的柱形图、折线图和饼图实现

引入中国地图china.js插件和MmyMap.js插件（通过ECharts社区下载的样式）

在这里插入图片描述
最终的效果如图所示
在这里插入图片描述

2.5.7 页面适配

最后我们再加上一段代码，保证一下响应式布局

// less代码
/* 约束屏幕尺寸 */
@media screen and (max-width: 1024px) {
    html {
      font-size: 42px !important;
    }
}
@media screen and (min-width: 1920px) {
    html {
      font-size: 80px !important;
    }
}

项目完成。

三、后置寄语

如果你不是很深入学习js或者css的话，很多像@media screen、(function() {})();、nth-child()::after、&::after、:before等等等等，你可能完全不熟悉，或者不知道用法，这个没关系。

如果你不是想精通前端，就没必要学的很深，只要会一些基础的语法，然后要实现什么功能就搜索怎么实现，现学就好。

所以本文没有单独拎出来一些点进行详细的讲解，可能你看的云里雾里（精通一门语言就会好一点），耐着性子多看看即可。

结束。By：zm

Ans_min
关注
  • 32
    点赞
  • 踩
  • 107
    收藏
    觉得还不错? 一键收藏
  • 17
    评论
专栏目录
flexible.js_flexible.js下载_flexible.js下载_适配js文件_
10-03
可以自动适配的js文件，帮助你做echarts表格时使用。可用作系统。
移动Web：IIS部署 及 flexble.js 兼容
孤安先生的博客，作者主站正在重构中，敬请期待！
11-07 761
Internet Information Services (IIS) 管理器，用于本地起服务，可在局域网内访问本地网站。flexble.js 阿里团队开源的一个 js 库，使用 flexible.js 轻松搞定各种不同的移动端设备兼容自适应问题。
ECharts数据可视化项目-大屏数据可视化【持续更新中】_echarts可视化大屏开源项目
最新发布
2401_84434442的博客
06-16 1097
☞官网地址ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表，且可定制。折线图柱状图散点图饼图K线图。
flexible 粘贴即用
前端从0到100000
08-20 461
//可自行对比 (function flexible (window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize () { if (document.body) { document.body.style.fontSize = (12 *
屏幕适应之关于flexible.js的使用
m0_56597301的博客
01-03 4983
rem是css的一个单位，其根据根元素的font-size大小设置rem的大小，。即可通过改变font-size改变rem，适用于屏幕适应。flexible.js是用来使内容适应屏幕大小的插件。原理是通过 js 动态修改根元素的 font-size 大小，设置1rem等于可视窗口的多少。下图为部分源代码，表示设置font-size为窗口（1920px）的24分之一，即80px。
flexible
郑州彭于晏
07-12 811
flexible.js (function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust body font size function setBodyFontSize() { if (document.body) { document.body.style.fontSize = 12
基于ECharts智慧社区数据可视化大屏源码
12-03
ECharts，作为一款优秀的开源数据可视化库，被广泛应用于数据大屏的制作，以直观地展示各类社区数据，提升决策效率。本篇将深入解析基于ECharts的智慧社区数据可视化大屏的实现原理和应用。 1. ECharts简介： ...
基于ECharts智慧运维数据可视化大屏源码
12-03
基于ECharts的智慧运维数据可视化大屏源码，主要是为了实现以下功能： 1. 实时监控：通过ECharts的实时更新特性，可以展示系统状态、服务器性能指标（如CPU使用率、内存占用、磁盘I/O等）以及网络流量等关键数据，...
Echarts数据可视化图表案例+数据可视化大屏模板
06-21
18个Echarts数据可视化图表案例，每个案例都有代码注释，简单易懂。 还有三套echarts可视化大屏模板，案例下载后在编辑器内打开html，可以根据需求修改样式和数据，学习echarts绘图，也可以制作新的数据可视化大屏。
基于ECharts智慧景区数据可视化大屏源码
12-03
ECharts作为一款开源的、基于JavaScript的数据可视化库，因其丰富的图表类型、良好的交互性和强大的定制能力，被广泛应用于数据大屏的制作中。本项目基于ECharts，为智慧景区打造了一套数据可视化大屏，旨在通过实时...
echarts数据大屏静态页面
08-02
在“echarts数据大屏静态页面”这个主题中，我们将会探讨如何利用ECharts来构建数据可视化的大屏展示。 首先，ECharts的数据大屏通常由多个图表组件组合而成，例如描述中的“地图、柱形图、饼图、数字大屏”等。...
flexible.js下载
12-08
移动端web模拟导航可点击 自动滑动 flexible.js下载 资源下载
flexible.js
06-12
flexible.js手淘框架，是一个用来适配移动端的js框架。手淘框架的核心原理就是根据不同的width给网页中html跟节点设置不同的font-size，然后所有的距离大小都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。
【echarts画数据可视化大屏】
m0_65378680的博客
06-27 4130
当今社会，数据已经成为了我们最重要的资产之一。每一个领域都有着大量的数据，而对于企业来说，如何更好地利用这些数据就显得尤为关键。数据可视化是将数据转化为图形的过程，使得数据的本质更加清晰、易于理解。数据可视化大屏就是一个将数据可视化展示在大屏幕上的工具，可以帮助企业快速掌握数据的状态和趋势，更好地进行决策。本次数据可视化大屏数据来自。
基于Echarts实现大屏数据可视化物虚拟数据统计
热门推荐
HTML网页设计
08-15 1万+
🚀 基于 Echarts 实现可视化数据大屏响应式展示效果的源码,，基于html+css+javascript+echarts制作， 可以在此基础上重新开发。本项目中使用的是echarts图表库，ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ ...
移动web开发之自适应布局解决方案二: flexible.js+rem
qq_37635012的博客
12-11 1813
在移动web开发之自适应布局解决方案一: less+媒体查询+rem这个文章里我们学习了自适应的第一种方案，但我们发现这种方法太麻烦，还要我们自己去计算每个元素的rem值，于是我们可以用flexible.js可以解决这一痛点。这是手机淘宝团队推出的移动端适配库，我们再也不用写不同屏幕的媒体查询了，因为这个库做了js处理，其原理是将当前设备划分为10等份，但是不同屏幕设备下，比例还是一致的，我们要做的就是确定好我们当前设备的html字体大小即可，比如设计稿是750px，那么我们就把html字体大小设置为75p
echarts——实现大屏数据展示——基础积累（超详细）
yehaocheng520的博客
06-25 1万+
echarts——实现大屏数据展示——基础积累（超详细）
echarts数据可视化大屏
05-25
ECharts是一个基于JavaScript的数据可视化库，可以用来制作各种形式的数据大屏展示。下面是一些常见的应用场景： 1. 实时监控：可以通过ECharts绘制实时的监控数据，包括温度、湿度、气压等。 2. 业务分析：可以将业务数据通过ECharts进行可视化，比如销售额、用户数量、订单量等。 3. 地理信息：可以利用ECharts绘制地图，展示各种地理信息，比如城市人口分布、交通拥堵情况等。 4. 大数据分析：可以通过ECharts绘制大量数据的图表，比如柱状图、折线图、饼图、散点图等。 要制作一个ECharts数据大屏，需要先准备好数据源，然后根据需要选择合适的图表类型，并进行相应的配置和样式调整。同时，需要注意数据的实时性和可读性，以及大屏的交互性和响应性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值