Echarts结课之小杨总结版

已于 2024-05-13 11:40:23 修改
阅读量615 收藏 9
点赞数 25
文章标签： echarts 信息可视化 前端
于 2024-05-13 11:28:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74811962/article/details/138783300
版权

Echarts结课之小杨总结版

前言

对于期末，我们实现了一个小小项目（无人售货机），首先设置好框架，并且在js文件里面回顾了柱状图，条形图，饼图，南丁格尔玫瑰图，堆积图，树图，雷达图，仪表盘，气泡图，词云图，并且都用上了异部加载数据。

基础回顾

框架

sale框架

代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>售货机大数据分析平台</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="header">
  <div class="sysName">
    <h1 class="tit">售货机大数据分析平台</h1>
  </div>
  <div class="menu">
    <ul>
      <li><a href="total.html">总数据</a></li>
      <li class="on"><a href="sale.html">销售分析</a></li>
      <li class="sysnameN"></li>
      <li><a href="inventory.html">库存分析</a></li>
      <li><a href="user.html">用户分析</a></li>
    </ul>
  </div>
</div>
<div class="chartWarp saleWarp">
  <div class="pure-g sale-row1">
    <div class="pure-u-1-4">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">销售金额（元）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleM_Site" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">订单量（个）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="orderQ_Site" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">毛利润（元）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="grossM_Site" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">客单价（元）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="unitP_Site" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>


  <div class="pure-g sale-row2">
    <div class="pure-u-1-4">
		  <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">销售金额预测值与实际值</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleAll" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-2">
		  <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">商品价格区间</h2>
          </div>
        </div>
        <div class="bd">
          <div id="priceRange" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-4">
		  <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">商品销售数量前10名</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleMtop10" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>

</div>
</body>
<script language="javascript" type="text/javascript" src="js/echarts.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script language="javascript" type="text/javascript" src="js/charts.sale.js"></script> 
</html>

user框架

基础代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>售货机大数据分析平台</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="header">
  <div class="sysName">
    <h1 class="tit">售货机大数据分析平台</h1>
  </div>
  <div class="menu">
    <ul>
      <li><a href="total.html">总数据</a></li>
      <li><a href="sale.html">销售分析</a></li>
      <li class="sysnameN"></li>
      <li><a href="inventory.html">库存分析</a></li>
      <li class="on"><a href="user.html">用户分析</a></li>
    </ul>
  </div>
</div>
<div class="chartWarp userWarp">

  <div class="pure-g user-row1">
    <div class="pure-u-7-24 col2">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">近5天用户人数新增和流失趋势</h2>
          </div>
        </div>
        <div class="bd">
          <div id="lossGrowth" class="chartDiv"></div>
        </div>
      </div>
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户类型人数</h2>
          </div>
        </div>
        <div class="bd">
          <div id="cSorNum" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-10-24">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户分群</h2>
          </div>
        </div>
        <div class="bd">
          <div id="userGroup" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-7-24 col2">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">商品价格区间</h2>
          </div>
        </div>
        <div class="bd">
          <div id="pInterval" class="chartDiv"></div>
        </div>
      </div>
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户消费地点</h2>
          </div>
        </div>
        <div class="bd">
          <div id="expLoc" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-g user-row2">
<!--
    <div class="pure-u-7-24">
      
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">会员与非会员人数</h2>
          </div>
        </div>
        <div class="bd">
          <div id="vipC" class="chartDiv"></div>
        </div>
      </div>
     
    </div>
 -->
    <div class="pure-u-12-24">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户消费时段</h2>
          </div>
        </div>
        <div class="bd">
          <div id="expTime" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-12-24">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户画像</h2>
          </div>
        </div>
        <div class="bd">
          <div id="userHot" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>

</div>
</body>
<script language="javascript" type="text/javascript" src="js/echarts.js"></script>
<script language="javascript" type="text/javascript" src="js/echarts-wordcloud.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script language="javascript" type="text/javascript" src="js/charts.user.js"></script>
<!-- <script language="javascript" type="text/javascript" src="js/lossgrowth.js"></script> -->
</html>

inventory框架

基础代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>售货机大数据分析平台</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="header">
  <div class="sysName">
    <h1 class="tit">售货机大数据分析平台</h1>
  </div>
  <div class="menu">
    <ul>
      <li><a href="total.html">总数据</a></li>
      <li><a href="sale.html">销售分析</a></li>
      <li class="sysnameN"></li>
      <li class="on"><a href="inventory.html">库存分析</a></li>
      <li><a href="user.html">用户分析</a></li>
    </ul>
  </div>
</div>
<div class="chartWarp inventoryWarp">

  <div class="pure-g int-row1"> 
    <!-- 存销量 -->
    <div class="pure-u-1-3">
      <!-- 设备容量 -->
      <div class="chartBlock h55">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">设备容量</h2>
          </div>
        </div>
        <div class="bd">
          <div id="mVolume" class="chartDiv"></div>
        </div>
      </div>
      <!-- 品类库存占比 -->
      <div class="chartBlock h45">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">品类库存占比</h2>
          </div>
        </div>
        <div class="bd">
          <div id="categoryStock" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-3">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">存销量</h2>
          </div>
        </div>
        <div class="bd">
          <div id="stockSales" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-3"> 
      <!-- 商品存货周转天数 -->
      <div class="chartBlock h55">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">商品存货周转天数</h2>
          </div>
        </div>
        <div class="bd">
          <div id="turnaround" class="chartDiv"></div>
        </div>
      </div>
      <!-- 滞销商品 -->
      <div class="chartBlock h45">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">滞销商品</h2>
          </div>
        </div>
        <div class="bd">
          <div id="unsalable" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script language="javascript" type="text/javascript" src="js/echarts.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script language="javascript" type="text/javascript" src="js/charts.int.js"></script>
</html>

total框架

基础代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>售货机大数据分析平台</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
</head>
<body>
<div class="header">
  <div class="sysName">
    <h1 class="tit">售货机大数据分析平台</h1>
  </div>
  <div class="menu">
    <ul>
      <li class="on"><a href="total.html">总数据</a></li>
      <li><a href="sale.html">销售分析</a></li>
      <li class="sysnameN"></li>
      <li><a href="inventory.html">库存分析</a></li>
      <li><a href="user.html">用户分析</a></li>
    </ul>
  </div>
</div>
<div class="chartWarp toalWarp">
  <div class="pure-g toal-row1"> 
    <!-- 销售金额（元）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">销售金额（元）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleM" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">销售金额环比增长率</div>
          <div class="subNum">-1.4%</div>
        </div>
      </div>
    </div>
    <!-- 订单量（个）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">订单量（个）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="orderQ" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">订单量环比增长率</div>
          <div class="subNum">11.1%</div>
        </div>
      </div>
    </div>
    <!-- 毛利（元）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">毛利润（元）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="grossM" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">毛利润环比增长率</div>
          <div class="subNum">3.6%</div>
        </div>
      </div>
    </div>
    <!-- 售货机数量（台）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">售货机数量（台）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="discount" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">售货机数量环比增长率</div>
          <div class="subNum">2.99%</div>
        </div>
      </div>
    </div>
    <!-- 购买用户数（人）-->
    <div class="pure-u-1-5">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">购买用户数（人）</h2>
          </div>
        </div>
        <div class="bd">
          <div id="unitP" class="chartDiv"></div>
        </div>
      </div>
      <div class="subBlock">
        <div class="subCon">
          <div class="subtxt">购买用户数环比增长率</div>
          <div class="subNum">1.77%</div>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-g toal-row2">
    <div class="pure-u-1-1">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">销售金额变化趋势</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleRate" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="pure-g toal-row3">
    <div class="pure-u-1-3">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">商品销售金额前5名</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleMtop5" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-3">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">售货机销售情况</h2>
          </div>
        </div>
        <div class="bd">
          <div id="saleOrder" class="chartDiv"></div>
        </div>
      </div>
    </div>
    <div class="pure-u-1-3">
      <div class="chartBlock">
        <div class="hd">
          <div class="chartTit">
            <h2 class="titContent">用户支付方式占比</h2>
          </div>
        </div>
        <div class="bd">
          <div id="payWay" class="chartDiv"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script language="javascript" type="text/javascript" src="js/echarts.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script language="javascript" type="text/javascript" src="js/charts.total.js"></script>
</html>

基础设置

系列组件用于设置图表的数据和显示类型。

1.标题(Title)

标题组件用于设置 ECharts 中的标题，它可以是图表的主标题，也可以是各个系列的标题。

2.图例(Legend)

实现
项目名称效果
type:“plain”,是否可滚动翻页，用于图例太多，超出容器时配置。
id:‘1’,引用组件
show:true,是否展示图例
zlevel:1,所有图形图层优先级
z:2,图例中所有图形的 优先级，控制图形前后顺序，实现堆积效果
left:‘auto’,图例离容器左侧距离
right:‘20%’,图例离容器右侧距离
top:20,图例离容器上侧距离
bottom:‘auto’图例离容器下侧距离
widht:‘20%’,图例容器的宽度
height:200,图例容器的高度
orient:‘vertical’,图例列表排列方式 横、竖
align:‘left’,图例文字 在图例图形的左还是右
padding:[5,10,5,10],图例容器内边距
backgroundColor:‘red’,图例容器的背景颜色
borderColor:‘red’,图例容器的边框颜色
borderWidth:2,图例容器的边框宽度
borderRadius:[5,5,5,5],图例容器的圆角
shadowBlur:20,图形容器的阴影程度
shadowColor:‘red’,图形容器的阴影颜色
shadowOffsetX:20,阴影在水平方向上的偏移
shadowOffsetY:20,阴影在竖直方向上的偏移
formatter:“图例名称”,手动配置图例的文字内容
selectedMode:true,图例图形是否可点击
itemGap:10,图例之间的距离
itemWidth:25,图例图形宽度
itemHeight:25,图例图形高度

selected:{
‘数据一名称’:true, //数据一初始化展示
‘数据二名称’:false, //数据二初始化不展示
},

3.工具提示(Tooltip)

工具提示组件用于设置图表的提示框，提示框可以显示数据的详细信息。

实现
组件名称含义
trigger:‘axis’触发类型： ‘axis’ 表示坐标轴触发，适用于柱状图、折线图等
trigger:‘item’触发类型，‘item’ 表示数据项触发，适用于饼图等
showDelay: 0显示延迟时间，添加显示延时可以避免频繁切换
transitionDuration: 0.5动画变换持续时间，单位秒
      formatter: function (params) {
        // 提示框文本格式器，支持字符串模板和回调函数两种形式
        // 模板变量有 {a}, {b}，{c}，分别表示系列名，数据名，数据值
        // 回调函数的参数为：params: Object|Array
        // params 是单个数据的信息，allParams 是包含所有数据信息的数组
        return params.name + '<br/>' + params.seriesName + ' : ' + params.value;
    }

4.X轴(X Axis) 和 Y轴(Y Axis)

坐标轴组件用于展示数据的类别和数值。

5.数据缩放组件（dataZoom）

用于在图表中进行缩放或者平移。

实现
项目设置效果
type:‘inside’,指定数据区域缩放组件的类型
id:‘1’,组件ID
disAbled:true,是否开启缩放功能
xAxisIndex:[0,1],控制 X 轴，例如控制 第一个和第二个轴 xAxis 可缩放
yAxisIndex:1,控制 Y 轴，例如控制 第二个 yAxis 可缩放
radiusAxisIndex:1,控制极坐标中的第二个 radius 轴
angleAxisIndex:1,控制极坐标中的第二个 angle 轴
filterMode:‘filter’,数据过滤，来优化数据展示
start:40,数据展示窗口的初始数据
end:80,数据展示窗口的结束数据
minSpan:50,窗口的最小值
maxSpan:50,窗口的最大值
startValue:20,数据展示窗口的初始数据
endValue:80,数据展示窗口的结束数据
minValueSpan:100,窗口的最小值
maxValueSpan:100,窗口的最大值
orient:‘horizontal’,缩放是水平缩放还是竖直缩放
zoomLock:true,是否固定当前窗口，将缩放修改为左右偏移窗口
throttle:100,触发视图刷新的频率。
rangeMode:[30,70],缩放范围，当设置 start 等时为百分比 比例，若设置了startValue 等时为绝对值
zoomOnMouseWhell:‘ctrl’,如何触发缩放，如鼠标滚轮、 ctrl + 滚轮
moveOnMouseMove:true,缩放功能为平移时，如何移动鼠标来触发平移窗口,
moveOnMouseWhell:true,缩放功能为平移时，如何操作鼠标滚轮来触发偏移窗口
preventDefaultMouseMove:true,是否阻止 mousemove 事件的默认行为

6.网格组件（gride）:

在直角坐标系中，网格组件用来确定图表的位置和大小。

实现
项目名称设置效果
show: true,是否显示图表背景网格
left: ‘0%’,图表距离容器左侧多少距离
right: ‘40%’,图表距离容器右侧侧多少距离
bottom: ‘3%’,图表距离容器上面多少距离
top: 50,图表距离容器下面多少距离
containLabel: true,防止标签溢出
backgroundColor:‘#555555’,网格背景色，默认透明

7、视觉映射组件（visualMap）

用于将数据映射到视觉元素。

实现
项目名称设置效果
type:‘continuous’,类型为连续型视觉映射
id:‘1’,组件ID
min:10,指定可映射的最小值
max:100,指定可映射的最大值
range:[4,50],映射初始对应的数值
calculable:false,是否显示拖拽控制器的手柄
realtime:true,拖拽时是否实时渲染图形
inverse:false,是否反转组件
precision:0,数据展示精度
itemWidth:50,映射控制器宽度
itemHeigth:50,图形的高度
orient:‘horizontal’,控制器水平还是竖直放置
align:‘auto’,控制器手柄和文字的摆放位置
text:[‘top’,‘buttom’],控制器两端的文本
textGap:10,两端文字距离控制器的距离
show:false,是否显示映射控制器
dimension:0,选择 series.data 中的哪一组数据进行映射
hoverLink:true,是否启动控制器选择悬浮高亮
zlevel:5,该组件的中图形的 zlevel 值 ，图形显示的优先级
z:5,该组件中的图形 z 值，绘制图形优先级
left:‘10%’,映射控制器距离容器左侧的距离
top:‘10%’,映射控制器距离容器顶部的距离
right:‘10%’,映射控制器距离容器右侧的距离
bottom:‘10%’,映射控制器距离容器底部的距离
padding:[5,5,5,5],映射控制器内边距
backgroundColor:‘red’,映射控制器盒子的背景颜色
borderWidth:2,映射控制器盒子边框宽度
borderColor:‘red’,映射控制器盒子边框颜色
color:[‘red’,‘#fff’],该配置为了兼容 Echarts2,这里可以影响该组件中图元的颜色

8.工具箱组件（toolbox）

提供了一些工具，包括数据视图切换、数据区域缩放、图片导出等。

实现
项目名称设置效果
id:‘1’,组件ID
show:true,是否显示工具栏
orient:‘horizontal’,工具栏 icon 的布局朝向
itemSize:15,工具栏 icon 的大小
itemGap:10,工具栏 icon 每项之间的间隔
showTitle:true,是否在鼠标悬浮 icon 时，显示每一个工具的标题
zlevel:1,组件所有图形的 zlevel 值， 画布 Canvas 分层，图层优先级
z:1,组件所有图形的 z 值，图形前后绘制顺序
left:‘10%’,工具栏组件距离容器左侧的距离
right:‘10%’,工具栏组件距离容器右侧的距离
top:‘10%’,工具栏组件距离容器顶部的距离
bottom:‘10%’,工具栏组件距离容器底部的距离
width:“20%”,工具栏组件宽度
height:‘10%’,工具栏组件高度

9.系列(Series)

系列列表是图表的主要部分，每个系列代表一组相关的数据。

10.标记线和标记点（markLine 和 markPoint）

用于标记图表中的特定值或范围。

异步加载：

在ECharts中，可以通过设置setOption来动态更新图表数据。这通常结合异步操作（如Ajax请求）来实现。

基础代码：

// 假设我们有一个已经初始化的echarts实例
var myChart = echarts.init(document.getElementById('main'));
 
// 指定图表的配置项和数据（初始配置）
var option = {
    title: {
        text: 'ECharts 数据异步加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: [] // X轴的数据初始为空
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: [] // 系列中的数据初始为空
    }]
};
 
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
 
// 数据请求的函数
function fetchData(callback) {
    // 模拟异步操作
    setTimeout(function() {
        // 模拟获取到的数据
        var data = [5, 20, 36, 10, 10, 20];
        // 调用回调函数
        callback(data);
    }, 1000);
}
 
// 更新图表的数据
function updateChart(data) {
    // 假设我们有一个已经初始化的echarts实例
    var myChart = echarts.init(document.getElementById('main'));
 
    // 数据处理
    var categories = ['分类1', '分类2', '分类3', '分类4', '分类5', '分类6'];
    var seriesData = data.map(function (item, index) {
        return {
            name: categories[index],
            value: item
        };
    });
 
    // 获取数据后更新图表
    myChart.setOption({
        xAxis: {
            data: categories // X轴的数据更新
        },
        series: [{
            // 系列中的数据更新
            data: seriesData
        }]
    });
}
 
// 异步加载数据
fetchData(function (data) {
    // 使用获取到的数据更新图表
    updateChart(data);
});

图形类型

柱状图

设置好x轴和y轴并导入数据（用户消费地点分析）

基础代码

（异步加载导入数据）：

var expLoc = echarts.init(document.getElementById('expLoc'));
$.get("data/用户消费地点数据.json").done(function (data) {
    //data = JSON.parse(data),
	expLoc.setOption({
    tooltip: {
        trigger: 'axis',
    },
    grid: {
        left: '10',
        right: '10',
        bottom: '0',
        top:'30',
        containLabel: true
    },
    barCategoryGap:'60%',
    xAxis: [
        {
            type: 'category',
            data: data.消费地点,
            axisPointer: {
                type: 'shadow'
            },
            splitLine:{lineStyle:{width:0}}
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
        }
    ],
    series: [
        {
            type:'bar',
            data:data.用户人数,
        }
    ]
		})
});

展示基本效果：

在这里插入图片描述
总结drop：使用异步加载数据请务必注意对应的板块和数据，对于x,y轴，需要定义好数据，例如x,y如果颠倒数据顺序的话，就会将柱状图转换为条形图。

条形图

与柱状图一样，同样要设置一个x,y轴并导入数据（用户消费分析）

基础代码：

var expTime = echarts.init(document.getElementById('expTime'));
$.get("data/用户消费时段数据.json").done(function (data) {
    //data = JSON.parse(data);
	expTime.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '10',
        top:'30',
        right:'10',
        bottom: '10',
        containLabel: true
    },
    barCategoryGap:'50%',
    xAxis: {
        type: 'value',
        min: 0,
        boundaryGap: [0, 0.01],
        axisLine:{lineStyle:{width:0}}
    },
    yAxis: {
        type: 'category',
        splitLine:{lineStyle:{width:0}},
        data: data.消费时段
    },
    series: [
        {
            name: '售出总数量',
            type: 'bar',
            label:{
                position:'right',
                verticalAlign:'middle'
            },
            data: data.用户人数
        }
    ]
		})
});

展示基本效果：

在这里插入图片描述
总结drop：使用异步加载数据请务必注意对应的板块和数据，对于x,y轴，需要定义好数据，例如x,y如果颠倒数据顺序的话，就会将条形图转换为柱状图。

饼图

设置好圆心和半径，并导入数据（用户支付分析）

基础代码：

var payWay = echarts.init(document.getElementById('payWay'));
$.get("data/不同支付方式用户人数.json").done(function (data) {
    //data = JSON.parse(data);
	payWay.setOption({
    tooltip : {
        trigger: 'item',
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        data: data.支付方式,
        orient:'vertical',
        left:0,
        top:"25%"
    },
    grid: {
        left: '0%',
        right: '0%',
        bottom: '0%',
        containLabel: true
    },
    series : [
        {
            name: '支付方式占比',
            type: 'pie',
            radius : '62%',
            center: ['65%', '50%'],
            label:{
                formatter:"{b}\n{a|{d}%}",
                rich: {
                    a: {
                        padding:6,
                        align:'left',
                        color:'#999',
                    }
                }
            },
            data:data.data,
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
		})
});

代码展示效果：

在这里插入图片描述
总结drop：同样要设置基础的圆心和半径，并且这里设置了图例（legend）,同样用到了异步加载数据。

南丁格尔玫瑰图

在饼图的基础上设置，并且导入数据（销售金额分析）

基础代码：

var saleM_Site = echarts.init(document.getElementById('saleM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    //data = JSON.parse(data),
	saleM_Site.setOption({
    tooltip : {
        trigger: 'item',
        formatter: "{b}：<br/>{c} 元<br/>（{d}%）"
    },
    legend: {
        type:'scroll',
        data:data.where
    },
    toolbox: {
        show : false,
        feature : {
            mark : {show: true},
            dataView : {show: true, readOnly: false},
            magicType : {
                show: true,
                type: ['pie', 'funnel']
            },
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
    calculable : true,
    series : [
        {
            name:'地点',
            type:'pie',
            radius : ["25%", '60%'],
            center : ['50%', '57%'],
            roseType : 'area',
            label:{
                show:true,
                formatter:'{c}'
            },
            data:data.sale
        },
        {
            type:'pie',radius:'25%',center:['50%','57%'],
            label: {normal:{position:'center',color:'#fff'}},
            labelLine:{normal:{show:false}},itemStyle:{color:'transparent'},
            data:[{value:1,name:'地点',tooltip:{formatter:' ',backgroundColor:'none'}}]
        },
    ]
		})
});

代码实现效果：

在这里插入图片描述
总结drop：设置了一个图例滚动，比饼图多设置了一个roseType : ‘area’,

堆积图

同样设置好x,y轴并导入数据（销售分析）和（设备分析）：

基础代码：

var saleAll = echarts.init(document.getElementById('saleAll'));
$.get("data/销售金额实际值与预测值.json").done(function (data) {
    //data = JSON.parse(data),
	saleAll.setOption({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        type:'scroll'
    },
    grid: {
        left: '10',
        right: '20',
        bottom: '10',
        containLabel: true
    },
    xAxis:  {
        type: 'category',
        boundaryGap: false,
        data: ['1日','2日','3日','4日','5日','6日','7日','8日','9日','10日',
		'11日','12日','13日','14日','15日','16日','17日','18日','19日','20日','21日','22日']
    },
    yAxis: {
        type: 'value',
        name: '金额（万元）',
        axisLabel: {
            formatter: '{value}'
        }
    },
    series: [
        {
            name:'销售金额实际值',
            type:'line',
            data:data.T,
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(194, 53, 49,.8)'
                    }, {
                        offset: 1,
                        color: 'transparent'
                    }])
                }
            },
        },
        {
            type:'line',
            name:'销售金额预测值',
            data:data.Y,
            areaStyle:{
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(47, 69, 84,.4)'
                    }, {
                        offset: 1,
                        color: 'transparent'
                    }])
                }
            }
        },
    ]
		})
});

代码展示效果：

在这里插入图片描述

基础代码：

var mVolume = echarts.init(document.getElementById('mVolume'));
$.get("data/不同地点售货机库存数量和缺货数量.json").done(function (data) {
	//data = JSON.parse(data),
	mVolume.setOption({
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:data.类型,
        type:'scroll',
    },
    barWidth:'35%',
    barCategoryGap:'40%',
    grid: {
        left: '10',
        right: '20',
        bottom: '10',
        containLabel: true
    },
    xAxis:  {
        type: 'category',
        data: data.地点
    },
    yAxis: {
        type: 'value',
    },
    series: [
        {
            name:'库存总量',
            type:'bar',
            stack: '总量',
            label:{
                position:'insideTop',
                padding:[5,0,0,0]
            },
            data:data.库存数量,
        },
        {
            type:'line',
            name:'预警线',
            connectNulls: 'true',
            data:[150,150,150,150,150],
        },
        {
            name:'缺货总量',
            type:'bar',
            stack: '总量',
            label:{
                position:'insideTop',
                padding:[5,0,0,0]
            },
            itemStyle:{
                color:'#ca841e'
            },
            data:data.缺货数量,
        }
    ]
		})
});

代码展示效果：

在这里插入图片描述

总结drop：堆积图有柱状堆积图和线堆积图，在基础的柱状图和线图上都设置了type为stack。

树图

设置并导入数据（商品分析）：

基础代码：

var turnaround = echarts.init(document.getElementById('turnaround'));
$.get("data/各类商品存货周转天数.json").done(function (data) {
    //data = JSON.parse(data),
    turnaround.setOption({
        tooltip:{
        formatter: '{b}：{c}'
    },
    series: [{
        type: 'treemap',
        label:{
            show:true,
            position:'insideTopLeft',
            distance:0,
            padding:10,
            formatter:"{b}\n{a|{c}}",
            rich: {
                a: {
                    padding:6,
                    align:'right',
                    verticalAlign:'bottom',
                    color:'#fff',
                }
            }
        },
        roam:false,
        nodeClick:false,
        breadcrumb:{show:false},
        itemStyle:{
            gapWidth:5,
            borderColor:'transparent'
        },
        data: data.data
    }]
        })
});

代码展示效果：

在这里插入图片描述
总结drop：树图要设置好type（treemap）,并且根据数据出现的频次展示大小。

雷达图

设置并导入数据（用户分群分析）

基础代码：

var userGroup = echarts.init(document.getElementById('userGroup'));
$.get("data/用户分群数据.json").done(function (data) {
    //data = JSON.parse(data);
	userGroup.setOption({
    tooltip: {},
    legend: {
    },
    radar: {
        name: {
            textStyle: {
                color: '#fff',
                borderRadius: 3,
                padding: [3, 5]
           }
        },
        center: ['50%', '58%'],
        splitArea: {
            areaStyle: {
                color:'transparent'
            }
        },
        axisLine: { lineStyle: {color: '#061e42' }},
        splitLine: { lineStyle: {color: '#061e42' }},
        indicator: [
           { name: '消费金额', max: 80,color:'black'},
           { name: '购买数量', max: 80,color:'black'},
           { name: '购买频率', max: 80,color:'black'},
           { name: '交易次数', max: 80,color:'black'},
           { name: '客单价', max: 80,color:'black' }
        ]
    },
    series: [{
        name: '用户分群',
        type: 'radar',
        
        areaStyle:{
            show:true,
            opacity:0.3
        },
        data : data.data
    }]
		})
});

代码展示效果：

在这里插入图片描述
总结drop：设置了type(radar)。并设置了一个indicator设置数据的最大值等数据

仪表盘

设置并导入数据（购买用户数分析）：

基础代码：


$.get("data/无人售货机各特征数据.json").done(function (data) {
    //data = JSON.parse(data);
    saleT('saleM', '销售金额', 0, data.销售金额[0], data.销售金额[1], data.销售金额[2], '','#1779d9','rgba(23,121,217,0.6)');
    saleT('orderQ', '订单量', 0, data.订单量[0], data.订单量[1], data.订单量[2], '','#30b761','rgba(48,183,97,0.5)');
    saleT('grossM', '毛利润', 0, data.毛利润[0], data.毛利润[1], data.毛利润[2], '','#d04a4b','rgba(208,74,75,0.5)');
    saleT('discount', '折扣额', 0, data.折扣额[0], data.折扣额[1], data.折扣额[2], '千','#ca841e','rgba(202,132,30,0.5)');
    saleT('unitP', '客单价', 0, data.客单价[0], data.客单价[1], data.客单价[2], '','#00a7c2','rgba(0,167,194,0.5)');
});
$.get("data/售货机销售金额及其环比增长率.json").done(function (data) {
    //data = JSON.parse(data);
	saleRate.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        }
    },
    grid: {
        //用网格定位图表四边留空及顶部避开标题位置
        x: 10,
        y: 50,
        x2: 10,
        y2: 10,
        //使坐标轴数据能完整显示
        containLabel: true
    },
    //设置legend位置及数据，位于图表右上方
    legend: {
        data:['销售金额','销售金额环比增长率'],
        top: 10
    },
    barCategoryGap:'40%',
    xAxis: [
        {
            type: 'category',
            //日期数据
            data: data.日期,
            axisPointer: {
                type: 'shadow'
            },
            //运用eCharts内置方法格式化日期，使x轴日期数据更简洁，同时不影响原数据在鼠标交互时的完整展现
            axisLabel: {
                formatter: function(value){
                    return echarts.format.formatTime('dd', value);
                }
            }
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '销售金额（元）',
            //设置Y坐标轴最小值
            min: 0,
            //设置Y坐标轴最大值
            max: 15000,
            //设置Y坐标轴值间隔值
            interval: 5000
        },
        //定义Y轴右侧坐标轴
        {
            type: 'value',
            name: '环比增长率（%）',
            min: -0.5,
            max: 1,
            interval: 0.5
        }
    ],
    series: [
        {
            name:'销售金额',
            type:'bar',
            //设置显示坐标点数值
            label:{
                show:'true'
            },
            //销售金额数据
            data:data.销售金额
        },
        {
            name:'销售金额环比增长率',
            type:'line',
            //设置“销售金额环比增长率”数值样式,圆角矩形黑底白字，位于数据点上方
            label:{
                //设置显示坐标点数值
                show:'true',
                color:'#fff',
                backgroundColor:'rgba(0,0,0,0.7)',
                verticalAlign:'middle',
                padding:4,
                borderRadius:4,
                position:'top'
            },
            //设置“销售金额环比增长率”在坐标轴右侧显示
            yAxisIndex: 1,
            //销售金额环比增长率数据
            data:data.销售金额环比增长率
        }
    ]
		})
});

代码展示效果（总共5个图，只截取了一个）：

在这里插入图片描述
总结drop：设置type: ‘gauge’

气泡图

设置并导入数据（商品分析）

基础代码：

var priceRange = echarts.init(document.getElementById('priceRange'));
$.get("data/商品销量数量和价格数据.json").done(function (data) {
    //data = JSON.parse(data),
	priceRange.setOption({
    grid: {
        left: '3%',
        right: '10',
        bottom: '10',
        containLabel: true
    },
    tooltip : {
        showDelay : 0,
        formatter : function (params) {
                return params.seriesName + '<br/>'
                + '单价：' + params.value[0] + '<br/>'
                + '销量：' + params.value[1];
        },
        axisPointer:{
            show: true,
            type : 'cross',
            lineStyle: {
                type : 'dashed',
                width : 1
            }
        }
    },

    legend: {
        type:'scroll',
    },
    xAxis :{ scale:true},
    yAxis :{ scale:true},
	})
});
$.get("data/商品销量数量和价格数据.json").done(function (data) {
    //data = JSON.parse(data);
    var series=[];
    for(var i = 0;i < data.data.length;i++){
        series.push({
            name: data.data[i].name,
            type: 'scatter',
            data: [data.data[i].value],
            symbolSize:data.data[i].value[1]*2
        });
    }
    priceRange.setOption({
        series:series
    });
});

代码展示效果：

在这里插入图片描述
总结drop：设置 type : ‘cross’,

关键代码：
$.get("data/商品销量数量和价格数据.json").done(function (data) {
    //data = JSON.parse(data);
    var series=[];
    for(var i = 0;i < data.data.length;i++){
        series.push({
            name: data.data[i].name,
            type: 'scatter',
            data: [data.data[i].value],
            symbolSize:data.data[i].value[1]*2
        });
    }
    priceRange.setOption({
        series:series
    });
});

词云图

设置并导入数据（商品分析）：

基础代码：

var chart = echarts.init(document.getElementById('userHot'));
$.get("data/用户购买的商品名称和商品数量数据.json").done(function (data) {
    //data = JSON.parse(data);
    var option = {
        tooltip : {
            trigger: 'item',
            formatter:function(item){
                return item.name + "：" + item.value.toFixed(2);
            }
        },
        series: [ {
            type: 'wordCloud',
            sizeRange: [10,30],
            rotationRange: [0, 0],
            rotationStep: 180,
            gridSize: 0,
            autoSize: {enable:true, minSize:5},
            shape: 'roundRect',
            left: 'center',
            top: 'center',
            width: '100%',
            height: '100%',
            right: null,
            bottom: null,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 26,
                    color:'#333',
                    shadowColor: '#ccc',
                    fontSize:20
                }
            },
            data: data.data.sort(function (a, b) {
                return b.value  - a.value;
            })
        } ]
    };
    chart.setOption(option);
});

代码展示效果：

在这里插入图片描述

总结drop：设置type: ‘wordCloud’,

关键代码：
            data: data.data.sort(function (a, b) {
                return b.value  - a.value;
            })
憨憨yang
关注
  • 25
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【GESP】2023年12月图形化二级 -- 小杨报数
老马的程序人生
05-11 265
小杨需要从1到N报数。在报数过程中，小杨希望跳过M的倍数。例如，如果N5M2，那么小杨就需要依次报出135。默认小猫角色和白色背景，编写程序计算小杨报数的和（1359。
陈关荣教授直播课总结.docx
06-11
结论部分，不应简单复述摘要，而应详细总结主要贡献，指出不足之处，并对未来研究方向进行展望。遵循与摘要相同的规则，不引用方程、表格编号，不重复讨论或提供额外证明。 在致谢环节，感谢审稿人、提供实质建议的...
Echarts 安装与使用
i_Satan的博客
04-29 5275
Echarts 安装与使用 参考文章@_cris 安装 npm i install echarts 注意事项 一定要给实例化的 根 ,定 宽高. 注意 series 单词的拼写.(系列,连续) 注意 echarts 的实例化和 引入. 初始化 html: <div ref="myechart" id="myechart"></div> js: 方式一: // main.js import * as echarts from "echarts" var myC
Axure嵌入Echarts图表
weixin_45954510的博客
05-25 719
3.矩形框添加交互：点击【交互】按钮 ，选择载入时链接到外部URL，再点击f(x)按钮插入函数，可直接粘贴我的代码。【注：一定要修改代码，矩形框名称要填写对】2. 在Axure内绘制 一个矩形框，矩形框要命名，举例：Echarts。
SpringBoot+Mybatis+HTML实现Echarts可视化
qq_45119821的博客
05-19 1329
ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。接下来小编就带你们了解SpringBoot和HTML怎么实现Echarts可视化的，本案例与数据库操作用的是Mybatis框架，实现一个扇形的可视化图进而分析学生年龄段的人数(年龄是自己写的，主要是为了展示效果)。 首先我们需要创建个数据库，命名为school，创建一个表为student。小编已经为你们准备好数据了，直接复制粘贴就可以啦。 /* Navicat Premium Dat
关于Echarts环状标题图高度不生效的bug 处理方法
Yxlov的博客
03-06 651
今天开发任务中，遇到了一个有关于echart 的问题，在对环状图形开发的时候，设置标题与环状图的高度差是，调试了一个小时左右，通过获取dom 节点去做更改样式，改了好久怎么都不生效，通过官方api 去做一个修改，但是官方的api好像也不行，最后去看了一下源码，原来在设置orient属性的值为horizontal的时候只能改宽度，不能修改高度，高度为auto，然后通过改内置样式进行修改。 这就是解决方案啦，大家可以试试，通过设置padding 可以解决。
echarts name 坐标轴_echarts 修改y轴name的样式
weixin_42266267的博客
12-24 1379
微信小程序开发教程9月21日晚发布的微信公众平台·小程序内侧邀请,微信应用号(小程序,「应用号」的新称呼)终于来了!目前还处于内测阶段,微信只邀请了部分企业参与封测.想必大家都关心应用号的最终形态到底是什么样子? 怎样 ...LightGBM中GBDT的实现现在LightGBM开源了,这里将之前的一个文档发布出来供大家参考,帮助更快理解LightGBM的实现,整体思路应该是类似的. LightGB...
小杨的储蓄
2301_80065123的博客
04-30 678
小杨共有N个储蓄罐，编号从0到N−1。从第1天开始，小杨每天都会往存钱罐里存钱。具体来说，第i天他会挑选一个存钱罐ai​，并存入i元钱。过了D天后，他已经忘记每个储蓄罐里都存了多少钱了，你能帮帮他吗？
echarts使用
寨板p45黑苹果10.12.6
04-29 187
文章目录基本概述Echarts和后端的交互(柱状图、折线图、扇形图) 基本概述 Echarts:是一种图表展示技术，信息汇总，数据统计的时候，类似的图表展示技术：JFreeChart、HighChart等 Echarts官网：https://www.echartsjs.com/zh/index.html Echarts的使用： 引入echarts.js 提供一个容器显示图表 初始化Echart，...
ECharts大屏失帧如何解决
qq_53818683的博客
04-19 700
浏览器兼容性问题：不同浏览器可能对 CSS 和 HTML 标准有不同的解释，这可能导致图表失真。解决方法是检查浏览器兼容性，并使用相应的解决方案。图表配置错误：ECharts 提供了很多配置项，如果配置错误可能导致图表失真。解决方法是仔细检查配置项并确保它们正确地设置了。元素缩放：如果元素被放大或缩小了，可能会导致图表失真。分辨率不匹配：大屏分辨率与实际分辨率不匹配，导致图表显示失真。图表数据异常：如果数据异常可能导致图表失真。总之，要解决 ECharts 大屏失真问题，需要仔细检查以上因素，并逐一解决。
[小杨]易语言初学者系列教程
07-23
[小杨]易语言初学者系列教程 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
八年级政治上册 第9课 一步之遥教案 教科版.doc
11-17
《一步之遥》这篇教案主要探讨的是青少年犯罪及其预防，旨在引导中学生理解犯罪的成因，明白“小恶”可能导致“大恶”的道理，并学习如何防微杜渐，避免走上犯罪的道路。以下是对教案中涉及知识点的详细解读： 1. *...
八年级政治上第九课 一步之遥 教案（教科版）.doc
11-17
这篇文档是关于中学政治课程的教学教案，主题为“一步之遥”，主要探讨青少年犯罪和预防犯罪的重要性。课程通过三个教学活动引导学生理解犯罪的成因、避免走向犯罪的道路以及如何改正错误。 活动一关注了小磊的故事...
初中语文文摘情感老滕和小杨
09-09
这篇故事并非关于IT知识，而是讲述了一段发生在初中语文文摘中的情感故事，涉及人物老滕和小杨的情感纠葛。故事围绕着学院的一次旅游活动展开，小杨对老滕抱有好感，但最终未能表达心意，反而因误解和情绪激动导致了...
Python编码系列—Python数据可视化：Matplotlib与Seaborn的实战应用
u013889591的专栏
08-19 1383
在数据科学领域，数据可视化是一种将复杂数据转换为直观图形的强大工具。Python的Matplotlib和Seaborn库因其强大、灵活的可视化功能而广受数据科学家的青睐。本文将深入探讨这两个库的高级应用，结合实际案例，为CSDN社区的读者们展示如何利用它们进行高效的数据可视化。数据可视化是数据分析的关键步骤，它帮助我们理解数据模式、趋势和异常。Matplotlib是Python中一个基础的绘图库，提供了丰富的绘图功能。
【深度解析】WRF-LES与PALM微尺度气象大涡模拟
weixin_49857990的博客
08-19 537
针对微尺度气象的复杂性，大涡模拟（LES）提供了一种无可比拟的解决方案。微尺度气象学涉及对小范围内的大气过程进行精确模拟，
【精选】基于数据可视化的智慧社区内网平台
最新发布
程序员阿龙的博客
08-23 578
随着计算机技术发展，计算机系统的应用已延伸到社会的各个领域，大量基于网络的广泛应用给生活带来了十分的便利。所以把智慧社区内网管理与现在网络相结合，利用计算机搭建智慧社区内网平台，实现智慧社区内网的信息化。则对于进一步提高智慧社区内网管理发展，丰富智慧社区内网管理经验能起到不少的促进作用。系统阐述的是一款基于数据可视化的智慧社区内网平台的设计与实现，对于Python、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计，描述，实现和分析与测试方面来表明开发的过程。
如何让python爬虫的数据可视化？
lhx19373106160的博客
08-22 509
Python 爬虫数据可视化是一个涉及多个步骤的过程，主要包括数据抓取、数据处理、以及使用可视化库进行数据展示。以下是一个基本的流程介绍和示例，帮助你理解如何使用 Python 实现这一过程。
echarts 无法展开
10-19
根据提供的引用内容，如果echarts无法展开，可能是因为以下原因： 1. 数据中没有子节点，即hasChild字段为false，导致无法展开。 2. 没有正确设置节点的collapsed属性，导致节点无法展开。 3. 没有正确设置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值