echarts+DataV的用法

最新推荐文章于 2024-03-20 11:33:11 发布
最新推荐文章于 2024-03-20 11:33:11 发布
阅读量3.6k 收藏 16
点赞数 1
文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53986004/article/details/127426551
版权

2022.10.20我学会如何使用echarts+DataV的使用。以下是效果图：

目录如下：

 

 

一、安装组件库 

首先我们先安装组件库。

npm install @jiaminghi/data-view

二、main.js引入组件 

 然后在main.js中引入组件。

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

三、把初始页面作为主页面 

 我们把HomeView.vue页面作为主页面。

（1）添加全屏容器

先设置全屏容器。

<dv-full-screen-container>content</dv-full-screen-container>

使用前请注意将body的margin设为0，否则会引起计算误差，全屏后不能完全充满屏幕。

（2）添加loading加载效果

然后在全屏容器中放入一个loading试一下效果。

   <dv-full-screen-container>
       //loading加载中
      <dv-loading>Loading...</dv-loading>
   </dv-full-screen-container>

（3）添加边框 

然后就是添加边框。

  <dv-full-screen-container>
       //loading加载中
      <dv-loading>Loading...</dv-loading>

       //添加边框
      <dv-border-box-11 title="大数据可视化" >
      </dv-border-box-11>
   </dv-full-screen-container>

做到这边的效果为

loading我就没展示了。

然后可以给loading一个条件渲染，就是在加载之后可以显示出这个页面。

给loading一个v-if=”loading“，边框为else，然后data数据里面填loading=true，添加mounted页面加载后的方法。

  <dv-loading v-if="loading">Loading...</dv-loading>
<div v-else class="zhengti">
// 页面加载后
  mounted(){
    // 执行这个方法
    this.guanbiLoading();

  },
 data() {
    return {
      // loading默认打开
      loading: true,
    };
  },

 

然后在methods中调用这个方法。

 methods: {
    // mounted执行后调用的方法
    guanbiLoading(){
      // setTimeout()指定时间后调用的函数，时间为3000毫秒
      setTimeout(()=>{
        this.loading = false;
      },1000)
    }
  },

具体就是在指定事件之后关闭这个loading。

（4）创建一个新的vue页面

  <div class="zuo"><dv-border-box-10 style="width:400px;height:600px;background-color:#343440"><zuo /></dv-border-box-10></div>

可以让它用一个边框包裹住，里面的展示方法类似于<router-view></router-view>

（5）注册引入这个页面

// 引入组件
import zuo from './zuo.vue'
 components:{
    zuo
  },

这样等一下在新的vue页面中的效果就可以在<zuo/>中进行展示。

（6）编写新的vue页面代码

echarts的编写需要在components中写（相当于子组件），views是用来展示这个效果的（相当于父组件）

我们在view中创建新的页面。因为是用来展示echarts的，所以代码直接上。

<template>
  <div>
    <div class="biaoti">
      <!-- 设置标题 -->
      <h4 style="color: skyblue">任务通过率</h4>
      <!-- 动画 -->
      <dv-decoration-3 style="width: 250px; height: 30px" />
    </div>
    <div>
      <!-- 展示echarts页面 -->
      <zuoecharts />
    </div>
    <div class="waibu">
      <!-- 列表渲染数据 -->
      <div class="item-box" v-for="(item, index) in numberData" :key="index">
        <div class="neibu">

          <span style="color: yellow; font-size: 30px; margin-left: 30px"
            >￥</span
          >
          <!-- 动态数字 -->
          <!-- :config是datav绑定动态数据的方式 -->
          <dv-digital-flop
            :config="item.number"
            style="width: 100px; height: 50px;margin-left:-10px"
          />

        </div>
        <!-- 文字 -->
        <p class="text" style="text-align: center;color:white">
          {{ item.text }}

          <span style="color: yellow">(件)</span>
        </p>
      </div>
    </div>
   
  </div>
</template>

<script>
// 引入components中的组件
import zuoecharts from "@/components/echarts/zuoecharts";

export default {
  data() {
    return {
      numberData: [
        {
          number: {
            number: [15],
            toFixed: 1,
            // data中的写法
            content: "{nt}",
          },
          text: "今日构建总量",
        },
        {
          number: {
            number: [1144],
            toFixed: 1,
            // data中的写法
            content: "{nt}",
          },
          text: "总共完成数量",
        },
        {
          number: {
            number: [361],
            toFixed: 1,
            // data中的写法
            content: "{nt}",
          },
          text: "正在编译数量",
        },
        {
          number: {
            number: [157],
            toFixed: 1,
            // data中的写法
            content: "{nt}",
          },
          text: "未通过数量",
        },
      ],
    };
  },
  
  // 注册组件
  components: {
    zuoecharts,
  },
  // 页面加载后
  mounted() {
    this.changeTiming();
  },

  methods: {
    changeTiming() {

      // setInterval指定事件间隔调用函数
      setInterval(() => {
        this.changeNumber();
      }, 3000);
    },

    // 调用changeNumber方法
    changeNumber() {

      // forEach列出数组的每一个元素
      this.numberData.forEach((item, index) => {
        item.number.number[0] += ++index;
        item.number = { ...item.number };

      });
    },
  },
  
};
</script>

<style>
.biaoti {
  display: flex;
  justify-content: center;
  align-items: center;
}
.waibu {
 
  margin-top: -70px;
  margin-left: 20px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.neibu {
  width: 180px;
  display: flex;
 min-width: calc(100%/2);
}
</style>

这边引入的组件是components子组件里面的内容。所以总共需要引入两次组件（view => 主页main ）(components => view)

（7）编写components建立新页面

<template>
  <div id="main" style="width: 600px; height: 400px"></div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: null,
    };
  },
  mixins: [echartMixins],

  // 页面加载后
  mounted() {
    this.zuo();
  },
  methods: {
    // 页面加载成功之后调用
    zuo() {
      this.chart = this.$echarts.init(document.getElementById("main"));
      this.chart.setOption({
        // 设置颜色依次使用
        color: [
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
          "#e7bcf3",
          "#8378ea",
        ],

        // 提示框
        tooltip: {
          //trigger 触发类型,默认数据触发
          trigger: "item",
          //formatter 调用自定义的数据
          formatter: "{a}<br/>{b} :{c}({d}%)",
        },

        // 可视化的工具箱
        toolbox: {
          show: true,
        },

        // 开关
        legend: {
          // orient布局方式 horizontal默认为水平布局
          orient: "horizontal",

          //   x为水平安放位置
          x: "center",

          //   下边距离
          bottom: 80,

          //   左边距离
          left: 80,

          //   按钮样式为圆形
          icon: "circle",

          //   宽度三个为一行
          width: "33.33%",

          //   设置数据
          data: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
         
          // textStyle 图例文字颜色
          textStyle: {
            color: "#fff",
          },
        },

        // 系列
        series: [
          {
            // 名字
            name: "增值电信业务统计图",
            
            // 类型
            type: "pie",
            
            // 整体大小
            radius: [20, 100],

            // roseType设置比例
            roseType: "area",

            // 左右 上下距离
            center: ["30%", "40%"],

            // 存放数据
            data: [
              {
                value: 10,
                name: "rose1",
              },
              {
                value: 5,
                name: "rose2",
              },
              {
                value: 15,
                name: "rose3",
              },
              {
                value: 25,
                name: "rose4",
              },
              {
                value: 20,
                name: "rose5",
              },
              {
                value: 35,
                name: "rose6",
              },
            ],
          },
        ],
      });
    },

    // 实例销毁
    destoryed() {
        // onresize删除绑定事件
      window.onresize = null;
    },
  },
};
</script>

<style>
</style>

这里面要注意的几点是建立DOM容器，然后获取id，都是mounted页面加载之后显示出这个页面的效果。echartsMinis的样式我在后面会放出来。

（8）完整代码

.1主页面

// 主页面
<template>
  <div>
    <!-- 全屏使用容器 -->
    <dv-full-screen-container>
      <!-- 加载中 -->
      <!-- v-if判断loading是否为true -->
      <dv-loading v-if="loading">Loading...</dv-loading>

      <!-- loading为false时触发 -->
      <!-- zhengti布局 -->
      <div v-else class="zhengti">
        <!-- 设置标题 -->
       
        <dv-border-box-11 title="大数据可视化" >
          <!-- 左页面展示 -->
          <dv-decoration-1 style="width:200px;height:50px;" />
          <div class="zuo"><dv-border-box-10 style="width:400px;height:600px;background-color:#343440"><zuo /></dv-border-box-10></div>
        
          <!-- 中间页面展示 -->
          <!-- <div class="center"><center/></div> -->

          <!-- 右页面展示 -->
          <!-- <div class="you"><you/></div> -->
        </dv-border-box-11>
        
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
// 引入组件
import zuo from './zuo.vue'
import center from './center.vue'
import you from './you.vue'

export default {
  data() {
    return {
      // loading默认打开
      loading: true,
    };
  },

  // 注册组件
  components:{
    zuo,
    center,
    you
  },

// 页面加载后
  mounted(){
    // 执行这个方法
    this.guanbiLoading();

  },
  methods: {
    // mounted执行后调用的方法
    guanbiLoading(){
      // setTimeout()指定时间后调用的函数，时间为3000毫秒
      setTimeout(()=>{
        this.loading = false;
      },1000)
    }
  },
};
</script>

<style>
body {
  margin: 0;
}
.zhengti {
  height: 100%;
}

</style>

.2view 下的新页面

<template>
  <div>
    <div class="biaoti">
      <!-- 设置标题 -->
      <h4 style="color: skyblue">任务通过率</h4>
      <!-- 动画 -->
      <dv-decoration-3 style="width: 250px; height: 30px" />
    </div>
    <div>
      <!-- 展示echarts页面 -->
      <zuoecharts />
    </div>
    <div class="waibu">
      <!-- 列表渲染数据 -->
      <div class="item-box" v-for="(item, index) in numberData" :key="index">
        <div class="neibu">

          <span style="color: yellow; font-size: 30px; margin-left: 30px"
            >￥</span
          >
          <!-- 动态数字 -->
          <!-- :config是datav绑定动态数据的方式 -->
          <dv-digital-flop
            :config="item.number"
            style="width: 100px; height: 50px;margin-left:-10px"
          />

        </div>
        <!-- 文字 -->
        <p class="text" style="text-align: center;color:white">
          {{ item.text }}

          <span style="color: yellow">(件)</span>
        </p>
      </div>
    </div>
   
  </div>
</template>

<script>
// 引入components中的组件
import zuoecharts from "@/components/echarts/zuoecharts";

export default {
  data() {
    return {
      numberData: [
        {
          number: {
            number: [15],
            toFixed: 1,
            // data中的写法
            content: "{nt}",
          },
          text: "今日构建总量",
        },
        {
          number: {
            number: [1144],
            toFixed: 1,
            // data中的写法
            content: "{nt}",
          },
          text: "总共完成数量",
        },
        {
          number: {
            number: [361],
            toFixed: 1,
            // data中的写法
            content: "{nt}",
          },
          text: "正在编译数量",
        },
        {
          number: {
            number: [157],
            toFixed: 1,
            // data中的写法
            content: "{nt}",
          },
          text: "未通过数量",
        },
      ],
    };
  },
  
  // 注册组件
  components: {
    zuoecharts,
  },
  // 页面加载后
  mounted() {
    this.changeTiming();
  },

  methods: {
    changeTiming() {

      // setInterval指定事件间隔调用函数
      setInterval(() => {
        this.changeNumber();
      }, 3000);
    },

    // 调用changeNumber方法
    changeNumber() {

      // forEach列出数组的每一个元素
      this.numberData.forEach((item, index) => {
        item.number.number[0] += ++index;
        item.number = { ...item.number };

      });
    },
  },
  
};
</script>

<style>
.biaoti {
  display: flex;
  justify-content: center;
  align-items: center;
}
.waibu {
 
  margin-top: -70px;
  margin-left: 20px;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.neibu {
  width: 180px;
  display: flex;
 min-width: calc(100%/2);
}
</style>

.3components下的新页面

<template>
  <div id="main" style="width: 600px; height: 400px"></div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
export default {
  data() {
    return {
      chart: null,
    };
  },
  mixins: [echartMixins],

  // 页面加载后
  mounted() {
    this.zuo();
  },
  methods: {
    // 页面加载成功之后调用
    zuo() {
      this.chart = this.$echarts.init(document.getElementById("main"));
      this.chart.setOption({
        // 设置颜色依次使用
        color: [
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#fb7293",
          "#e7bcf3",
          "#8378ea",
        ],

        // 提示框
        tooltip: {
          //trigger 触发类型,默认数据触发
          trigger: "item",
          //formatter 调用自定义的数据
          formatter: "{a}<br/>{b} :{c}({d}%)",
        },

        // 可视化的工具箱
        toolbox: {
          show: true,
        },

        // 开关
        legend: {
          // orient布局方式 horizontal默认为水平布局
          orient: "horizontal",

          //   x为水平安放位置
          x: "center",

          //   下边距离
          bottom: 80,

          //   左边距离
          left: 80,

          //   按钮样式为圆形
          icon: "circle",

          //   宽度三个为一行
          width: "33.33%",

          //   设置数据
          data: ["rose1", "rose2", "rose3", "rose4", "rose5", "rose6"],
         
          // textStyle 图例文字颜色
          textStyle: {
            color: "#fff",
          },
        },

        // 系列
        series: [
          {
            // 名字
            name: "增值电信业务统计图",
            
            // 类型
            type: "pie",
            
            // 整体大小
            radius: [20, 100],

            // roseType设置比例
            roseType: "area",

            // 左右 上下距离
            center: ["30%", "40%"],

            // 存放数据
            data: [
              {
                value: 10,
                name: "rose1",
              },
              {
                value: 5,
                name: "rose2",
              },
              {
                value: 15,
                name: "rose3",
              },
              {
                value: 25,
                name: "rose4",
              },
              {
                value: 20,
                name: "rose5",
              },
              {
                value: 35,
                name: "rose6",
              },
            ],
          },
        ],
      });
    },

    // 实例销毁
    destoryed() {
        // onresize删除绑定事件
      window.onresize = null;
    },
  },
};
</script>

<style>
</style>

.4 units.js文件

1）index.js文件

export function debounce(func, wait, immediate) {
  let timeout, args, context, timestamp, result;

  const later = function() {
    // 据上一次触发时间间隔
    const last = +new Date() - timestamp;

    // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
    if (last < wait && last > 0) {
      timeout = setTimeout(later, wait - last);
    } else {
      timeout = null;
      // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
      if (!immediate) {
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      }
    }
  };

  return function(...args) {
    context = this;
    timestamp = +new Date();
    const callNow = immediate && !timeout;
    // 如果延时不存在，重新设定延时
    if (!timeout) timeout = setTimeout(later, wait);
    if (callNow) {
      result = func.apply(context, args);
      context = args = null;
    }

    return result;
  };
}

2）resizeMixins.js文件

// 混入代码 resize-mixins.js
import { debounce } from '@/utils/index';
const resizeChartMethod = '$__resizeChartMethod';

export default {
  data() {
    // 在组件内部将图表init的引用映射到chart属性上
    return {
      chart: null,
    };
  },
  created() {
    window.addEventListener('resize', this[resizeChartMethod], false);
  },
  beforeDestroy() {
    window.removeEventListener('reisze', this[resizeChartMethod]);
  },
  methods: {
    // 通过lodash的防抖函数来控制resize的频率
    [resizeChartMethod]: debounce(function() {
      if (this.chart) {
        this.chart.resize();
      }
    }, 100),
  },
};

.5main.js文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import dataV from '@jiaminghi/data-view'
//引入echart
import  * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

Vue.use(dataV)
Vue.prototype.$ajax= axios

Vue.config.productionTip = false


new Vue({
  router,
  store,
  axios,
  render: function (h) { return h(App) }
}).$mount('#app')

敲代码无敌小奶龙
关注
  • 1
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
react+datav+echarts实现可视化数据大屏
m0_58002043的博客
12-14 2万+
最近有点闲，就学习了下react，没想到就把react学完了，觉得还不错，就打算出一把react+datav的简易版可视化数据大屏供大家做个参考。 📓 datav框架 📓 echarts 2，路由设计 📓在路由上，我是绑定一个index的路由作为组件，然后在index添加自适应的全局容器，当容器设置完成后，就在就在将其他的小的模块给一个个导入进来，
大屏可视化vue+dataV+echarts
06-03
大屏可视化vue+dataV+echarts
vue3+datav+echarts可视化数据大屏 （适配各种尺寸屏幕！）
最新发布
m0_58002043的博客
03-20 1934
屏幕适配放弃了rem 方案，使用更通用的css3：scale缩放方案，项目的基准尺寸是1920px*1080px，所以支持用比例屏幕 100% 填充，如果非同比例则会自动计算比例居中填充，不足的部分则留白。得适配方案不能试图您的场景，则可以自行修改方案
echarts与dataV实现前端看板
weixin_44316674的博客
12-03 3156
文章目录前言一、ui图二、分析三、实现1.dataV轮播总结 前言 echarts与dataV作为看板开发模板，以本次项目为例，逐一实现项目中的难点问题 一、ui图 首先这是ui图，也就是本次项目要实现的目标 二、分析 ui图中有大致五个区域，其中四个区域为轮播，也就是月度计划中的进度条，日计划的表格，以及下方的柱状图和饼图左右轮播。 三、实现 1.dataV轮播 这算是本次项目中最简单的一环，作为优秀的可视化ul组件，dataV给我们创造了很多便利，代码如下： const config = {.
vue3+DataV+Echarts搭建数据大屏模板(建议收藏)
商务合作/软件定制/学习交流
03-10 9818
Vue3+TS+DataV+Echarts搭建数据大屏模板
vue使用datav+echarts
qq_53485256的博客
11-16 1903
vue使用datav+echarts
一个基于 vue、datav、Echart 框架的大数据可视化（大屏展示）模板.zip
06-27
一个基于 vue、datav、Echart 框架的大数据可视化（大屏展示）模板.zip
DataV+Echarts
努力不被AI代替的小杨
04-09 1538
dataV+echarts+vue2 学习 前端真的难！！！！
Dva: loading模块引入及实践
Lachesis_的博客
11-23 1286
dva 中页面过渡效果封装的很好，下面介绍常用的两个 js 库。 之前对 dva-loading 理解存在误区，认为只要在 index.js 中配置一下就没事了，事实上 dva-loading 只是提供当前异步加载方法的状态（异步加载中状态为 true，异步加载完成状态为 false），对应加载样式由各自组件自己控制，如：Antd 中 Table 组件自身的 loading 属性。并添加完整流程示例代码。 一、过渡组件 dva-loading 传统做法 比如请求一个用户页面，刚进去的时候由于要去服务器请求数
echarts、dataV 数据可视化大屏
热门推荐
CSSAJBQ_的博客
05-01 1万+
一、项目描述 （包含echarts中国地图、dataV科技炫酷边框等等） 一个基于 Vue、Datav、Echart 框架的 " 数据大屏项目 "，通过 Vue 组件实现数据动态刷新渲染，内部图表可实现自由替换。部分图表使用 DataV 自带组件， 组件库基于Vue （React版） ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用。 项目环境：Vue-cli、DataV、Echarts、node 友情链接： Vue 官 方文档 Vue CLI DataV 官方文档
vue全局注册v-dvloading指令实现指定元素loading效果+批量注册v-xxx指令
放弃不难，但坚持一定很酷！
05-10 509
在做可视化大屏时发现很多图后端响应时间过长为了达到用户体验效果好需要给每个图表添加一个loading效果，但是每一个组件都要写一个 Loading... 还要判断啥时候显示与隐藏但时候想换个loading组件的话还要一个个改 有什么方法可以全局使用像elementui那样v-loading就可以使用 这里使用注册自定义指令实现。3.在utils下创建一个defdirective.js的组件用于定义全局所有的自定义指令。
基于vue2+echarts+datav的大屏可视化模板源代码
09-14
基于vue2+echarts+datav的大屏可视化模板源代码
flask+echarts+jinjia2考研数据可视化
06-26
该资料包含项目爬取数据源码、数据解析、echarts数据可视化、大屏展示等。经过多次测试无bug可放心使用！！！
vue+echarts+DataV，数据可视化系统.zip
06-09
vue+echarts+DataV，数据可视化系统.zip
vue+echarts+DataV数据可视化系统源码.zip
06-08
vue+echarts+DataV数据可视化系统源码.zip
基于echarts+datav+vue2实现的一个大屏可视化项目模版
03-02
。datav的组件。其中使用的插件 echarts datav elementui vue2的插件。并实时获取当前日期时间，精确到秒数。更有全屏组件功能，自适应组件功能。一款非常适用于各种大屏可视化项目所需要的功能
33.大数据可视化技术--datav、echarts
零零天
01-21 5869
可视化概述 Echarts 上一篇 32.python爬虫入门
DataV接入ECharts图表库 可视化利器强强联手
weixin_33901843的博客
06-20 1071
DataV 数据可视化是搭建每年天猫双十一作战大屏的幕后功臣，ECharts 是广受数据可视化从业者推崇的开源图表库。从今天开始，DataV 企业版接入了 ECharts 图表组件，当你使用 DataV 搭建可视化项目时，可以轻松地插入 ECharts，这意味着更丰富多样的图表效果，也让编程小白们可以通过图形界面而非代码配置 ECharts。 DataV...
ECharts与DataV：数据可视化的得力助手
letterljhx的博客
11-24 1074
ECharts与DataV：数据可视化的得力助手
POST /a/search.php HTTP/1.1 Host: 61.144.226.196:8101 User-Agent: Mozilla/5.0 (Windows NT 10.0; rv:78.0) Gecko/20100101 Firefox/78.0 Content-Length: 221 Accept-Encoding: gzip Content-Type: application/x-www-form-urlencoded S-Cnection: close
07-11
根据您提供的信息，这似乎是一个 HTTP POST 请求的示例。 请求行： 方法：POST 路径：/a/search.php 协议版本：HTTP/1.1 请求头部： Host: 61.144.226.196:8101 User-Agent: Mozilla/5.0 (Windows NT 10.0; rv:78.0) Gecko/20100101 Firefox/78.0 Content-Length: 221 Accept-Encoding: gzip Content-Type: application/x-www-form-urlencoded S-Cnection: close 请求体： 在您提供的信息中没有包含请求体的具体内容。请求体通常包含要发送给服务器的数据，根据 Content-Type 的值可以决定数据的编码方式。 请注意，这只是根据您提供的信息进行的初步解释。如果您有更详细的问题或需要进一步了解，请随时提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

敲代码无敌小奶龙

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

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

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

打赏作者

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

抵扣说明：

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

余额充值