学废了吗_搜索结果对应不同图表

最新推荐文章于 2024-10-31 16:52:57 发布
最新推荐文章于 2024-10-31 16:52:57 发布
阅读量300 收藏
点赞数
文章标签： elementui vue.js javascript echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Faker96/article/details/122163332
版权
该博客展示了如何使用Vue组件和ECharts库创建一个交互式的搜索功能，用户通过输入名称和账号筛选数据，然后动态绘制柱状图和饼图。ECharts图表根据用户选择的数据更新，呈现不同分类的下载量、浏览量等关键指标。
摘要由CSDN通过智能技术生成 

<template>
  <div>
    <div class="main">
      <div style="text-align: center">
        <el-autocomplete v-model="state_1" :fetch-suggestions="search_1" placeholder="请输入名称" @select="(e) => (select_1 = e.value)"></el-autocomplete>
      </div>
      <div style="text-align: center">
        <el-autocomplete v-model="state_2" :fetch-suggestions="search_2" placeholder="请输入账号" @select="(e) => (select_2 = e.value)"></el-autocomplete>
      </div>

      <el-button style="margin-right: 10px" type="primary" @click="changeData">搜索</el-button>
    </div>
    <div class="main">
      <div class="chart" ref="myChart_1"></div>
      <div class="chart" ref="myChart_2"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      data: [],
      selected_key: '',

      myChart_1: null,
      list_1: [],
      state_1: '',
      select_1: '',

      myChart_2: null,
      list_2: [],
      state_2: '',
      select_2: '',
    };
  },
  methods: {
    //一般请求数据都是异步的
    getData() {
      return new Promise((res) => {
        setTimeout(() => {
          res({
            'aaa  111111': {
              series: ['人文社区', '娱乐版块', '美食', '美景'],
              datas: [
                {
                  series: ['下载量', '浏览量'],
                  data: ['133', '122'],
                },
                {
                  series: ['下载量', '浏览量'],
                  data: ['33', '22'],
                },
                {
                  series: ['下载量', '浏览量'],
                  data: ['13', '12'],
                },
                {
                  series: ['下载量', '浏览量'],
                  data: ['333', '522'],
                },
              ],
              browsers: {
                series: ['ABC', 'AAA', 'BBB', 'CCC'],
                datas: [
                  {
                    dataS: [14, 15, 16, 17],
                  },
                ],
              },
            },
            'bbb  222222': {
              series: ['人文社区', '汽车', '美食', '美景'],
              datas: [
                {
                  series: ['下载量', '浏览量', '评论'],
                  data: ['133', '122', '13'],
                },
                {
                  series: ['下载量', '浏览量', '评论'],
                  data: ['33', '22', '12'],
                },
                {
                  series: ['下载量', '浏览量', '评论'],
                  data: ['13', '12', '12'],
                },
                {
                  series: ['下载量', '浏览量', '评论'],
                  data: ['333', '522', '10'],
                },
              ],
              browsers: {
                series: ['ABC', 'AAA', 'BBB', 'CCC'],
                datas: [
                  {
                    dataS: [14, 15, 16, 17],
                  },
                ],
              },
            },
            'ccc  333333': {
              series: ['人文社区', '明星', '美食', '美景'],
              datas: [
                {
                  series: ['下载量', '浏览量'],
                  data: ['133', '122'],
                },
                {
                  series: ['下载量', '浏览量'],
                  data: ['33', '22'],
                },
                {
                  series: ['下载量', '浏览量'],
                  data: ['13', '12'],
                },
                {
                  series: ['下载量', '浏览量'],
                  data: ['33', '22', '2'],
                },
              ],
              browsers: {
                series: ['ABC', 'AAA', 'BBB', 'CCC'],
                datas: [
                  {
                    dataS: [14, 15, 16, 17],
                  },
                ],
              },
            },
          });
        }, 300);
      });
    },

    //缓存key到内存里面 方便搜索调用
    hashKey(data) {
      Object.keys(data).forEach((v) => {
        let sp = v.split('  ');
        this.list_1.push({ label: sp[0], value: sp[0] });
        this.list_2.push({ label: sp[1], value: sp[1] });
      });
    },
    //名称搜索提示
    search_1(str, cb) {
      let res = str ? this.list_1.filter((item) => ~item.value.toLowerCase().indexOf(str.toLowerCase())) : this.list_1;
      cb(res); // 调用 callback 返回建议列表的数据
    },
    search_2(str, cb) {
      let res = str ? this.list_2.filter((item) => ~item.value.toLowerCase().indexOf(str.toLowerCase())) : this.list_2;
      cb(res); // 调用 callback 返回建议列表的数据
    },

    //初始化echarts绘图的dom
    initChart() {
      this.myChart_1 = echarts.init(this.$refs.myChart_1);
      this.myChart_2 = echarts.init(this.$refs.myChart_2);
    },
    //获取到的data进行绘图
    drawChart_1() {
      let data = this.data[this.selected_key];
      let chartData = []; //图表数据
      let seriesName = data.datas[0].series; //各个series的名字

      //转换一下数据
      data.series.forEach((v, i) => {
        chartData.push([v, ...data.datas[i].data]);
      });

      let series = [
        {
          name: seriesName[0],
          type: 'bar',
          itemStyle: {
            color: '#00a3eb',
          },
        },
        {
          name: seriesName[1],
          type: 'bar',
          itemStyle: {
            color: '#23af4c',
          },
          barGap: 0,
        },
      ];

      //三个列的情况
      if (chartData[0].length === 4) {
        series.push({
          name: seriesName[2],
          type: 'bar',
          itemStyle: {
            color: '#fef303',
          },
        });
      }

      //echarts 配置项
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        legend: {
          data: seriesName,
          bottom: 0,
        },
        xAxis: [
          {
            type: 'category',
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: {
          type: 'value',
        },
        dataset: {
          sourceHeader: false,
          source: chartData,
        },
        series: series,
      };

      //绘图
      this.myChart_1.setOption(option, true);

      //自适应
      window.onresize = () => {
        this.myChart_1.resize();
      };
    },
    //绘制饼图
    drawChart_2() {
      let data = this.data[this.selected_key].browsers;
      let chartData = []; //图表数据

      //转换一下数据
      data.series.forEach((v, i) => {
        chartData.push({
          value: data.datas[0].dataS[i],
          name: v,
        });
      });

      //echarts 配置项
      let option = {
        tooltip: {
          trigger: 'item',
        },
				legend: {
          data: data.series,
          bottom: 0,
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: chartData,
            label: {
              formatter: '{b}: {d}%',
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };

      //绘图
      this.myChart_2.setOption(option, true);

      //自适应
      window.onresize = () => {
        this.myChart_2.resize();
      };
    },

    //重新绘制数据
    changeData() {
      if (this.select_1 === '') {
        this.$message.error('请输入名称');
        return;
      }
      if (this.select_2 === '') {
        this.$message.error('请输入名字');
        return;
      }

      this.selected_key = this.select_1 + '  ' + this.select_2;

      if (!(this.selected_key in this.data)) {
        this.$message.error(this.selected_key + '查询数据失败');
        return;
      }

      this.drawChart_1();
      this.drawChart_2();
    },
  },
  mounted() {
    this.initChart();
    this.getData().then((e) => {
      this.data = e;
      this.hashKey(e);

      //初始化显示第一个人的数据
      this.selected_key = 'aaa  111111';
      this.drawChart_1();
      this.drawChart_2();
    });
  },
};
</script>

<style>
.chart {
  margin: 20px auto;
  width: 80%;
  height: 600px;
}
.main {
  display: flex;
  width: 100%;
  gap: 10px;
  margin-top: 80px;
}
.main > div {
  width: calc(50%);
}
</style>

<template>

  <div>

    <div class="main">

      <div style="text-align: center">

        <el-autocomplete v-model="state_1" :fetch-suggestions="search_1" placeholder="请输入名称" @select="(e) => (select_1 = e.value)"></el-autocomplete>

      </div>

      <div style="text-align: center">

        <el-autocomplete v-model="state_2" :fetch-suggestions="search_2" placeholder="请输入账号" @select="(e) => (select_2 = e.value)"></el-autocomplete>

      </div>

      <el-button style="margin-right: 10px" type="primary" @click="changeData">搜索</el-button>

    </div>

    <div class="main">

      <div class="chart" ref="myChart_1"></div>

      <div class="chart" ref="myChart_2"></div>

    </div>

  </div>

</template>

<script>

import * as echarts from 'echarts';

export default {

  data() {

    return {

      data: [],

      selected_key: '',

      myChart_1: null,

      list_1: [],

      state_1: '',

      select_1: '',

      myChart_2: null,

      list_2: [],

      state_2: '',

      select_2: '',

    };

  },

  methods: {

    //一般请求数据都是异步的

    getData() {

      return new Promise((res) => {

        setTimeout(() => {

          res({

            'aaa  111111': {

              series: ['人文社区', '娱乐版块', '美食', '美景'],

              datas: [

                {

                  series: ['下载量', '浏览量'],

                  data: ['133', '122'],

                },

                {

                  series: ['下载量', '浏览量'],

                  data: ['33', '22'],

                },

                {

                  series: ['下载量', '浏览量'],

                  data: ['13', '12'],

                },

                {

                  series: ['下载量', '浏览量'],

                  data: ['333', '522'],

                },

              ],

              browsers: {

                series: ['ABC', 'AAA', 'BBB', 'CCC'],

                datas: [

                  {

                    dataS: [14, 15, 16, 17],

                  },

                ],

              },

            },

            'bbb  222222': {

              series: ['人文社区', '汽车', '美食', '美景'],

              datas: [

                {

                  series: ['下载量', '浏览量', '评论'],

                  data: ['133', '122', '13'],

                },

                {

                  series: ['下载量', '浏览量', '评论'],

                  data: ['33', '22', '12'],

                },

                {

                  series: ['下载量', '浏览量', '评论'],

                  data: ['13', '12', '12'],

                },

                {

                  series: ['下载量', '浏览量', '评论'],

                  data: ['333', '522', '10'],

                },

              ],

              browsers: {

                series: ['ABC', 'AAA', 'BBB', 'CCC'],

                datas: [

                  {

                    dataS: [14, 15, 16, 17],

                  },

                ],

              },

            },

            'ccc  333333': {

              series: ['人文社区', '明星', '美食', '美景'],

              datas: [

                {

                  series: ['下载量', '浏览量'],

                  data: ['133', '122'],

                },

                {

                  series: ['下载量', '浏览量'],

                  data: ['33', '22'],

                },

                {

                  series: ['下载量', '浏览量'],

                  data: ['13', '12'],

                },

                {

                  series: ['下载量', '浏览量'],

                  data: ['33', '22', '2'],

                },

              ],

              browsers: {

                series: ['ABC', 'AAA', 'BBB', 'CCC'],

                datas: [

                  {

                    dataS: [14, 15, 16, 17],

                  },

                ],

              },

            },

          });

        }, 300);

      });

    },

    //缓存key到内存里面 方便搜索调用

    hashKey(data) {

      Object.keys(data).forEach((v) => {

        let sp = v.split('  ');

        this.list_1.push({ label: sp[0], value: sp[0] });

        this.list_2.push({ label: sp[1], value: sp[1] });

      });

    },

    //名称搜索提示

    search_1(str, cb) {

      let res = str ? this.list_1.filter((item) => ~item.value.toLowerCase().indexOf(str.toLowerCase())) : this.list_1;

      cb(res); // 调用 callback 返回建议列表的数据

    },

    search_2(str, cb) {

      let res = str ? this.list_2.filter((item) => ~item.value.toLowerCase().indexOf(str.toLowerCase())) : this.list_2;

      cb(res); // 调用 callback 返回建议列表的数据

    },

    //初始化echarts绘图的dom

    initChart() {

      this.myChart_1 = echarts.init(this.$refs.myChart_1);

      this.myChart_2 = echarts.init(this.$refs.myChart_2);

    },

    //获取到的data进行绘图

    drawChart_1() {

      let data = this.data[this.selected_key];

      let chartData = []; //图表数据

      let seriesName = data.datas[0].series; //各个series的名字

      //转换一下数据

      data.series.forEach((v, i) => {

        chartData.push([v, ...data.datas[i].data]);

      });

      let series = [

        {

          name: seriesName[0],

          type: 'bar',

          itemStyle: {

            color: '#00a3eb',

          },

        },

        {

          name: seriesName[1],

          type: 'bar',

          itemStyle: {

            color: '#23af4c',

          },

          barGap: 0,

        },

      ];

      //三个列的情况

      if (chartData[0].length === 4) {

        series.push({

          name: seriesName[2],

          type: 'bar',

          itemStyle: {

            color: '#fef303',

          },

        });

      }

      //echarts 配置项

      let option = {

        tooltip: {

          trigger: 'axis',

          axisPointer: {

            type: 'cross',

            crossStyle: {

              color: '#999',

            },

          },

        },

        legend: {

          data: seriesName,

          bottom: 0,

        },

        xAxis: [

          {

            type: 'category',

            axisPointer: {

              type: 'shadow',

            },

          },

        ],

        yAxis: {

          type: 'value',

        },

        dataset: {

          sourceHeader: false,

          source: chartData,

        },

        series: series,

      };

      //绘图

      this.myChart_1.setOption(option, true);

      //自适应

      window.onresize = () => {

        this.myChart_1.resize();

      };

    },

    //绘制饼图

    drawChart_2() {

      let data = this.data[this.selected_key].browsers;

      let chartData = []; //图表数据

      //转换一下数据

      data.series.forEach((v, i) => {

        chartData.push({

          value: data.datas[0].dataS[i],

          name: v,

        });

      });

      //echarts 配置项

      let option = {

        tooltip: {

          trigger: 'item',

        },

        legend: {

          data: data.series,

          bottom: 0,

        },

        series: [

          {

            type: 'pie',

            radius: '50%',

            data: chartData,

            label: {

              formatter: '{b}: {d}%',

            },

            emphasis: {

              itemStyle: {

                shadowBlur: 10,

                shadowOffsetX: 0,

                shadowColor: 'rgba(0, 0, 0, 0.5)',

              },

            },

          },

        ],

      };

      //绘图

      this.myChart_2.setOption(option, true);

      //自适应

      window.onresize = () => {

        this.myChart_2.resize();

      };

    },

    //重新绘制数据

    changeData() {

      if (this.select_1 === '') {

        this.$message.error('请输入名称');

        return;

      }

      if (this.select_2 === '') {

        this.$message.error('请输入名字');

        return;

      }

      this.selected_key = this.select_1 + '  ' + this.select_2;

      if (!(this.selected_key in this.data)) {

        this.$message.error(this.selected_key + '查询数据失败');

        return;

      }

      this.drawChart_1();

      this.drawChart_2();

    },

  },

  mounted() {

    this.initChart();

    this.getData().then((e) => {

      this.data = e;

      this.hashKey(e);

      //初始化显示第一个人的数据

      this.selected_key = 'aaa  111111';

      this.drawChart_1();

      this.drawChart_2();

    });

  },

};

</script>

<style>

.chart {

  margin: 20px auto;

  width: 80%;

  height: 600px;

}

.main {

  display: flex;

  width: 100%;

  gap: 10px;

  margin-top: 80px;

}

.main > div {

  width: calc(50%);

}

</style>

码者_荣耀
关注
echarts visualmap属性详解_echarts画图
weixin_35971708的博客
01-19 9261
”明月如霜，好风如水，清景无限“想画出最炫酷的图，用matplotlib还是很难的，不是无法完成，而是过于繁琐。之前也尝试过plotly画图，也是属于交互性的图，即可以保存成本地的html。先看一下echarts模板吧。具体的网址：https://echarts.apache.org/examples/zh/index.html#chart-type-pie ...
Flex_4系统组件：图表
04-11
“工具”标签则暗示可能会讨论到使用图表的开发工具，如Flash Builder或IntelliJ IDEA，这些工具通常提供图形用户界面，方便开发者直观地拖拽和配置图表组件，生成对应的MXML或ActionScript代码。 在压缩包中的“第...
关于Echarts柱状图点击事件的实现方法charsjs柱状图点击事件
weixin_40351820的博客
05-27 880
关于Echarts柱状图点击事件的实现方法 charsjs柱状图点击事件 ajax请求数据 var chartDom = document.getElementById('riskmain'); var myChart = echarts.init(chartDom); var option; /*柱状图 绑定事件 */ myChart.on('click', function (params) { console.log(params) //级别 console.log(para
让bug无处藏身，Java 线上问题排查神器，你学废了吗？
Java笔记虾
04-09 520
点击关注公众号，利用碎片时间学习本文总结了一些常见的线上应急现象和对应排查步骤和工具。分享的主要目的是想让对线上问题接触少的同学有个预先认知，免得在遇到实际问题时手忙脚乱。只不过这里先提示一下。在线上应急过程中要记住，只有一个总体目标：尽快恢复服务，消除影响。不管处于应急的哪个阶段，我们首先必须想到的是恢复问题，恢复问题不一定能够定位问题，也不一定有完美的解决方案，也许是...
数据分析系列之一常见数据分析方法-你学废了吗？
weixin_43813200的博客
05-30 655
数据分析常见方法关联分析漏斗分析法帕累托分析法RFM 分析留存分析法分组分析法矩阵分析法指标分析法对比分析法聚类分析判别分析主成分分析因子分析时间序列分析生存分析典型相关分析R0C分析信度分析假设检验描述统计细分分析法画像分析法AB测试其他分析方法 关联分析 基本作用： 推断商品之间的商品关联关系 实现方法： Apriori 关联分析和关联规则 Eclat 关联分析 FP-tree 关联 漏斗分析法 基本作用： 转化漏斗模型，是分析用户使用某
学废Laravel（基础知识）
weixin_45429409的博客
06-14 527
学废Laravel（基础知识）1：配置Laravel环境1.1：搭建php环境（不细说）功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片删除线格式如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 1：配置Laravel环境 介绍下Laravel的入门基础知识【持续更新】 1.1：
一行代码搞定数据分析——pandas_profiling
GODSuner的博客
11-09 953
数据分析神器——pandas_profiling 本文首发于微信公众号《Python希望社》，点击这里就可查看完整全文。欢迎关注，定时持续更新python学习干货 对于从事数据科学相关行业的人员来说，如何简单高效地实现对数据集的初步分析是后续一切工作的重要基础。今天我们就为大家介绍一种基于python的数据分析神器——pandas_profiling 本文构成大纲如下图所示，全文约2000字，完成阅读约2分钟。文本有惊喜哦~ #mermaid-svg-JupG7Q37kMqoDtNL .label{fo
【Python】在同一图形中更加优雅地绘制多个子图
sgzqc的专栏
06-18 1477
我相信在单个图形中绘制多个图形有助于对比和提升可视化效果的目的，拥有一种使其更简洁的方法会提升很大的效果，推荐大家多多使用。您学废了嘛？
一文弄懂Seaborn绘制热力图
sgzqc的专栏
04-17 3933
Python中利用Seaborn绘制热力图
jmeter监听器你真的会用了吗？每天早下班1小时的技巧来了~
人生不怕起点低，就怕没追求
11-19 804
使用过 jmeter 的同学，应该都会使用监听器，在每个监听器中，都会有一个“所有数据写入一个文件”的功能，那这个功能应该怎么用呢？今天，我们就来讲讲这个功能的使用。 几乎所有的监听器都有这样一个功能。 那对于这个监听器都带有的功能，到底该怎么用呢？ 点击“浏览”按钮，会弹出系统的文件选择窗口 我们可以从弹窗的文件类型中看到，支持的文件类型有三种：XML、jtl、CSV。 其实，jmeter 还支持一种：.db 只是，这种类型很少被用了。 也就是说，我们选择写入的文件类型有三种选择。其中，CSV 是 .
fchart_pb9_pb_DEMO_图表_
10-02
此外，PowerBuilder 9的图表组件通常支持数据绑定，这意味着它们可以直接连接到数据库，自动根据查询结果生成图表，这对于企业级应用来说是一个非常实用的功能。 总结来说，"fchart_pb9_pb_DEMO_图表_"是一个关于...
Dynamic-Data-Chart.zip_VB图表_chart_vb 数据采集_vb 图表_图表
09-19
标题“Dynamic-Data-Chart.zip_VB图表_chart_vb 数据采集_vb 图表_图表”暗示了这是一个关于如何使用VB来构建一个能够实时更新、动态缩放并可以通过方向键进行移动的图表的项目。下面我们将详细讨论相关的知识点。 ...
all_show_picture.rar_delphi 图表_delphi 数据库 图_show_图表
09-24
8. **254 将数据库中的内容以图表的方式显示出来**：这可能是一个具体的代码示例或程序步骤，具体的内容需要查看对应的源代码文件才能了解。 综上所述，这个Delphi项目展示了如何利用Delphi的数据库连接能力、图表...
EChartsDemo_wpfchart_WPFEchart图表控件_wpfchart_WPF图表_DEMO_
09-29
这通常通过NuGet包管理器完成，搜索并安装相应的包，然后在XAML文件中引用对应的命名空间。 2. **XAML布局**：在XAML文件中，你需要定义一个`<echarts:Chart>`元素，这是WPFEchart控件的基本容器。你可以设置其宽度...
硅谷甄选（11）角色管理
weixin_74428381的博客
10-31 460
props：属性： label：指定节点标签为节点对象的某个属性值 children:指定子树为节点对象的某个属性值。获取已分配权限的id，这里我们只需要收集最后一层的id即可，因为组件会自动更具最后一层的选择情况决定上层的选择状况。还是熟悉的组件：el-card、el-table 、el-pagination、el-form。default-checked-keys：默认勾选的节点的 key 的数组。node-key：每个树节点用来作为唯一标识的属性，整棵树应该是唯一的。:model：要校验的数据。
vue + elementui 全局Loading效果
叶子的博客
10-30 446
后台项目有时候响应时间等待长，想加一个覆盖页面的loading效果
el-table 多选默认选中（根据返回的id给数据加默认选中状态）
最新发布
qq_43557848的博客
10-31 179
el-table是我们最常用的展示数据的方式，但是有时候需要用到多选来选择数据，新增数据的时候还好，选中状态都是正常的，但是修改就遇到问题，需要对这个已经选择过的数据加上默认的选中状态，本次就是解决这个问题。通过ref这个来解决。注意点：setDefaultSelection函数的使用时机，一定要是有singleTable这个ref生效之后在调用，要是这个ref没有生效，这个函数就没有意义了。基本上所有的后端返回的数据都是有一个id的，要是没有用就用index来代替，没有id方便。
el-datepicker此刻按钮点击失效
bao
10-30 665
此刻按钮失效原因是：做了禁用未来日期处理
elementUI table 多级表头隔行变背景颜色
M40153c的博客
10-29 524
如 rowIndex == 0， columnIndex == 1 的意思为多级表头的第一行中的第二列 指在上效果图中。如 rowIndex == 1， columnIndex == 2 的意思为多级表头的第二行中的第三列 指在上效果图中。其中rowIndex == 0 意思为多级表头的第一行，columnIndex == 0 意思为某一行的第一列。
PHPlot PHP图表程序实例详解
2. 示例代码文件：描述中提到的实例代码，用于演示如何使用Phplot生成不同类型的图表。 3. 配置文件：可能包括数据库连接配置、库文件路径配置等。 4. 依赖文件：若Phplot使用了其他PHP扩展或库，这些依赖文件也会...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值