ECharts第四章项目实战

已于 2024-04-22 09:30:40 修改
阅读量418 收藏 2
点赞数 3
文章标签： echarts 前端 javascript
于 2024-04-01 09:23:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2202_75544053/article/details/137081737
版权

目录

1、标准漏斗图

2、雷达图 

3、复杂雷达图

4、词云图 

缩放：dataZoom:{show:true} （在工具栏toolbox）

dataZoom:[{
                type:'inside',
                show:true,
                start:0,
                end:100,
            }
            ],

修改图的大小radius

1、标准漏斗图

将type类型改为funnel

type: 'funnel',
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
            text: '漏斗图'
            },
            tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
            },//详情提示框
            toolbox: {
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
            },//工具箱组件
            legend: {
            data: ['浏览购物', '添购物车', '购物结算', '核对订单', '提交订单']
            },//图例
            series: [
            {
                name: 'Funnel',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                minSize: '0%',
                maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                show: true,
                position: 'inside'
                },
                labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
                },
                itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
                },
                emphasis: {
                label: {
                    fontSize: 25
                }
                },    //高亮样式
                data: [
                { value: 60, name: '浏览购物' },
                { value: 40, name: '添购物车' },
                { value: 20, name: '购物结算' },
                { value: 80, name: '核对订单' },
                { value: 100, name: '提交订单' }
                ]
            }
            ]
        };
  //使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
    </script>
</body>
</html>

高亮样式 

emphasis: {
                label: {
                    fontSize: 20
                }
                },    //高亮样式

2、绘制多漏斗图或多金字塔

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
            text: '图'
            },
            tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
            },//详情提示框
            toolbox: {
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
            },//工具箱组件
            legend: {
                height: 20, // 图片的高度
                width: 20,   // 图片的宽度
                type: 'scroll', 
                width: '30%',       // 设置图例的宽度
                orient: 'horizontal' ,// 设置图例水平排列
                data: ['蒋敦豪', '鹭卓', '李耕耘', '李昊', '赵一博','卓沅','赵小童','何浩楠','陈ber','王一珩']
            },//图例
            series: [
            {
                name: 'Funnel',
                type: 'funnel',
                width: '40%',
                height: '45%',
                left: '5%',
                top: '50%',
                data: [
                    { value: 60, name: '蒋敦豪' },
                    { value: 30, name: '鹭卓' },
                    { value: 10, name: '李耕耘' },
                    { value: 80, name: '李昊' },
                    { value: 100, name: '赵一博' }
                ]
                },
            {
                name: 'Pyramid',
                type: 'funnel',
                width: '40%',
                height: '45%',
                left: '5%',
                top: '5%',
                sort: 'ascending',
                data: [
                    { value: 60, name: '卓沅' },
                    { value: 30, name: '赵小童' },
                    { value: 10, name: '何浩楠' },
                    { value: 80, name: '陈ber' },
                    { value: 100, name: '王一珩' }
                ]
                },
                {
                name: 'Funnel',
                type: 'funnel',
                width: '40%',
                height: '45%',
                left: '55%',
                top: '5%',
                label: {
                    position: 'left'
                },
                data: [
                    { value: 60, name: '蒋敦豪' },
                    { value: 30, name: '鹭卓' },
                    { value: 10, name: '李耕耘' },
                    { value: 80, name: '李昊' },
                    { value: 100, name: '赵一博' }
                ]
                },
                {
                name: 'Pyramid',
                type: 'funnel',
                width: '40%',
                height: '45%',
                left: '55%',
                top: '50%',
                sort: 'ascending',
                label: {
                    position: 'left'
                },
                data: [
                    { value: 60, name: '卓沅' },
                    { value: 30, name: '赵小童' },
                    { value: 10, name: '何浩楠' },
                    { value: 80, name: '陈ber' },
                    { value: 100, name: '王一珩' }
                ]
                }
            ]
        };
  //使用刚指定的配置项和数据显示图表
  myChart.setOption(option);
    </script>
</body>
</html>

2、雷达图 

类型为radar

type: 'radar',

雷达图坐标系组件

radar: [{ // 配置雷达图坐标系组件，只适用于雷达图
				center: ['50%', '56%'], // 设置中心坐标，数组的第1项是横坐标，第2项是纵坐标
				radius: 160, // 设置圆的半径，数组的第一项是内半径，第二项是外半径
				startAngle: 90, // 设置坐标系起始角度，也就是第一个指示器轴的角度
				name: { // 设置（圆外的标签）雷达图每个指示器名称
					formatter: '{value}',
					textStyle: {
						fontSize: 15,
						color: '#000'
					}
				},
				nameGap: 2, // 设置指示器名称和指示器轴的距离，默认为15
				splitNumber: 2, // 设置指示器轴的分割段数，default
				// shape:'circle',  // 设置雷达图绘制类型，支持'polygon','circle'
				// 设置坐标轴轴线设置
				axisLine: {
					lineStyle: {
						color: '#fff',
						width: 1,
						type: 'solid',
					}
				},
				// 设置坐标轴在grid区域中的分隔线
				splitLine: {
					lineStyle: {
						color: '#fff',
						width: 1,
					}
				},
				splitArea: {
					show: true,
					areaStyle: {
						color: ['#abc', '#abc', '#abc', '#abc']
					}
				}, // 设置分隔区域的样式
                indicator: [ // 配置雷达图指示器，指定雷达图中的多个变量，跟data中value对应
					{
						name: '销售',
						max: 100
					}, {
						name: '沟通',
						max: 100
					},
					{
						name: '服务',
						max: 100
					}, {
						name: '协作',
						max: 100
					},
					// 设置指示器的名称，最大值，标签的颜色
					{
						name: '培训',
						max: 100
					}
				]
			}],
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
            text: 'Basic Radar Chart'
        },
        legend: {
            data: ['十个勤天', '种地吧']
        },
        tooltip:{
            confirm:true,
            enterable:true,
        },
        radar: {
            // shape: 'circle',
            center: ['50%', '56%'], // 设置中心坐标，数组的第1项是横坐标，第2项是纵坐标
				radius: 160, // 设置圆的半径，数组的第一项是内半径，第二项是外半径
				startAngle: 90, // 设置坐标系起始角度，也就是第一个指示器轴的角度
				name: { // 设置（圆外的标签）雷达图每个指示器名称
					formatter: '{value}',
					textStyle: {
						fontSize: 15,
						color: '#000'
					}
				},
				nameGap: 2, // 设置指示器名称和指示器轴的距离，默认为15
				splitNumber: 2, // 设置指示器轴的分割段数，default
				// shape:'circle',  // 设置雷达图绘制类型，支持'polygon','circle'
				// 设置坐标轴轴线设置
				axisLine: {
					lineStyle: {
						color: '#fff',
						width: 1,
						type: 'solid',
					}
				},
				// 设置坐标轴在grid区域中的分隔线
				splitLine: {
					lineStyle: {
						color: '#fff',
						width: 1,
					}
				},
				splitArea: {
					show: true,
					areaStyle: {
						color: ['#abc', '#abc', '#abc', '#abc']
					}
				}, // 设置分隔区域的样式
            indicator: [
            { name: 'Sales', max: 6500 },
            { name: 'Administration', max: 16000 },
            { name: 'Information Technology', max: 30000 },
            { name: 'Customer Support', max: 38000 },
            { name: 'Development', max: 52000 },
            { name: 'Marketing', max: 25000 }
            ]
        },
        series: [
            {
            name: 'Budget vs spending',
            type: 'radar',
            symbol:'triangle',
            itemStyle: {
                    normal: {
						lineStyle: {
							width: 1
						},
						opacity: 0.2
					}, // 设置普通状态时的样式
					emphasis: {
						lineStyle: {
							width: 5
						},
						opacity: 1
					} // 设置高亮时的样式
                }, // 设置折线拐点标志的样式
            data: [
                {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: '十个勤天'
                },
                {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: '种地吧'
                },
            ]
            },
        ]
        };

        //使用刚指定的配置项和数据显示图表
   myChart.setOption(option);
    </script>
</body>
 
</html>

3、复杂雷达图

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
    <!--引入ECharts脚本-->
    <script src="js/echarts.js"></script>
</head>
 
<body>
    <!---为ECharts准备一个具备大小（宽高）的DOM-->
    <div id="main" style="width: 600px; height: 400px"></div>
    <script type="text/javascript">
        //基于准备好的DOM，初始化ECharts图表
        var myChart = echarts.init(document.getElementById("main"));
        //指定图表的配置项和数据
        var option = {
            title: {
            text: 'Basic Radar Chart'
        },
        legend: {
            type: 'scroll',
            bottom: 10,
            data: (function () {
            var list = [];
            for (var i = 1; i <= 28; i++) {
                list.push(i + 2000 + '');
            }
            return list;
            })()
        },    
        tooltip:{
            confirm:true,
            enterable:true,
        },
        visualMap:{
            top:'47%',
            right:20,
            color:['red','yellow'],
            calculable:true,
        },
        radar: {
            // shape: 'circle',
            center: ['50%', '56%'], // 设置中心坐标，数组的第1项是横坐标，第2项是纵坐标
				radius: 160, // 设置圆的半径，数组的第一项是内半径，第二项是外半径
				startAngle: 90, // 设置坐标系起始角度，也就是第一个指示器轴的角度
				name: { // 设置（圆外的标签）雷达图每个指示器名称
					formatter: '{value}',
					textStyle: {
						fontSize: 15,
						color: '#000'
					}
				},
				nameGap: 2, // 设置指示器名称和指示器轴的距离，默认为15
				splitNumber: 2, // 设置指示器轴的分割段数，default
				// shape:'circle',  // 设置雷达图绘制类型，支持'polygon','circle'
				// 设置坐标轴轴线设置
				axisLine: {
					lineStyle: {
						color: '#fff',
						width: 1,
						type: 'solid',
					}
				},
				// 设置坐标轴在grid区域中的分隔线
				splitLine: {
					lineStyle: {
						color: '#fff',
						width: 1,
					}
				},
				splitArea: {
					show: true,
					areaStyle: {
						color: ['#abc', '#abc', '#abc', '#abc']
					}
				}, // 设置分隔区域的样式
                
                indicator: [
                { text: 'IE8-', max: 400 },
                { text: 'IE9+', max: 400 },
                { text: 'Safari', max: 400 },
                { text: 'Firefox', max: 400 },
                { text: 'Chrome', max: 400 }
                ]
            },
            series: (function () {
            var series = [];
            for (var i = 1; i <= 28; i++) {
            series.push({
                type: 'radar',
                symbol: 'none',
                lineStyle: {
                width: 1
                },
                emphasis: {
                areaStyle: {
                    color: 'rgba(0,250,0,0.3)'
                }
                },
                data: [
                {
                    value: [
                    (40 - i) * 10,
                    (38 - i) * 4 + 60,
                    i * 5 + 10,
                    i * 9,
                    (i * i) / 2
                    ],
                    name: i + 2000 + ''
                }
                ]
            });
            }
            return series;
        })()
        };

        //使用刚指定的配置项和数据显示图表
   myChart.setOption(option);
    </script>
</body>
 
</html>

4、词云图 

引入ECharts文件

<script type="text/javascript" src = "http://echarts.baidu.com/build/dist/echarts.js"></script>
require(
        [
            'echarts',
            'echarts/chart/wordCloud',
        ],
        function(ec){
            var myChart = ec.init(document.getElementById('main'));
            function createRandomItemStyle(){//创建随机颜色
                return{
                    normal:{
                        color:'rgb('+[
                            Math.round(Math.random()*255),
                            Math.round(Math.random()*255),
                            Math.round(Math.random()*255)
                    ].join(',')+')'
                    }
                };
            }
<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>词云图</title>  
 <!-- 引入ECharts文件 --> 
    <script type="text/javascript" src = "http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript" src="/js/echarts.js"></script>  
</head>  
<body>  
    <div id="main" style="width: 80%;height: 400px;border: 1px solid black"></div>  
</body>    
    <script type="text/javascript">  
 // 使用模块化加载方式
    require.config({
        paths:{echarts:'http://echarts.baidu.com/build/dist'}
    })
    require(
        [
            'echarts',
            'echarts/chart/wordCloud',
        ],
        function(ec){
            var myChart = ec.init(document.getElementById('main'));
            function createRandomItemStyle(){//创建随机颜色
                return{
                    normal:{
                        color:'rgb('+[
                            Math.round(Math.random()*255),
                            Math.round(Math.random()*255),
                            Math.round(Math.random()*255)
                    ].join(',')+')'
                    }
                };
            }
            option = {  
                title:{
                    text:'种地吧',
                    link:'',
                },
                backgroundColor:'rgba(128,128,128,0.1)',
                tooltip:{show:true},
                series:[{
                    name:'p1',
                    type:'wordCloud',
                    sizeRange:[100,50000],//最大最小值
                    size:['95%','95%'],//词云图大小
                    textRotation:[0,45,90,135,-45,-90],//词的倾斜角度
                    textPadding:4,
                    autoSize:{enable:true,minSize:2},
                    data:[//词云名称，词云大小，颜色
                        {name:'数据可视化',value:16884,itemStyle:{normal:{color:'red'}}},
                        {name:'数据分析',value:8844,itemStyle:createRandomItemStyle()},
                        {name:'数据收集',value:16644,itemStyle:createRandomItemStyle()},
                        {name:'数据清洗',value:2244,itemStyle:createRandomItemStyle()},
                        {name:'数据结构',value:14844,itemStyle:createRandomItemStyle()},
                        {name:'数据价值',value:2244,itemStyle:createRandomItemStyle()},
                        {name:'java',value:1688,itemStyle:createRandomItemStyle()},
                        {name:'c',value:15552,itemStyle:createRandomItemStyle()},
                        {name:'C++',value:8848,itemStyle:createRandomItemStyle()},
                        {name:'python',value:6677,itemStyle:createRandomItemStyle()},
                        {name:'mysql',value:5240,itemStyle:createRandomItemStyle()},
                        {name:'Sql',value:12244,itemStyle:createRandomItemStyle()},
                        {name:'R',value:7749,itemStyle:createRandomItemStyle()},
                        {name:'数据价值',value:2244,itemStyle:createRandomItemStyle()},
                        {name:'ECharts',value:11044,itemStyle:createRandomItemStyle()},
                        {name:'html',value:6749,itemStyle:createRandomItemStyle()},
                        {name:'数据',value:50000,itemStyle:createRandomItemStyle()},
                        {name:'spark',value:5349,itemStyle:createRandomItemStyle()},
                        {name:'scala',value:7789,itemStyle:createRandomItemStyle()},
                        {name:'hadoop',value:6189,itemStyle:createRandomItemStyle()},
                        {name:'hive',value:8782,itemStyle:createRandomItemStyle()},
                        {name:'',value:10049,itemStyle:createRandomItemStyle()},
                    ]
                }]
       };
       myChart.setOption(option);
     }
);
    </script>

5、矩形树图 

type: 'treemap',
leves:getLevelOption(),

<!DOCTYPE html>
<html>
 <head>
	<meta charset="utf-8">
	<!-- 引入 ECharts 文件 -->
	<script src="js/echarts.js"></script>
 </head>
 <body>
	<!---为ECharts准备一个具备大小（宽高）的DOM--->
	<div id="main" style="width: 1000px; height: 600px"></div>
	<script type="text/javascript">
		// 基于准备好的DOM，初始化ECharts图表
		var myChart = echarts.init(document.getElementById("main"));
		// 指定图表的配置项和数据
        var option = {
            toolbox: {
                show: true,
                orient: 'vertical',
                x: 'right',
                y: 'center',
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            tooltip: {
                 trigger: 'axis',
                 axisPointer: {  //设置坐标轴指示器，坐标轴触发有效
                   type: 'shadow'  //设置坐标轴默认为直线，可选为:'line'|'shadow'
                 }
             },
            series: [
            {
            type: 'treemap',
            data: [
                {
                name: 'nodeA',
                value: 10,
                children: [
                    {
                    name: 'nodeAa',
                    value: 4
                    },
                    {
                    name: 'nodeAb',
                    value: 6
                    }
                ]
                },
                {
                name: 'nodeB',
                value: 20,
                children: [
                    {
                    name: 'nodeBa',
                    value: 20,
                    children: [
                        {
                        name: 'nodeBa1',
                        value: 20
                        }
                    ]
                    }
                ]
                }
            ]
            }
        ]
};
            // 使用刚指定的配置项和数据显示图表
		myChart.setOption(option);
	</script>
</body>
 
</html>

  

23_123456
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts数据可视化项目教程项目笔记源码
05-08
echarts数据可视化项目教程项目笔记源码
Echarts第四章实训
2303_77733754的博客
03-27 523
【代码】Echarts第四章实训。
实训四以及课堂作业
最新发布
xidiexi的博客
04-02 513
首先radar.html文件中引入echarts.js库文件。其次，准备一个 具备大小(weight与height)的div容器， 并使用init)方法初始化容器。最后设置雷达图的 配置项、3个销售代表5 个方面的考核评分数据完成雷达图绘制。“销售经理能力考核表。xlsx” 文件中记录某公司销售能力的考核信息， 包含3个销售代表的销售、沟通、服务、 协作和培训这5个方面的考核评分， 通过绘制雷达图综合 展现3个销售代表各方面能力对比。(1)在VSCode中创建radar.html文件。
Echarts数据可视化 第4章 Echarts可视化图 4.4 散点图
谢谢你们的关注
03-05 1102
Echarts数据可视化 第4章 Echarts可视化图 4.4 散点图
echarts，实训1和三，会员基本信息分析
2301_80975885的博客
03-18 509
【代码】echarts，实训1和三，会员基本信息分析。
echarts实训3：利用SSM框架实现用户登录功能
balabalalibala的博客
06-05 355
用SSM框架实现用户登录
3 基于pyecharts的python数据可视化——漏斗图绘制
简时刻的博客
06-02 680
实例代码： 运行结果：
Vue全家桶从基础入门到进阶项目实战第四篇综合进阶项目篇
06-20
本课程主要以开发图书信息管理系统为例，进行讲解单页面前后端分离项目的开发，用到的技术主要包括vue.js、vue cli、webpack、vue router、axios、vuex、element、easymock、echarts。学习目标：全面巩固加深对vue....
ECharts Web数据可视化教案-基于ECharts的大数据分析可视化平台实现无人售货机用户分析教案.docx
12-16
1. 如何利用大数据分析可视化平台完成第 6 章中的无人售货机零售项目？ 教材与参考资料： 1. 《Web 数据可视化》教材 2. 《Python 数据分析与应用》 3. 《数据分析基础》 4. 《Python 数据分析与可视化从入门到...
《Web数据可视化（ECharts版）》--教案.rar
07-04
《Web数据可视化（ECharts版）》--教案.rar
第17章 大数据平台运行与应用实战.pptx
11-28
大数据平台的运行与应用实战主要涉及多个关键环节，包括数据的采集、清洗、处理、分析以及可视化。在本章节中，我们将深入理解大数据业务处理的全流程，并以一个招聘网站的大数据平台项目为例，来探讨如何利用Hadoop...
大数据运维技术第17章 大数据平台运行与应用实战课件.pptx
06-22
大数据平台运行与应用实战 大数据平台是指基于大数据技术的数据处理和分析系统，它可以对大量数据进行处理、分析和可视化，以满足业务需求。本章节将对大数据平台的运行和应用进行详细介绍。 1. 大数据平台架构 ...
ECharts-html 实训（四）
2301_77563994的博客
04-01 1612
散点图，顾名思义就是使用一些散乱的点来展示数据的一种图表，这些点在哪个位置，是由其X值和Y值确定的，因此散点图也叫做XY散点图，
数据可视化第四章实训
Xiaozou_Q的博客
03-26 441
1，销售额与已购买客户数量散点图。2，销售额与任务销售额仪表盘。
Echarts数据可视化 第4章 Echarts可视化图 4.1 折线图
谢谢你们的关注
03-05 519
Echarts数据可视化 第4章 Echarts可视化图 4.1 折线图
Echarts数据可视化 第4章 Echarts可视化图 4.7 漏斗图
谢谢你们的关注
03-05 2470
Echarts数据可视化 第4章 Echarts可视化图 4.7 漏斗图
web数据可视化实训（Echarts版）
m0_62550958的博客
07-02 1052
数据可视化-售货机大数据分析平台项目实践作业
实验四：大数据可视化工具—pyecharts
Time木的博客
05-03 1493
实验四：大数据可视化工具—pyecharts 实验内容： 1.练习掌握pyecharts的安装和使用方法 2.练习使用pyecharts绘制柱状图、仪表盘图、3D图、雷达图、面积图等 如果直接s使用此命令安装：pip install pyechart 则安装的是最新版，下面的代码需修改后使用 （例：from pyecharts import Bar变为from pyecharts.chart import Bar） 所需数据和源码均可关注微信公众号：我是TIME0101 回复：大数据可视化pyechart
vue+echarts项目实战
08-22
在Vue和Echarts的项目实战中，首先要使用vue-cli3创建项目。可以通过运行命令"vue create 项目名称"来创建一个Vue项目。接下来，进入项目目录，使用命令"npm run serve"来运行项目。这样就可以在本地开发环境中开始...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值