横向的echarts表格。vue版

最新推荐文章于 2024-08-02 17:01:38 发布
最新推荐文章于 2024-08-02 17:01:38 发布
阅读量603 收藏
点赞数
文章标签： echarts vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/happynicey/article/details/126919170
版权

一个横向的echarts表格

<template>
  <div
    :ref="widgetConfig.echartContainerId"
    class="doubleBarChartContainer"
  ></div>
</template>

<script>
import {
  addDomResizeListener,
  removeResizeListener,
} from "@/bi-core/utils/screenUtil";

export default {
  name: "DoubleBarChart",
  data() {
    return {
      chartData: [],
      chart: null,
      echartOption: {},
      widgetConfig: {
        echartContainerId: "bar-chart",
        option: {},
      },
    };
  },
  watch: {
    chartData() {
      this.setData();
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initEchart();
      this.setData();
      addDomResizeListener(
        this.$refs[this.widgetConfig.echartContainerId],
        () => {
          this.chart.resize();
        }
      );
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
    removeResizeListener(
      this.$refs[this.widgetConfig.echartContainerId],
      function () {}
    );
  },
  methods: {
    initEchart() {
      const opt = { index: 0 };
      this.chart = this.$echarts.init(
        this.$refs[this.widgetConfig.echartContainerId]
      );
      this.echartOption = {
        grid: {
          top: 20,
          bottom: 20,
          right: 60,
          left: -70,
          containLabel: true,
        },
        legend: {
          x: "center",
          y: "1%",
          orient: "horizontal",
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            color: "#FFFFFF",
            fontSize: 14,
            fontFamily: "PingFang SC",
            fontWeight: "400",
          },
          selectedMode: false, // 不允许点击
          data: [
            {
              name: "接口",
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(22, 90, 183, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(181, 255, 228, 0.5)", // 50% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(181, 255, 228, 1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            {
              name: "库表",
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(22, 90, 183, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(135, 219, 255, 0.5)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(135, 219, 255, 1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
            {
              name: "文档",
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(255, 138, 0, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(255, 229, 135, 0.5)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 229, 135, 1)", // 100% 处的颜色
                    },
                  ],
                  global: false, // 缺省为 false
                },
              },
            },
          ],
        },
        xAxis: {
          show: true,
          splitNumber: 6,
          //data:[0,200,400,600,800,1000],
          min: 0,
          max: 1000,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(230, 247, 255, 0.2)",
              opacity: 0.2,
            },
          },
        },
        yAxis: [
          {
            show: true,
            inverse: true,
            data: [],
            axisLine: {
              show: true,
              //onZero: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
           // boundaryGap: true,
            //scale: true,
            axisLabel: {
              interval: 0,
              color: "#E6F7FF",
              align: "left",
              margin: 100,
              formatter: function (value, index) {
                if (opt.index === 0 && index < 3) {
                  return (
                    "{idx" +
                    index +
                    "|" +
                    (1 + index) +
                    "}" +
                    "{title" +
                    index +
                    "|" +
                    value +
                    "}"
                  );
                } else if (opt.index !== 0 && index + opt.index < 9) {
                  return (
                    "{idx|0" +
                    (1 + index + opt.index) +
                    "} {title|" +
                    value +
                    "}"
                  );
                } else {
                  return (
                    "{idx|" +
                    (1 + index + opt.index) +
                    "} {title|" +
                    value +
                    "}"
                  );
                }
              },
              rich: {
                idx0: {
                  color: "rgba(255, 255, 255, 1)",
                  //backgroundColor: 'rgba(0, 0, 0, 0.6)',
                  // width: 24,
                  // height: 15,
                  lineHeight: 15,
                  // borderColor: 'rgba(255, 193, 0, 1)',
                  // borderWidth: 0.5,
                  // borderType: 'solid',
                  align: "center",
                  verticalAlign: "middle",
                  fontFamily: "Noto Sans SC",
                  fontSize: "14px",
                  padding: [5, 8],
                },
                idx1: {
                  color: "rgba(255, 255, 255, 1)",
                  //backgroundColor: 'rgba(0, 0, 0, 0.6)',
                  // width: 24,
                  // height: 15,
                  // borderColor: 'rgba(255, 153, 0, 1)',
                  // borderWidth: 0.5,
                  // borderType: 'solid',
                  align: "center",
                  verticalAlign: "middle",
                  fontFamily: "Noto Sans SC",
                  fontSize: "14px",
                  padding: [5, 8],
                },
                idx2: {
                  color: "rgba(255, 255, 255, 1)",
                  //backgroundColor: 'rgba(0, 0, 0, 0.6)',
                  // width: 24,
                  // height: 15,
                  lineHeight: 15,
                  // borderColor: 'rgba(255, 114, 70, 1)',
                  // borderWidth: 0.5,
                  // borderType: 'solid',
                  align: "center",
                  verticalAlign: "middle",
                  fontFamily: "Noto Sans SC",
                  fontSize: "14px",
                  padding: [5, 8],
                },
                idx: {
                  color: "rgba(255, 255, 255, 1)",
                  //backgroundColor: 'rgba(0, 0, 0, 1)',
                  borderWidth: 0.5,
                  // width: 24,
                  // height: 15,
                  borderType: "solid",
                  align: "center",
                  verticalAlign: "middle",
                  fontFamily: "Noto Sans SC",
                  fontSize: "14px",
                  padding: [5, 8],
                },
                title: {
                  fontFamily: "Noto Sans SC",
                  fontSize: "14px",
                  color: "rgba(208, 222, 238, 1)",
                  padding: 5,
                },
                title0: {
                  fontFamily: "Noto Sans SC",
                  fontSize: "14px",
                  color: "rgba(255, 231, 205, 1)",
                  padding: 5,
                },
                title1: {
                  fontFamily: "Noto Sans SC",
                  fontSize: "14px",
                  color: "rgba(208, 222, 238, 1)",
                  padding: 5,
                },
                title2: {
                  fontFamily: "Noto Sans SC",
                  fontSize: "14px",
                  color: "rgba(208, 222, 238, 1)",
                  padding: 5,
                },
              },
            },
          },
          {
            show: false,
            position: "center",
            inverse: true,
            data: [],
            axisLine: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              interval: 0,
              // align: 'left',
              margin: 10,
              fontSize: 14,
              fontFamily: "Noto Sans SC",
              formatter: function (value, index) {
                return "{value" + "|" + value + "}" + "{unit|" + "个" + "}";
              },
              rich: {
                value: {
                  color: "rgba(208, 222, 238, 1)",
                  align: "right",
                  verticalAlign: "middle",
                  fontFamily: "PangMenZhengDao",
                  fontSize: "18px",
                  lineHeight: 18,
                },
                unit: {
                  color: "rgba(110, 136, 167, 1)",
                  align: "left",
                  verticalAlign: "middle",
                  fontFamily: "Noto Sans SC",
                  fontSize: "14px",
                  lineHeight: 14,
                  padding: 5,
                },
              },
            },
          },
        ],
        series: [
          {
            name: "接口",
            type: "bar",
            yAxisIndex: 0,
            data: [],
            barWidth: 4,
            zlevel: 1,
            itemStyle: {
              color: (val) => {
                return new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(181, 255, 228, 0.1)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(181, 255, 228, 0.5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(181, 255, 228, 1)",
                    },
                  ],
                  false
                );
              },
            },
          },
          {
            name: "库表",
            type: "bar",
            yAxisIndex: 0,
            data: [],
            barGap: "1px",
            barWidth: 5,
            zlevel: 1,
            itemStyle: {
              color: (val) => {
                return new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(135, 219, 255, 0.2)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(135, 219, 255, 0.5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(135, 219, 255, 1)",
                    },
                  ],
                  false
                );
              },
            },
          },
          {
            name: "文档",
            type: "bar",
            yAxisIndex: 0,
            data: [],
            barGap: "1px",
            barWidth: 5,
            zlevel: 1,
            itemStyle: {
              color: (val) => {
                return new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "rgba(255, 229, 135, 0.1)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(255, 229, 135, 0.5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(255, 229, 135, 1)",
                    },
                  ],
                  false
                );
              },
            },
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 23,
            yAxisIndex: 1,
            // barGap: '-100%',
            data: [],
            label: {
              normal: {
                show: false,
                position: "right",
                // formatter: (e) => {
                //   if (e.dataIndex < 3) {
                //     return (
                //       "{value" +
                //       "|" +
                //       e.data.displayData +
                //       "}" +
                //       "{unit|" +
                //       "个" +
                //       "}"
                //     );
                //   } else {
                //     return (
                //       "{value2" +
                //       "|" +
                //       e.data.displayData +
                //       "}" +
                //       "{unit2|" +
                //       "个" +
                //       "}"
                //     );
                //   }
                // },
                // rich: {
                //   value: {
                //     color: "rgba(208, 222, 238, 1)",
                //     align: "right",
                //     verticalAlign: "middle",
                //     fontFamily: "PangMenZhengDao",
                //     fontSize: "16px",
                //     lineHeight: 18,
                //   },
                //   unit: {
                //     color: "rgba(110, 136, 167, 1)",
                //     align: "left",
                //     verticalAlign: "middle",
                //     fontFamily: "PangMenZhengDao",
                //     fontSize: "14px",
                //     lineHeight: 14,
                //     padding: 5,
                //   },
                //   value2: {
                //     color: "rgba(208, 222, 238, 0.7)",
                //     align: "right",
                //     verticalAlign: "middle",
                //     fontFamily: "PangMenZhengDao",
                //     fontSize: "16px",
                //     lineHeight: 18,
                //   },
                //   unit2: {
                //     color: "rgba(110, 136, 167, 0.7)",
                //     align: "left",
                //     verticalAlign: "middle",
                //     fontFamily: "PangMenZhengDao",
                //     fontSize: "14px",
                //     lineHeight: 14,
                //     padding: 5,
                //   },
                // },
                fontSize: 16,
                distance: 25,
                fontFamily: "PangMenZhengDao",
              },
            },
            itemStyle: {
              normal: {
                color: "#152541",
              },
            },
          },
          // {
          //   name: "订阅数背景",
          //   type: "bar",
          //   barWidth: 5,
          //   yAxisIndex: 1,
          //   data: [],
          //   barGap: "2px",
          //   label: {
          //     normal: {
          //       show: true,
          //       position: "right",
          //       distance: 25,
          //       fontSize: 16,
          //       fontFamily: "PangMenZhengDao",
          //       formatter: (e) => {
          //         // return e.data.displayData + '个'
          //         if (e.dataIndex < 3) {
          //           return (
          //             "{value" +
          //             "|" +
          //             e.data.displayData +
          //             "}" +
          //             "{unit|" +
          //             "个" +
          //             "}"
          //           );
          //         } else {
          //           return (
          //             "{value2" +
          //             "|" +
          //             e.data.displayData +
          //             "}" +
          //             "{unit2|" +
          //             "个" +
          //             "}"
          //           );
          //         }
          //       },
          //       rich: {
          //         value: {
          //           color: "rgba(208, 222, 238, 1)",
          //           align: "right",
          //           verticalAlign: "middle",
          //           fontFamily: "PangMenZhengDao",
          //           fontSize: "16px",
          //           lineHeight: 18,
          //         },
          //         unit: {
          //           color: "rgba(110, 136, 167, 1)",
          //           align: "left",
          //           verticalAlign: "middle",
          //           fontFamily: "PangMenZhengDao",
          //           fontSize: "14px",
          //           lineHeight: 14,
          //           padding: 5,
          //         },
          //         value2: {
          //           color: "rgba(208, 222, 238, 0.7)",
          //           align: "right",
          //           verticalAlign: "middle",
          //           fontFamily: "PangMenZhengDao",
          //           fontSize: "16px",
          //           lineHeight: 18,
          //         },
          //         unit2: {
          //           color: "rgba(110, 136, 167, 0.7)",
          //           align: "left",
          //           verticalAlign: "middle",
          //           fontFamily: "PangMenZhengDao",
          //           fontSize: "14px",
          //           lineHeight: 14,
          //           padding: 5,
          //         },
          //       },
          //     },
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: "#152541",
          //     },
          //   },
          // },
        ],
      };
      this.chart.setOption(this.echartOption);
      this.echartOption = this.chart.getOption();
    },
    setData() {
      if (this.chart) {
        const AxisData = [];
        const SeriesData1 = [];
        const SeriesData2 = [];
        const SeriesData3 = [];

        const BarBackgroundData1 = [];
        const BarBackgroundData2 = [];

        for (let i = 0; i < this.chartData.length; i++) {
          AxisData.push(this.chartData[i].name);
          SeriesData1.push(this.chartData[i].value1);
          SeriesData2.push(this.chartData[i].value2);
          SeriesData3.push(this.chartData[i].value3);

        }

        if (Math.max(...SeriesData1) === Math.max(...SeriesData2)) {
          for (let j = 0; j < this.chartData.length; j++) {
            BarBackgroundData1.push({
              value: Math.max(...SeriesData1) * 1.2,
              displayData: this.chartData[j].value1,
            });
            BarBackgroundData2.push({
              value: Math.max(...SeriesData1) * 1.2,
              displayData: this.chartData[j].value2,
            });
          }
        } else if (Math.max(...SeriesData1) > Math.max(...SeriesData2)) {
          for (let j = 0; j < this.chartData.length; j++) {
            BarBackgroundData1.push({
              value: Math.max(...SeriesData1) * 1.2,
              displayData: this.chartData[j].value1,
            });
            BarBackgroundData2.push({
              value: Math.max(...SeriesData1) * 1.2,
              displayData: this.chartData[j].value2,
            });
          }
        } else if (Math.max(...SeriesData1) < Math.max(...SeriesData2)) {
          for (let j = 0; j < this.chartData.length; j++) {
            BarBackgroundData1.push({
              value: Math.max(...SeriesData2) * 1.2,
              displayData: this.chartData[j].value1,
            });
            BarBackgroundData2.push({
              value: Math.max(...SeriesData2) * 1.2,
              displayData: this.chartData[j].value2,
            });
          }
        }

        this.echartOption.yAxis[0].data = AxisData;
        this.echartOption.yAxis[1].data = []; //没有用到
        this.echartOption.series[0].data = SeriesData1;
        this.echartOption.series[1].data = SeriesData2;
        this.echartOption.series[3].data = BarBackgroundData1;
       // this.echartOption.series[3].data = BarBackgroundData2;
        this.echartOption.series[2].data = SeriesData3;

        this.chart.setOption(this.echartOption);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.doubleBarChartContainer {
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  // border: 1px solid yellow;
}
</style>
.ＣＹＨ.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue echarts 条纹柱状横向图
tendernessxy的博客
04-13 1345
echarts 条纹柱状横向图
Echarts-vue
weixin_45439379的博客
06-12 918
Echarts-vue 文章目录Echarts-vue前言一、主要内容1.介绍2.演示 前言 一、主要内容 1.介绍 （1）数据可视化前言 （2）Echarts基本使用 （3）Echarts高级使用 （4）电商平台数据可视化实时监控系统 4.1后台搭建 4.2结合vue搭建图表组件 4.3websocket实现数据推送 4.4主题切换、页面合并 、全屏切换 知识储备 （1）html,css,js （2）Echarts的使用 （3）vue,vuex,Router,webpack （4）websocket的使用
VUE element-ui之table表格横向展示（表尾汇总）_elementui横向表格
2401_85124621的博客
06-17 558
{ total: ‘合计’, totalOrder: ‘发货数量:’ + ’ ’ + this.oldRecord.shipmentNumber, totalArea: ‘发货面积:’ + ’ ’ + this.oldRecord.shipmentArea, sendAmount: ‘发货金额:’ + ’ ’ + this.oldRecord.shipmentAmount, totalAmount: ‘总金额:’ + ’ ’ + this.oldRecord.allAmount }
echarts图表滚动（vue2.0，echarts3.8.0 ）
Smile_Gently的博客
08-11 1072
1、正常柱状图自右向左滚动。2、水平柱状图自下向上滚动。
Echarts 柱状图横向排版颜色渐变---实现效果详解(vue+Echarts实现)
热门推荐
黑木令之佛性
07-06 1万+
此文章讲解 Echarts 在 vue 开发中的使用方式以及实现效果的 demo (Echarts 柱状图横向排版颜色渐变效果)示例展示; 如有疑问或者不清楚的欢迎随时提问 。 废话不多说, 直接上代码以及图例 (为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。 1. 使用 echarts 版本: “echarts”: “^4.3.0” 2. 安装方式: cnpm install echarts --save 或者 cnpm install echarts -S 3. 在 main.js 入口
vue使用echarts和el-table,图表切换，图片下载，复杂表格导出
yangmin_kk的博客
01-09 793
项目的某个页面设计如下。主要难点1.需要展示多个折线图或者横向堆叠柱状图,​​​​，图表切换。2.需要导出图片或者图表，图表展示或者下载都需要自行加上合计。
vue-echarts线型图和横向柱状图(条形图)
seeeeeeeeeee的博客
07-06 6009
效果 代码(一个是左边图的代码，一个是右边的，注释写上了，可以更改，需要进入页面就渲染就在mounted内调用一下这两个) 注意：echarts图需要容器有高度才能显示。如果需要动态的高度可以用vh和百分比设置，可以用css3函数calc来动态计算。 比如这样： //图表自适应高度 .eee{height: calc(100vh - 390px);width: 100%;} dom部分： <!-- echarts图表部分 --> <el-row> <el
vue-property-decorator + ts 和 echarts使用 (2021-1-26)
Marlen
01-26 388
echarts使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- jquery cdn引入 --> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> &lt
【Vue】（IDE）基于Vue+Echarts的数据可视化界面
SKMIT的博客
10-04 5706
文章目录一、 开发环境和背景简介二、 效果三、 代码四、 设计总结 一、 开发环境和背景简介 这是自己的一个项目，组内有个哥们用VSCode去写html文件的格式，Vue中不太会导入js的文件格式，所以他的项目拿过来，运行之后空白一片。于是就自己看了Echarts文档重新编写，最后的效果在下面。 开发工具：IDE 2021.2 JDK1.8 。 Echarts官方文档 ElementUI官方文档 二、 效果 三、 代码 <template> <!-- 1 --> &lt
vue：表格中嵌入echarts实现进度条展示
Ho_mj的专栏
07-03 3170
vue：el-table中嵌入echarts
springboot echarts vue 柱状图
01-25
在本项目中，我们结合了SpringBoot、Vue和ECharts三个技术栈，旨在实现一个后端数据驱动的前端柱状图展示。以下是关于这些技术及其整合应用的详细知识点： 1. **SpringBoot**： SpringBoot是Spring框架的一个简化...
vue组件横向树实现代码
10-18
【Vue 组件横向树实现详解】 在 Vue.js 开发中，有时我们需要展示数据结构为树形的组件，但希望以横向的方式展现，这样的组件被称为横向树。本篇将详细介绍如何在 Vue 中实现一个横向树组件。 首先，让我们分析...
纯文字横向滚动组件 marquee.vue
01-07
JavaScript ，前端，vue
echarts横向柱状图
10-12
设置echarts多个柱状图重叠或者叠加情况，堆叠是数据不会叠加，可以设置堆叠(stack)，否则没有，是叠加横向柱状图，柱形图显示数值，以及设置隐藏一段方案（关联和不关联）,鼠标移动上去显示的提示内容，动态改变...
Vue 实现从小到大的横向滑动效果详解
10-16
在本文中，我们将深入探讨如何使用Vue.js框架实现从小到大的横向滑动效果。这种效果常见于各种网页的轮播图或滑动导航，能够给用户带来流畅的交互体验。我们将借助vue-awesome-swiper插件来实现这一功能。 首先，...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 1072
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1363
本文介绍了电子签名、图片合成、及预览功能
子路由的配置方法？
最新发布
weixin_56187723的博客
08-02 212
首先，在Vue Router中定义父路由。父路由可以像其他普通路由一样定义，但通常会有一个组件与之关联，这个组件将作为子路由的容器。// 这里不需要直接定义子路由，但父组件需要准备好嵌套路由的容器},// 其他路由...
Vue动态横向柱状排名echarts
06-02
您好，要实现Vue动态横向柱状排名echarts，可以按照以下步骤进行： 1. 安装echarts和vue-echarts插件 ``` npm install echarts vue-echarts --save ``` 2. 在需要使用该组件的.vue文件中引入echarts和vue-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值