Echarts结课之小杨总结版

Echarts结课之小杨总结版

  • 前言
  • 基础回顾
    • 框架
      • sale框架
        • 代码:
      • user框架
        • 基础代码:
      • inventory框架
        • 基础代码:
      • total框架
        • 基础代码:
    • 基础设置
      • 1.标题(Title)
      • 2.图例(Legend)
        • 实现
      • 3.工具提示(Tooltip)
        • 实现
      • 4.X轴(X Axis) 和 Y轴(Y Axis)
      • 5.数据缩放组件(dataZoom)
        • 实现
      • 6.网格组件(gride):
        • 实现
      • 7、视觉映射组件(visualMap)
        • 实现
      • 8.工具箱组件(toolbox)
        • 实现
      • 9.系列(Series)
      • 10.标记线和标记点(markLine 和 markPoint)
    • 异步加载:
      • 基础代码:
  • 图形类型
    • 柱状图
      • 基础代码
      • 展示基本效果:
    • 条形图
      • 基础代码:
      • 展示基本效果:
    • 饼图
      • 基础代码:
      • 代码展示效果:
    • 南丁格尔玫瑰图
      • 基础代码:
      • 代码实现效果:
    • 堆积图
      • 基础代码:
      • 代码展示效果:
      • 基础代码:
      • 代码展示效果:
    • 树图
      • 基础代码:
      • 代码展示效果:
    • 雷达图
      • 基础代码:
      • 代码展示效果:
    • 仪表盘
      • 基础代码:
      • 代码展示效果(总共5个图,只截取了一个):
    • 气泡图
      • 基础代码:
      • 代码展示效果:
        • 关键代码:
    • 词云图
      • 基础代码:
      • 代码展示效果:
        • 关键代码:

前言

对于期末,我们实现了一个小小项目(无人售货机),首先设置好框架,并且在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;
            })

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/624980.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数据采集为什么会用到代理IP?

在数据采集中&#xff0c;代理IP是指通过使用代理服务器来隐藏或更改真实的IP地址&#xff0c;以访问目标网站或服务器。那么&#xff0c;数据采集为什么会用到代理IP呢&#xff1f;使用代理IP通常用于匿名地访问网站、绕过访问限制或提高数据采集的效率和安全性。 代理服务器作…

3d渲染的基本原理和流程是什么?渲染100邀请码1a12

3D渲染是把三维模型转化为二维图像的过程&#xff0c;通过它我们能得到逼真炫酷的图片效果&#xff0c;作为3D渲染人&#xff0c;我们需要了解很多知识&#xff0c;这里我们先介绍下它的基本原理和流程。 1、3D渲染的基本原理 3D渲染的基本原理是模拟光线在三维空间中的传播和…

银行业数据运营场景下的数据埋点方案

1、引言 随着金融科技的快速发展&#xff0c;银行业的数据运营变得日益重要。数据埋点作为数据收集的重要手段&#xff0c;对于银行业务的精细化运营、风险管理和产品迭代等方面起着至关重要的作用。本方案将针对银行业数据运营场景&#xff0c;设计一套完整的数据埋点方案&am…

算法-卡尔曼滤波之卡尔曼滤波的第一个方程:状态更新方程

通过一个例子来引出卡尔曼滤波的状态更新方程&#xff1b; 这里系统状态是金条的重量&#xff1b; 为了估计系统的状态&#xff0c;我们可以多次测量金条的重量&#xff0c;然后求平均值&#xff1b; 其中估计值是所有测量值的平均值&#xff1b; 由于我们使用的是静态模型&am…

css: 动态设置网格线

参考这个博客做了网格线&#xff1a; http://t.csdnimg.cn/y20vM 把网格颜色&#xff0c;宽高和透明度做成可配置项。 <e-collapse title"网格线" :expand"false"><t-form-item label"颜色"><el-color-picker v-model"fo…

如何在 Mac 上恢复已删除的文件

点击“删除”后立即后悔&#xff1f;不用担心。我们的教程介绍了如何恢复已删除的 Mac 文件、电子邮件、iTunes 音乐等&#xff0c;即使您没有 Time Machine 备份并且无需支付软件费用。 在 macOS 中丢失文件可能会非常痛苦&#xff0c;如果您是点击删除的人&#xff0c;情况会…

文件怎么转成二维码图片?长期使用的文件活码的制作方法

文件二维码是现在很常用的一种展现分享文件的方式&#xff0c;采用这种方式可以快速通过扫码的方式来查看文件内容&#xff0c;比如excel、word、ppt、pdf等文件格式都可以生成二维码之后在手机上预览内容。那么文件制作二维码的步骤是什么样的呢&#xff1f;下面就来教大家一招…

rabbitmq交换机,死信队列的简单例子

假设我们有一个场景&#xff0c;生产者有消息发到某个直连交换机&#xff0c;这个交换机上有两个队列分别存储两种类型的消息&#xff0c;但是与这两个队列相连的消费者太不争气了&#xff0c;处理消息有点慢&#xff0c;我们想5秒钟这个消息在队列中还没有被消费的话&#xff…

idea上如何新建git分支

当前项目在dev分支&#xff0c;如果想在新分支上开发代码&#xff0c;如何新建一个分支呢&#xff1f;5秒搞定~ 1、工具类选择git&#xff0c;点击New Branch 或者右下角点击git分支&#xff0c;再点击New Branch 2、在弹出的Create New Branch弹窗中&#xff0c;输入你的新分支…

Open AI再次定义AI PC?

从传统的文字交互&#xff0c;到语音和图像交互——Open AI再次提升了人们对AI PC的想象空间。 这种更贴近人类间交互的模式&#xff0c;会多大程度改变目前PC的生态&#xff1f; 随着苹果M4芯片、高通骁龙X的发布&#xff0c;AI PC也逐渐成为了市场热议的产品。 从各家PC厂…

‍♂️垃圾收集算法必看!学习指数满天星!!!

&#x1f435;看完这篇文章&#xff0c;希望你有点收获&#x1f697; 注意&#xff1a;看之前你需要对JVM有点了解。。。 首先&#xff0c;垃圾回收算法主要分有三种: 标记-清除算法 见名知意&#xff0c;标记-清除&#xff08;Mark-Sweep&#xff09;算法分为两个阶段&#…

高清SDI串行数字接口采集卡与传输编码器

随着科技的快速发展&#xff0c;我们正处于一个数字化、信息化的时代&#xff0c;各式各样的设备正成为人们工作和生活中必不可少的伙伴。今天&#xff0c;我要向大家介绍的是一款具有革命性意义的视频采集卡——LCC262。这款由灵卡技术团队精心打造的产品&#xff0c;集合了多…

越来越真的Deepfake再次引起网安界的关注

当地时间5月6日&#xff0c;全球网络安全领域最受关注的年度盛会 RSAC 2024在美国旧金山隆重开幕。当天&#xff0c;被誉为“安全圈奥斯卡”的创新沙盒大赛也决出了冠军&#xff0c;Reality Defender凭借其创新性的深度伪造&#xff08;Deepfake&#xff09;检测平台摘得桂冠&a…

MySQL用SQL取三列中最大的数据值

1、有如下数据&#xff1a; ABC000097.0600330.72330.720069.650027.8827.85086.92086.92219.42219.4219.41 需要展示为如下形式&#xff1a; ABC结果列0000097.06097.060330.72330.72330.7200669.65009.6527.8827.85027.8886.92086.9286.92219.42219.4219.41219.42 解决办…

IP代理中的SOCKS5代理是什么?安全吗?

在互联网世界中&#xff0c;网络安全和个人隐私保护变得日益重要。SOCKS5代理作为一种安全高效的网络工具&#xff0c;不仅可以保护个人隐私安全&#xff0c;还可以提供更稳定、更快度的网络连接。本文将带大家深入了解SOCKS5代理在网络安全领域中的应用。 什么是SOCKS5代理 …

肺部营养“救星”,让每次呼吸更自由

​#肺科营养#朗格力#班古营养#复合营养素#肺部营养# 正常的健康人,每天自由幸福的呼吸。但是对于肺病患者来说,特别是慢阻肺人群,每一次呼吸都可能是一场挑战,每一口气都显得弥足珍贵。 肺病患者号称沉默的“呼吸杀手”,它虽然沉默,但不代表它没能力,除了引起肺功能下降,氧气…

智慧安防监控EasyCVR视频汇聚管理平台视频播放花屏的原因分析及处理

智慧安防监控EasyCVR视频管理平台能在复杂的网络环境中&#xff0c;将前端设备统一集中接入与汇聚管理。国标GB28181协议视频监控/视频汇聚EasyCVR平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、…

Python多任务

进程 1. 进程的概念 一个正在运行的程序或者软件就是一个进程&#xff0c;它是操作系统进行资源分配的基本单位&#xff0c;也就是说每启动一个进程&#xff0c;操作系统都会给其分配一定的运行资源(内存资源)保证进程的运行。 比如:现实生活中的公司可以理解成是一个进程&a…

乡村振兴与乡村旅游深度融合:依托乡村自然和文化资源,发展乡村旅游产业,促进农民增收致富,打造特色美丽乡村

目录 一、引言 二、乡村振兴与乡村旅游的内在联系 三、依托乡村自然和文化资源发展乡村旅游产业 &#xff08;一&#xff09;挖掘乡村自然资源优势&#xff0c;打造特色旅游品牌 &#xff08;二&#xff09;挖掘乡村文化资源内涵&#xff0c;丰富旅游活动内容 四、促进农…

lerna实战(一)

前言 将大型代码仓库分割成多个独立版本化的 软件包&#xff08;package&#xff09;对于代码共享来说非常有用。但是&#xff0c;如果某些更改 跨越了多个代码仓库的话将变得很 麻烦 并且难以跟踪&#xff0c;并且&#xff0c; 跨越多个代码仓库的测试将迅速变得非常复杂。 …