大数据可视化 结课项目*无人售货机

已于 2024-05-13 11:35:36 修改
阅读量1.5k 收藏 61
点赞数 38
文章标签： 信息可视化
于 2024-05-13 11:31:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a040607/article/details/138782973
版权

目录

一.效果展示

二.项目解析

1.模块分析

2.项目分析

一.HTML内容展示

二.代码内容

三.代码简述

四.js图表代码解析

        1.代码展示

                一.int.js

二.效果图

三.代码解析

第一个 柱形图

第二个饼图

第三个条形图

第四个矩形树图

第五个双y图

一.效果展示

  

二.项目解析

1.模块分析

   可以看见项目所用到的文件分为四部分：                            一.css 提供的是HTML中所用的的样式                                          二.data中提供的是图表所用到的数据,图表通过异步加载获取数据                                                                                                  三.js 提供的是项目charts所用样式与图表所用js,在sale,total,user,inventory中写的是项目代码。本次所有图表数据写在js中通过在HTML中进行调用js,获取图表数据。                           四.html中写的是盒框架,是为图表进行分割做的样式

2.项目分析

一.HTML内容展示

       html的效果展示,此时是无图表数据状态，正上方可以看见一共四个选项,每个选项即一个新的页面。

二.代码内容

       

<!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>
<!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>
<!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>
<!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>
三.代码简述

        在第六行中href提供的是本地所在文本,reset内容为HTML所用到的样式(图表内容是echarts,框架为HTML内容)。。

        在最后的三大行提供的是图表所用数据,第一行是echarts图表样式所用的js，第二行为异步加载所用的js,第三行为图表内容所用js。(词云图要单独另导入wordcloud.js)

四.js图表代码解析
        1.代码展示
                一.int.js
// 商品存货周转天数
var formatUtil = echarts.format;
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
    }]
        })
});



// 存销量
var stockSales = echarts.init(document.getElementById('stockSales'));
$.get("data/商品库存数量和销售数量.json").done(function (data) {
    //data = JSON.parse(data),
	stockSales.setOption({
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	grid: {
		left: '0%',
		top:'60',
		right:'5%',
		bottom: '10',
		containLabel: true
	},
	barWidth:'45%',
	legend: {
		data:data.数量类型,
		top:'22'
	},
	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',
			stack: '数量',
			label:{
				position:'insideRight',
				padding:[0,5,0,0],
			},
			data: data.销售数量
		},
		{
			name: '库存数量',
			type: 'bar',
			stack: '数量',
			label:{
				position:'insideRight',
				padding:[0,5,0,0],
			},
			data: data.库存数量
		}
	]
		})
});



// 滞销商品
var unsalable = echarts.init(document.getElementById('unsalable'));
$.get("data/商品滞销数据.json").done(function (data) {
	//data = JSON.parse(data),
	unsalable.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        left: '10',
        right: '10',
        bottom: '10',
        containLabel: true
    },
    toolbox: {
        show:false,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:data.name
    },
    barGap:'10%',
    barCategoryGap:'25%',
    xAxis: [
        {
            type: 'category',
            data: data.商品名称,
            axisPointer:{type:'shadow'},
            splitLine:{lineStyle:{width:0}},
            axisLabel:{rotate:30}
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
            max: 500,
            interval: 100,
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{lineStyle:{width:0}},
        },
        {
            type: 'value',
            name: '',
            min: 0,
            max: 1,
            interval: 0.2,
            axisLabel: {
                formatter: '{value} '
            },
            axisLine:{lineStyle:{width:0}},
            
        }
    ],
    series: [
        {
            name:'滞销金额',
            type:'bar',
            data:data.滞销金额
        },
        {
            name:'存货周转率',
            type:'line',
            yAxisIndex: 1,
            label:{
                show:'true',
                color:'#fff',
                backgroundColor:'rgba(235,48,48,0.8)',
                verticalAlign:'middle',
                padding:[2,4,0,4],
                borderRadius:4,
                position:'inside'
            },
            data:data.存货周转率
        },
        {
            name:'库存数量',
            type:'bar',
            data:data.库存数量
        }
    ]
		})
});



//品类库存占比
var categoryStock = echarts.init(document.getElementById('categoryStock'));
$.get("data/不同类型的商品库存数量.json").done(function (data) {
	//data = JSON.parse(data),
	categoryStock.setOption({
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        data:data.类型,
        left: 10,
        top: 20,
    },
    series: [
        {
            name:'品类',
            type:'pie',
            radius: [0, '40%'],
            center : ['55%', '53%'],
            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:data.一级商品
        },
        {
            name:'品类',
            type:'pie',
            color:['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple',
                'DarkOrchid', 'Navy', '#061e42', 'black', '#4f8fa8'],
            radius: ['40%', '66%'],
            center : ['55%', '53%'],
            selectedMode: 'multiple',
            itemStyle:{
                borderWidth:'2',
                borderColor:'none'
            },
            label: {
            },
            data:data.二级商品
        }
    ]
		})
});



// 设备容量
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.缺货数量,
        }
    ]
		})
});



window.onresize = function() {
    turnaround.resize();
    stockSales.resize();
    unsalable.resize();
    categoryStock.resize();
    mVolume.resize();
}
二.效果图

三.代码解析

        可以看见一个为五个图表，分别为柱状堆积图，饼图，条形图，矩形树图，

第一个 柱形图

柱状折线图（Column-Line Chart）结合了柱状图和折线图的特点，适用于以下几种场景：

  1. 比较不同类别的数据：柱状折线图可以同时显示不同类别的数据，其中柱状图部分用于比较各类别之间的数量或大小差异，而折线图部分则可以显示某个指标随时间或其他变量的趋势变化，使得比较更加直观。

  2. 显示趋势和总体分布：柱状图可以突出显示各类别的整体情况，而折线图则可以展示数据随时间或其他变量的变化趋势，这样可以在同一个图表中同时观察到总体分布和趋势特征。

  3. 分析关联性：柱状折线图可以用于分析两个或多个变量之间的关联性。通过观察柱状图和折线图的变化趋势，可以发现它们之间的相关性或反相关性，从而深入了解数据之间的关系。

  4. 突出特定数据点：柱状折线图可以突出显示某些特定的数据点或事件，例如在折线图上标注出某些重要的时间点或异常数值，并与柱状图进行对比，以便更好地理解数据的含义。

  5. 展示多维数据：如果数据具有多个维度，柱状折线图可以同时展示不同维度的数据，并通过柱状图和折线图的组合，使得数据的多维特征更加清晰地呈现出来。

总的来说，柱状折线图适用于需要同时展示不同类别数据的总体分布和趋势变化的场景，通过结合柱状图和折线图的优势，可以更全面地分析和理解数据。

// 设备容量
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.缺货数量,
        }
    ]
		})
});

所用图表数据

 第一句设置图表应用的框架名为 mvolume 框架在html中存在

可以看见有一个id为 mvolume的

第二句为获得异步数据所在的数据表，将其数据集命名为data使用函数调用

从setoption就是图表绘制了

图表浮框，触发方式为坐标轴

演示

图例，从表中名为类型中获得，类型为滚动式图例

而后设置了柱形图的宽度和同一系列的柱间距离,直角坐标系内绘图网格左右低边距 区域是否包含坐标轴的刻度标签

yx轴的设置，x轴为类目类型，数据从data.地点中获取，y轴类型为数据

 设置图表名称，堆积为总量，类型为柱状和折线，标签设置了边距和位置，对缺货总量设置了颜色，line设置了是否连接空数据。

第二个饼图

饼图是一种常用的数据可视化工具，适用于以下几种场景：

  1. 比例展示：饼图最适合用于展示各类别数据在整体中的占比情况。例如，销售额分布、市场份额、人口构成等，饼图能够清晰地显示每个类别所占比例，使得比例关系一目了然。

  2. 简单数据集：当数据集相对简单，且类别数量较少时，饼图是一种简洁直观的展示方式。它可以帮助观众快速理解数据的结构和分布。

  3. 强调特定类别：如果想要强调某个特定类别在整体中的重要性或显著性，饼图可以将该类别放在中心位置或与其他类别有一定的偏移，使其更加突出。

  4. 临时展示：在会议、演示或简短的报告中，饼图可以作为快速展示数据结构和比例的手段，便于观众快速理解核心信息。

  5. 总结和概览：饼图适用于对数据进行总结和概览，以便快速了解各类别的相对重要性或比例关系，而不需要深入详细分析每个类别的细节。

尽管饼图在某些场景下非常有用，但也需要注意其局限性。例如，当类别数量过多时，饼图会变得拥挤难以理解；另外，饼图不适合用于展示时间序列数据或连续变量的分布情况。因此，在选择数据可视化方式时，需要根据数据类型、目的和观众需求来进行合理选择。

//品类库存占比
var categoryStock = echarts.init(document.getElementById('categoryStock'));
$.get("data/不同类型的商品库存数量.json").done(function (data) {
	//data = JSON.parse(data),
	categoryStock.setOption({
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        data:data.类型,
        left: 10,
        top: 20,
    },
    series: [
        {
            name:'品类',
            type:'pie',
            radius: [0, '40%'],
            center : ['55%', '53%'],
            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data:data.一级商品
        },
        {
            name:'品类',
            type:'pie',
            color:['LimeGreen', 'DarkGreen', 'red', 'blue', 'Purple',
                'DarkOrchid', 'Navy', '#061e42', 'black', '#4f8fa8'],
            radius: ['40%', '66%'],
            center : ['55%', '53%'],
            selectedMode: 'multiple',
            itemStyle:{
                borderWidth:'2',
                borderColor:'none'
            },
            label: {
            },
            data:data.二级商品
        }
    ]
		})
});

与上述相同的不做解释，图例legend加入了一行竖显示 

类型为饼图，设置了半径和圆心位置，对标签的位置做了设置，对标签线不做显示


进行了颜色的一个预设,对区块设置了宽度，颜色为none,

第三个条形图

条形图是一种常用的数据可视化工具，适用于以下几种场景：

  1. 比较数据：条形图适合用于比较不同类别之间的数据大小或数量差异。通过条形的长度可以直观地反映数据的大小，使得比较更加清晰明了。

  2. 排名展示：当需要展示各类别的排名情况时，条形图是一种直观的方式。数据按照大小顺序排列，并以条形的高度表示，可以清晰地显示出各类别之间的排名关系。

  3. 趋势分析：条形图也可以用于展示数据随时间或其他变量的趋势变化。通过将时间或其他变量作为横轴，将数据作为纵轴，可以用条形的高度来表示数据的变化情况。

  4. 分类数据：当数据具有明确的分类属性时，条形图可以帮助将数据按照类别进行分组，并直观地比较各类别之间的差异。

  5. 交叉分析：在需要进行多维数据交叉分析时，条形图可以同时展示不同维度的数据，并以条形的长度或颜色来表示不同维度的差异，帮助观察者更好地理解数据之间的关系。

总的来说，条形图是一种简单直观且易于理解的数据可视化方式，适用于多种场景下的数据展示和

分析，特别是用于比较、排名和分类等方面。

// 存销量
var stockSales = echarts.init(document.getElementById('stockSales'));
$.get("data/商品库存数量和销售数量.json").done(function (data) {
    //data = JSON.parse(data),
	stockSales.setOption({
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	grid: {
		left: '0%',
		top:'60',
		right:'5%',
		bottom: '10',
		containLabel: true
	},
	barWidth:'45%',
	legend: {
		data:data.数量类型,
		top:'22'
	},
	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',
			stack: '数量',
			label:{
				position:'insideRight',
				padding:[0,5,0,0],
			},
			data: data.销售数量
		},
		{
			name: '库存数量',
			type: 'bar',
			stack: '数量',
			label:{
				position:'insideRight',
				padding:[0,5,0,0],
			},
			data: data.库存数量
		}
	]
		})
});

在提示框中设置了一个阴影类型 

对yx轴的x轴最小值进行了设置，设置了每段数据间隔，对坐标线进行了设置，无显示

第四个矩形树图

矩形树图是一种数据可视化方法，通常用于展示层次结构数据的分布情况，适用于以下场景：

  1. 层次结构展示：矩形树图适合展示具有层次结构的数据，如文件系统、组织架构、目录结构等。通过不同大小和颜色的矩形块，可以清晰地展示数据的层次结构和组织关系。

  2. 部门组织结构：在组织管理和人力资源管理中，矩形树图可以用于展示企业或组织的部门结构和人员分布情况。每个矩形代表一个部门或子部门，其大小可以表示该部门的规模或人员数量。

  3. 文件目录结构：在计算机科学领域，矩形树图可以用于展示文件系统的目录结构和文件大小分布情况。每个矩形代表一个文件夹或文件，其大小可以表示文件大小或占用空间。

  4. 资源分配和利用：在项目管理和资源规划中，矩形树图可以用于展示资源分配和利用情况。通过矩形的大小和颜色，可以直观地反映资源的分配比例和利用效率。

  5. 分类数据展示：矩形树图也可以用于展示分类数据的分布情况。通过不同大小和颜色的矩形块，可以清晰地显示各类别之间的数量差异和比例关系。

总的来说，矩形树图是一种适用于展示层次结构数据的有效可视化工具，能够帮助观察者快速理解数据的组织结构和分布情况，从而支持决策和分析工作。

 类型为矩形树图设置了节点标签的样式，包括是否显示、位置、格式化方式等。

position: 'insideTopLeft' 表示标签显示在节点的顶部左侧内部，distance: 0 表示标签与节点的距离为 0，

roam：设置了是否允许图表进行漫游，即拖拽和缩放，默认为 true。

nodeClick（节点点击）：设置了是否允许点击节点，默认为 true。

breadcrumb：设置了是否显示，默认为 false，面包屑用于显示当前节点所在的层级路径。

，borderColor: 'transparent' 表示节点边框颜色为透明，即不显示边框

第五个双y图

双 Y 轴图表在数据可视化中有许多应用场景，特别适用于同时比较具有不同量纲或不同数据范围的指标。下面是一些常见的双 Y 轴图表的应用场景：

  1. 比较趋势：当你想要比较两个或多个指标的趋势时，双 Y 轴图表非常有用。例如，比较销售额和销售量，或者比较网站访问量和转化率的趋势。

  2. 关联性分析：有时候，你可能希望分析两个指标之间的关联性。双 Y 轴图表可以帮助你在同一图表中直观地比较两者之间的关系。例如，比较广告费用和销售额之间的关联性。

  3. 异构数据对比：当你需要同时显示不同类型的数据时，双 Y 轴图表非常有用。例如，比较温度和湿度，或者比较股票价格和成交量。

  4. 比例关系：有时候，你可能需要比较两个指标的比例关系。例如，比较利润率和销售额，或者比较存货周转率和库存量。

  5. 数据异常分析：双 Y 轴图表也可以用于检测数据异常或异常趋势。通过将两个指标放在同一图表中，你可以更容易地发现其中一个指标的异常值是否与另一个指标相关。

总的来说，双 Y 轴图表可以帮助你在同一图表中直观地比较两个不同类型或不同范围的指标，从而更好地理解数据之间的关系和趋势。

柱状折线图（上述已有不做解释）

// 滞销商品
var unsalable = echarts.init(document.getElementById('unsalable'));
$.get("data/商品滞销数据.json").done(function (data) {
	//data = JSON.parse(data),
	unsalable.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        left: '10',
        right: '10',
        bottom: '10',
        containLabel: true
    },
    toolbox: {
        show:false,
        feature: {
            dataView: {show: true, readOnly: false},
            magicType: {show: true, type: ['line', 'bar']},
            restore: {show: true},
            saveAsImage: {show: true}
        }
    },
    legend: {
        data:data.name
    },
    barGap:'10%',
    barCategoryGap:'25%',
    xAxis: [
        {
            type: 'category',
            data: data.商品名称,
            axisPointer:{type:'shadow'},
            splitLine:{lineStyle:{width:0}},
            axisLabel:{rotate:30}
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
            max: 500,
            interval: 100,
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{lineStyle:{width:0}},
        },
        {
            type: 'value',
            name: '',
            min: 0,
            max: 1,
            interval: 0.2,
            axisLabel: {
                formatter: '{value} '
            },
            axisLine:{lineStyle:{width:0}},
            
        }
],
    series: [
        {
            name:'滞销金额',
            type:'bar',
            data:data.滞销金额
        },
        {
            name:'存货周转率',
            type:'line',
            yAxisIndex: 1,
            label:{
                show:'true',
                color:'#fff',
                backgroundColor:'rgba(235,48,48,0.8)',
                verticalAlign:'middle',
                padding:[2,4,0,4],
                borderRadius:4,
                position:'inside'
            },
            data:data.存货周转率
        },
        {
            name:'库存数量',
            type:'bar',
            data:data.库存数量
        }
    ]
		})
});

设置了鼠标悬停在图表上时显示的提示框样式，类型为 'cross'，即显示十字准星指示器，颜色为 '#999'。

工具箱，是否有数据视图，不可修改，类型更换在柱状与折线之间，是否可还原，以及是否保存图片

 对x轴的显示设置了阴影设置了坐标轴指示器的类型为阴影指示器，即当鼠标悬停在数据柱上时，显示一个与数据柱对齐的阴影区域，用于指示该数据的位置。

设置了坐标轴在数据区域中的分隔线样式，这里将分隔线的宽度设置为 0，即不显示分隔线。

axisLabel: {rotate: 30}：设置了坐标轴标签的样式，将标签旋转了 30 度，使得较长的类目名称能够更好地显示。

对对y轴，设置了两个即双y轴min: 0 和 max: 500：设置了 Y 轴的最小值和最大值分别为 0 和 500。设置了刻度的间隔为 100，即每隔 100 就显示一个刻度。

对第二个y轴进行了数值的整改

对折线图设置了y轴的应用 ，以及设置了字体等样式

 

贺知煜
关注
  • 38
    点赞
  • 踩
  • 61
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
无人售货机Echarts数据分析
05-13
无人售货机Echarts数据分析
Echarts——售货机大数据分析平台
2401_83176974的博客
05-17 1283
整体文件。
售货机大数据分析平台.rar
10-28
售货机大数据分析平台.rar
无人售货机零售项目ECharts展现(最全！！)
05-13
运行即可
应用实战：无人售货机零售项目ECharts展现（解析项目）
xidiexi的博客
05-13 2432
经过了一段学习Echarts，我们迎来了一个结课实训项目：无人售货机，话不多说，开肝。本实战项目所需的软件为：vose code。
ECharts Web数据可视化教案-基于ECharts的大数据分析可视化平台实现无人售货机用户分析教案.docx
12-16
本教案旨在引导学生学习基于 ECharts 的大数据分析可视化平台，配置无人售货机零售项目的工程，掌握可视化仪表盘的配置方法，了解大数据分析可视化平台的仪表盘、图表库、数据源，并掌握绘制可视化图形的步骤。...
自动售货机简单代码
热门推荐
笨鸟
02-24 1万+
先做个菜单函数，菜单函数分为：1存入金额进行购买.。2管理员操作系统.。3退出主界面.。 void menu() { cout<<"******************************************"<<endl; cout<<"* 操作1 : 存入金额进行购买. *"<<endl; cout<<"* 操作2 : 管理员操作系统.
数据挖掘项目——新零售无人智能售货机商务数据分析
macan的博客
12-09 6687
数据挖掘项目——新零售无人智能售货机商务数据分析一、 原始数据分析二、数据清洗1、处理附件12、处理附件2三、数据分析1、描述性分析2、数据可视化结果如下： 一、 原始数据分析 原数据中包含两个附件annex_1和annex_2。 其中annex_1中有数据：订单号、设备ID、应付金额、实际金额、商品、支付时间、地点、状态、提现。具体如下： #原始数据 detail = pd.read_csv('...
自动售货机html代码,自动售货机系统源代码.doc
weixin_39640904的博客
06-01 1104
自动售货机系统源代码.doc#include#include#include#include "goods.h"bool GetCharge(int Sum,int Money);void Getsmalcharge(int Money,int *ChargeNum);int KouLing();char ChooseJieMian();char SaleCenter...
Python 绘图入门
最新发布
qq_39889473的博客
08-08 384
ggplot是基于matplotlib并旨在以简单方式提高matplotlib可视化感染力的库，它采用叠加图层的形式绘制图形，例如先绘制坐标轴所在的图层，再绘制点所在的图层，最后绘制线所在的图层，但其并不适用于个性化定制图形。seaborn是基于matplotlib进行高级封装的可视化库，它支持交互式界面，使得绘制图表的功能变得愈加容易，且图表的色彩更具吸引力，可以画出丰富多样的统计图表。的过程，它可以简单地理解为将一个不易描述的事物形成一个可感知画面的过程，也就是从数据空间到图形空间的。
数据可视化（王者英雄数据分析）
weixin_45506061的博客
08-03 3144
在数据统计分析和可视化分析的过程中，我们发现英雄的属性在游戏过程中会发生显著的变化，这些变化对英雄的性能和游戏策略的制定具有重要的影响。特征选择的合理性直接影响到模型的性能和效果，因此我们需要仔细考量各个特征与目标变量之间的相关性和重要性，筛选出最具代表性和影响力的特征，以提升模型的效率和精度。通过分析玩家的游戏风格、偏好以及模型对英雄性能的预测，我们能够为玩家提供个性化的英雄推荐，帮助他们在游戏中更好地发挥自己的优势，取得更好的成绩。对建立的模型进行全面而细致的评估，是为了准确确定模型的性能和准确性。
数据可视化Axure大屏原型制作分享
招风的黑耳CSDN
08-07 317
数据可视化大屏通过清晰、直观且易于理解的方式呈现大量复杂数据，已成为各行各业中不可或缺的工具。Axure作为一款功能强大的原型设计工具，为数据可视化大屏的制作提供了强大的支持和丰富的资源。
看图学sql之sql 中的常用函数
atbigapp的博客
08-07 224
看图学sql之sql 中的常用函数
[VBA]使用VBA在Excel中 操作 形状shape 对象
William数据分析的博客
08-08 508
excel已关闭地图插件，对于想做 地图可视化 的，用形状来操作是一种办法，就是要自行找到合适的 地图形状，修改形状颜色等就可以用于 可视化展示不同省市销量、人口等数据。
新增AI Copilot，DataEase开源数据可视化分析工具v2.9.0发布
FIT2CLOUD飞致云的博客
08-05 874
DataEase拥抱生成式AI技术。
Pika Labs——数据分析和商业智能化
m0_75253143的博客
08-05 1123
Pika Labs通过集成多种先进的人工智能和深度学习技术，提供全面的数据解决方案。数据集成技术：使用 ETL 和 API 集成工具，支持多种数据源的集成和实时数据同步。数据分析技术：应用机器学习和深度学习算法进行数据分析，提供预测、分类和聚类等功能。数据可视化技术：利用 D3.js、Chart.js 和 Plotly 等可视化库创建动态和交互式图表，并提供响应式仪表盘。商业智能技术：通过 OLAP 和数据仓库技术，提供高效的多维数据分析和查询支持。自动化技术。
使用Flask和Echarts的大数据可视化项目实践
"本次竞赛涉及大数据可视化的项目，利用FlaskWeb框架构建后端，CSS进行前端布局，以及Echarts和Ajax技术展示折线图、柱状图、饼图、地图和词云图等各类图表。项目数据涵盖2020年12月全球COVID-19的确诊、感染、治愈...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值