exharts无人售货机案例分析

柒seven.

已于 2024-05-13 10:28:05 修改

阅读量936

点赞数 21

文章标签： echarts vue.js 前端框架

于 2024-05-13 10:23:30 首次发布

本文链接：https://blog.csdn.net/2301_80464770/article/details/138783273

版权

编写invertory.html对应的charts.int.js

编写sale.html对应的charts.sale.js

销售金额，订单量，毛利润，客单价4个板块（南丁格尔图）

销售金额预测值与实际值板块（双折线图）

商品价格区间板块（气泡图）编辑

商品销售数量Top10板块（条形图）

编写total.html对应的charts.total.js

销售金额、订单量、毛利润、折扣额和客单价板块（仪表盘图）

销售金额变化趋势，商品销售金额Top5，售货机销售情况，支付方式占比板块与第一个js同理编辑

编写user.html对应的charts.user.js

项目链接：http://127.0.0.1:3000/user.html

文件分析：

css：

reset的作用的重置浏览器的默认属性，因为浏览器的品种不同，样式不同，需要重置

data：

data里的文件是项目需要用到的数据，把它打包方便后续直接异部导入

js:

一个网页中插件,或者说是个包,可以简化开发。这是图形可视化的一种脚本

html:

下面的4个html文件是我们为项目编写的框架，分别对应4个板块

编写html

这段HTML代码包括了页面的基本结构，以及一个导航菜单，其中包含了指向不同分析页面的链接

这段HTML代码包括了页面中的图表布局。它将页面分成了三列，并在每列中包含了不同的图表块，用于展示不同的库存数据分析结果。

第一列：
- 设备容量
- 品类库存占比
第二列：
- 存销量
第三列：
- 商品存货周转天数
- 滞销商品

每个图表块都包含了一个标题和一个用于展示图表的容器。你可以在对应的 id 属性中添加你的图表数据，并通过 CSS 对图表进行样式调整。

这些 JavaScript 脚本是用于引入 echarts（一个优秀的图表库）和 jQuery，并且还包括了一些自定义的图表初始化或者数据处理的脚本。

4个框架架构一致，只需要把里面的具体数据进行改变

编写js:

我们要编写4个js文件对应我们的4个板块，往里面导入数据和图形

编写的js文件需要和框架中引入的js文件一一对应

如图所示，我们在invertory.html中引入了charts.int.js,这是我们需要往框架里填充的图形2和数据，所以我们需要编写一个charts.int.js

这段代码使用了 echarts 库中的两个功能：

echarts.format：这是 echarts 提供的一个格式化工具对象，可以用来对数据进行格式化处理，比如日期格式化、数值格式化等。
echarts.init：这是 echarts 提供的初始化函数，用于初始化一个 echarts 实例。在这里，它通过 document.getElementById('turnaround') 获取了一个 id 为 'turnaround' 的 DOM 元素（预先定义在你的 HTML 中），然后将其作为容器，创建了一个名为 turnaround 的 echarts 实例，用于后续的图表展示和交互。
其中turnaround是在框架中找到对应创建的dom，在invertory.html中找到我们现在准备填入的板块的对应dom

这段代码使用了 jQuery 的 $.get() 函数来发送一个 GET 请求，获取指定 URL（"data/各类商品存货周转天数.json"）的数据。一旦请求成功，它会执行一个回调函数来处理返回的数据。

在回调函数中，数据被传递给了 turnaround.setOption() 方法，该方法用于设置 echarts 图表的配置选项。在这里，它设置了一个 treemap 类型的系列（series），用于展示各类商品的存货周转天数数据。

在这我们把要填入什么样的图形，需要用到哪一个json，

编写invertory.html对应的charts.int.js

商品货存周转天数板块

所以我们需要异步获取各类商品存货周转天数.json中的数据

我们需要它展示的效果为矩形树图，所以我们指定了系列类型为 treemap。

tooltip：设置了提示框的格式化内容，{b} 表示数据项的名称，{c} 表示数据值。
series：设置了 treemap 系列的各种属性，包括类型、标签样式、是否开启漫游等。
- type: 'treemap'：指定了系列类型为 treemap。
- label：设置了标签样式，包括显示位置、格式化、富文本样式等。
- roam: false：禁止了漫游操作。
- nodeClick: false：禁止了节点点击事件。
- breadcrumb: {show: false}：禁止了面包屑导航的显示。
- itemStyle：设置了 treemap 方块的样式，包括间隙宽度和边框颜色。
- data: data.data：设置了 treemap 的数据，使用了从请求返回的数据中提取的 data 属性。

// 商品存货周转天数
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
    }]
        })
});

存销量板块

所以我们需要异步获取商品库存数量和销售数量.json中的数据

我们需要它展示的效果为条形堆积，所以我们指定了系列类型为bar。

tooltip：设置了提示框的配置，当鼠标悬停在数据项上时显示。
- trigger: 'axis'：提示框触发方式为坐标轴触发。
- axisPointer: { type: 'shadow' }：鼠标移动到坐标轴上时，提示框显示阴影。
grid：设置了图表的网格样式，包括位置和大小等。
- left: '0%'、top:'60'、right:'5%'、bottom: '10'：设置了图表在页面中的位置。
- containLabel: true：网格区域包含坐标轴的刻度标签。
barWidth: '45%'：设置了柱状图的宽度。
legend：设置了图例，即数据系列的名称。
- data: data.数量类型：图例的数据来自请求返回的数据中的 数量类型 属性。
xAxis：设置了 x 轴的配置。
- type: 'value'：x 轴类型为数值轴。
- min: 0：设置最小值为 0。
- boundaryGap: [0, 0.01]：数据两端空白策略，防止数据溢出。
- axisLine: { lineStyle: { width: 0 } }：设置了坐标轴线的宽度为 0，即隐藏了坐标轴线。
yAxis：设置了 y 轴的配置。
- type: 'category'：y 轴类型为类目轴。
- splitLine: { lineStyle: { width: 0 } }：隐藏了分隔线。
- data: data.商品名称：y 轴的数据来自请求返回的数据中的 商品名称 属性。
series：设置了数据系列，即要展示的数据。
- name: '销售数量'、name: '库存数量'：设置了数据系列的名称。
- type: 'bar'：设置了数据系列的类型为柱状图。
- stack: '数量'：将数据系列堆叠在一起。
- label: { position: 'insideRight', padding: [0, 5, 0, 0] }：设置了数据标签的位置和内边距。
- data: 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.库存数量
		}
	]
		})
});

滞销商品板块

所以我们需要异步获取商品滞销数据.json中的数据

我们需要它展示的效果为柱状折线混搭，所以我们指定了系列类型为bar和line。

tooltip：设置了提示框的配置，当鼠标悬停在数据项上时显示。
- trigger: 'axis'：提示框触发方式为坐标轴触发。
- axisPointer: { type: 'cross' }：指示器类型为十字准星。
grid：设置了图表的网格样式，包括位置和大小等。
- left: '10'、right: '10'、bottom: '10'：设置了图表在页面中的位置。
- containLabel: true：网格区域包含坐标轴的刻度标签。
toolbox：设置了工具栏的配置，包括数据视图、切换图表类型、重置和保存图片等功能。
legend：设置了图例，即数据系列的名称。
- data: data.name：图例的数据来自请求返回的数据中的 name 属性。
barGap:'10%'、barCategoryGap:'25%'：设置了柱状图之间和柱状图类别之间的间距。
xAxis：设置了 x 轴的配置。
- type: 'category'：x 轴类型为类目轴。
- data: data.商品名称：x 轴的数据来自请求返回的数据中的 商品名称 属性。
- axisPointer:{type:'shadow'}：鼠标悬停时显示阴影指示器。
- splitLine:{lineStyle:{width:0}}：隐藏了分隔线。
- axisLabel:{rotate:30}：设置了标签旋转角度为 30 度。
yAxis：设置了 y 轴的配置。
- 包括两个 y 轴，分别用于显示滞销金额和存货周转率。
- type: 'value'：y 轴类型为数值轴。
- min: 0、max: 500、interval: 100、axisLabel: { formatter: '{value}' }：设置了数值轴的最小值、最大值、间隔和格式化方式。
- axisLine:{lineStyle:{width:0}}：隐藏了轴线。
series：设置了数据系列，即要展示的数据。
- 包括三个系列，分别是滞销金额、存货周转率和库存数量。
- type: 'bar'、type: 'line'：设置了数据系列的类型为柱状图和折线图。
- yAxisIndex: 1：指定该系列使用第二个 y 轴。
- label：设置了数据标签的样式，包括颜色、背景色、位置等。

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.库存数量
        }
    ]
		})
});

品类库存占比板块

所以我们需要异步获取不同类型的商品库存数量.json中的数据

我们需要它展示的效果为饼图，所以我们指定了系列类型为pie。

tooltip：设置了提示框的配置，当鼠标悬停在数据项上时显示。
- trigger: 'item'：提示框触发方式为项触发。
- formatter: "{a} <br/>{b}: {c} ({d}%)"：提示框内容格式化，其中 {a} 代表系列名称，{b} 代表数据项名称，{c} 代表数值，{d} 代表百分比。
legend：设置了图例，即数据系列的名称。
- orient: 'vertical'：图例布局方向为垂直。
- data:data.类型：图例的数据来自请求返回的数据中的 类型 属性。
series：设置了数据系列，即要展示的数据。
- 包括两个饼图系列，分别用于展示一级商品和二级商品。
- type: 'pie'：系列类型为饼图。
- radius：设置了饼图的半径范围。
- center：设置了饼图的中心位置。
- label 和 labelLine：设置了标签和标签线的样式。
- data:data.一级商品 和 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.二级商品
        }
    ]
		})
});

设备容量板块

所以我们需要异步获取不同地点售货机库存数量和缺货数量.json中的数据

我们需要它展示的效果为柱状折线混搭，所以我们指定了系列类型为bar和line。

tooltip：设置了提示框的配置，当鼠标悬停在数据项上时显示。
- trigger: 'axis'：提示框触发方式为坐标轴触发。
legend：设置了图例，即数据系列的名称。
- data: data.类型：图例的数据来自请求返回的数据中的 类型 属性。
barWidth 和 barCategoryGap：设置了柱状图的宽度和类目间柱状图的间距。
grid：设置了图表的布局。
- left、right、bottom：设置了图表距离容器的边距。
- containLabel: true：自动计算容器大小，使标签显示完整。
xAxis 和 yAxis：分别设置了 X 轴和 Y 轴的配置。
- type: 'category' 和 type: 'value'：分别表示 X 轴为类目轴，Y 轴为数值轴。
- data: data.地点：X 轴的数据来自请求返回的数据中的 地点 属性。
series：设置了数据系列，即要展示的数据。
- 包括三个系列，分别为柱状图（库存总量）、折线图（预警线）、柱状图（缺货总量）。
- type: 'bar' 和 type: 'line'：分别表示柱状图和折线图。
- stack: '总量'：设置了柱状图的堆叠方式。
- label：设置了标签的样式和位置。
- itemStyle：设置了柱状图的样式。
- data: data.库存数量 和 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 的事件处理函数，用于在窗口大小变化时重新绘制多个 ECharts 图表，以确保它们的大小适应新的窗口尺寸。具体来说：

当窗口大小发生变化时，window.onresize 事件被触发，调用了一个匿名函数。
在这个匿名函数中，通过调用各个 ECharts 图表实例的 resize() 方法，重新绘制了多个图表，以适应新的窗口大小。
turnaround、stockSales、unsalable、categoryStock 和 mVolume 分别是不同图表的 ECharts 实例，通过调用它们的 resize() 方法，可以重新绘制这些图表。

这样做的目的是保证当用户调整浏览器窗口大小时，图表能够随之调整大小，以保持良好的可视性和用户体验。


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

这样，charts.int.js就编写完成了

编写sale.html对应的charts.sale.js

销售金额，订单量，毛利润，客单价4个板块（南丁格尔图）

4个板块只有数据不同，代码只需要修改数据部分和调用dom部分

tooltip：设置了提示框的配置，当鼠标悬停在数据项上时显示。
- trigger: 'item'：提示框触发方式为项触发。
- formatter: "{b}：<br/>{c} 元<br/>（{d}%）"：提示框的内容格式化，包括类目名称、数值和占比。
legend：设置了图例，即数据系列的名称。
- type: 'scroll'：设置图例的滚动方式。
- data: data.where：图例的数据来自请求返回的数据中的 where 属性。
toolbox：设置了工具箱，用于显示或隐藏工具。
- show: false：隐藏工具箱。
- 包含了各种工具的配置，如标记、数据视图、魔术类型、恢复和保存为图片等。
series：设置了数据系列，即要展示的数据。
- 包括两个系列，一个是饼图（各项指标数据），另一个是一个空的饼图用于设置中心文本。
- name: '地点'：设置饼图的名称。
- type: 'pie'：表示饼图类型。
- radius: ["25%", '60%']：设置了饼图的半径，第一个值表示内半径，第二个值表示外半径。
- center: ['50%', '57%']：设置了饼图的中心位置。
- roseType: 'area'：设置了饼图的玫瑰图模式，即通过半径区分数据大小。
- label：设置了标签的样式和内容格式化。
- data: data.sale：设置了饼图的数据，来自请求返回的数据中的 sale 属性。

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'}}]
        },
    ]
		})
});

4个板块完整代码如下

// 销售金额
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'}}]
        },
    ]
		})
});



// 订单量
var orderQ_Site = echarts.init(document.getElementById('orderQ_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    //data = JSON.parse(data),
	orderQ_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.order
        },
        {
            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'}}]
        },
    ]
		})
});



// 毛利润
var grossM_Site = echarts.init(document.getElementById('grossM_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    //data = JSON.parse(data),
	grossM_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.gross
        },
        {
            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'}}]
        },
    ]
		})
});



// 客单价平均值
var unitP_Site = echarts.init(document.getElementById('unitP_Site'));
$.get("data/不同区域的各指标数据.json").done(function (data) {
    //data = JSON.parse(data),
	unitP_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.unit
        },
        {
            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'}}]
        },
    ]
		})
});

销售金额预测值与实际值板块（双折线图）

tooltip：设置了提示框的配置，当鼠标悬停在数据项上时显示。
- trigger: 'axis'：提示框触发方式为坐标轴触发。
legend：设置了图例，即数据系列的名称。
- type:'scroll'：设置图例的滚动方式。
grid：设置了图表的布局。
- left: '10', right: '20', bottom: '10', containLabel: true：设置了图表距离容器四个方向的间距。
xAxis：设置了 x 轴的相关配置。
- type: 'category'：表示 x 轴为类目型。
- boundaryGap: false：坐标轴两边是否留白，默认为 true。
- data：设置了 x 轴的数据，包括了日期。
yAxis：设置了 y 轴的相关配置。
- type: 'value'：表示 y 轴为数值型。
- name: '金额（万元）'：设置了 y 轴的名称。
- axisLabel: { formatter: '{value}' }：设置了刻度标签的格式化方式。
series：设置了数据系列，即要展示的数据。
- 包括两个系列，一个是实际销售金额，另一个是销售金额预测值。
- type: 'line'：表示数据系列为折线图类型。
- data: data.T 和 data: data.Y：设置了数据系列的具体数据，分别来自请求返回的数据中的 T 和 Y 属性。
- areaStyle：设置了区域样式，用于填充折线图下方的颜色。

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'
                    }])
                }
            }
        },
    ]
		})
});

商品价格区间板块（气泡图）

第一个回调函数用于设置散点图的基本配置选项，包括：
- grid：设置了图表的布局。
- tooltip：设置了提示框的配置，当鼠标悬停在数据项上时显示。
- legend：设置了图例，即数据系列的名称。
- xAxis 和 yAxis：设置了 x 轴和 y 轴的相关配置，其中 scale:true 表示启用数值轴。
第二个回调函数用于设置散点图的数据系列，即要展示的数据。它遍历了请求返回的数据中的每个商品，将每个商品的名称、价格和销量数量作为一个散点数据点，并设置了散点的大小。

// 商品价格区间
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
    });
});

商品销售数量Top10板块（条形图）

- tooltip：设置了提示框的配置，当鼠标悬停在数据项上时显示。
- grid：设置了图表的布局。
- barCategoryGap：设置了类目轴中的柱间距。
- xAxis 和 yAxis：分别设置了 x 轴和 y 轴的相关配置，其中 type: 'value' 表示数值轴，type: 'category' 表示类目轴，data: data.商品名称 设置了 y 轴的数据为商品名称。
series 中定义了要展示的数据系列，包括：
- name: '售出总数量'：数据系列的名称。
- type: 'bar'：指定了使用条形图类型的图表。
- label：设置了数据标签的位置。
- data: data.销售数量：设置了要展示的销售数量数据。

// 商品销售数量Top10
var saleMtop10 = echarts.init(document.getElementById('saleMtop10'));
$.get("data/商品销售数量前10.json").done(function (data) {
    //data = JSON.parse(data),
	saleMtop10.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        left: '0%',
        top:'20',
        right:'2%',
        bottom: '10',
        containLabel: true
    },
    barCategoryGap:'40%',
    xAxis: {
        type: 'value',
        min: 0,
        interval: 5,
        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.销售数量
        }
    ]
		})
});

编写total.html对应的charts.total.js

销售金额、订单量、毛利润、折扣额和客单价板块（仪表盘图）

这段代码是用来创建仪表盘图表的，显示了销售金额、订单量、毛利润、折扣额和客单价等指标的数据。它使用了 ECharts 库来实现图表的绘制和数据展示。

在代码中，通过调用 saleT 函数来生成仪表盘，并传入相应的参数来配置图表的样式和数据。其中，函数的参数包括：

id: 图表容器的 ID；
title: 仪表盘的名称；
min: 最小值；
max: 最大值；
val: 当前实际值；
tag: 目标值；
unit: 单位符号；
color1: 主轴颜色；
color2: 辅助轴颜色。

然后，在 saleT 函数中，创建了 ECharts 图表的配置选项 option，设置了图表的样式、数据和其他属性。最后，调用 myChart.setOption(option) 方法将配置应用到图表中。

// 销售金额 & 订单量 & 毛利润 & 售货机数量 & 购买用户数
$.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)');
});
/*
 *id: chart容器id;
 *title: 仪表盘名称
 *min: 最小值
 *max: 最大值
 *val: 当前实际值
 *tag: 目标值
 *unit: 单位符号
 *color1: 主轴颜色
 */

var saleM = echarts.init(document.getElementById("saleM"));
var orderQ = echarts.init(document.getElementById("orderQ"));
var grossM = echarts.init(document.getElementById("grossM"));
var discount = echarts.init(document.getElementById("discount"));
var unitP = echarts.init(document.getElementById("unitP"));

function saleT(id, title, min, max, val, tag, unit, color1,  color2) {

    var myChart = echarts.init(document.getElementById(id));

    option = {
        tooltip: {
            confine:true,
            trigger: 'item',
            formatter:function(data){
                hbl = (data.value/tag).toFixed(2);
                return title + "：" + data.value + '<br/>' + name + "：" + hbl
            }
        },
        series: [{
            startAngle: 180, 
            endAngle: 0,
            splitNumber: 1,
            name: title,
            type: 'gauge',
            radius: '100%',
            axisLine: {
                lineStyle: {
                    color: [
                        [0.25, '#1779da'],
                        [0.5, '#1779da'],
                        [1, '#ddd']
                    ],
                    width: 20
                }
            },
            axisTick: { show: false },
            axisLabel: { 
                distance:0,
                width:30,
                height:24,
                lineHeight:24,
                padding:[25,-30,0],
                color:'rgba(255,255,255,0.5)',
                formatter: function (value) {
                    if(unit=='千'){
                        return (value/1000).toFixed(1) + ' ' + unit;
                    }else if(unit=='万'){
                        return (value/10000).toFixed(1) + ' ' + unit;
                    }else{
                        return value;
                    }
                }
            },
            splitLine: { show: false },
            pointer: { show:false, width: 3 },
            title: {
                offsetCenter: [0, '92%'],
                color:'rgba(255,255,255,0.7)'
            },
            detail: {
                offsetCenter: [0, '-10%'],
                formatter: function(value){
                    value1 = value / tag;
                    return '{a|' + value.toFixed(1) + '}';
                },
                rich: {
                    a: {
                        fontSize:'16',
                        fontWeight:'bold'
                    }
                }
            },
            data: [{}]
        }]
    };
    option.series[0].min = min;
    option.series[0].max = max;
    option.series[0].data[0].value = val;
    option.series[0].axisLine.lineStyle.color[0][0] = (tag - min) / (max - min);
    option.series[0].axisLine.lineStyle.color[0][1] = color2;
    option.series[0].axisLine.lineStyle.color[1][0] = (val - min) / (max - min);
    option.series[0].axisLine.lineStyle.color[1][1] = color1;

    myChart.setOption(option);

}

销售金额变化趋势，商品销售金额Top5，售货机销售情况，支付方式占比板块与第一个js同理

完整代码如下

//销售金额变化趋势
//初始化图表
var saleRate = echarts.init(document.getElementById('saleRate'));
//设置图表option值
$.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.销售金额环比增长率
        }
    ]
		})
});



//商品销售金额Top5
var saleMtop5 = echarts.init(document.getElementById('saleMtop5'));
$.get("data/商品销售金额前5名.json").done(function (data) {
    //data = JSON.parse(data);
	saleMtop5.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    grid: {
        x: 10,
        y: 20,
        x2: 10,
        y2: 10,
        containLabel: true
    },
    barCategoryGap:'40%',
    xAxis: {
        type: 'value',
        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.销售金额
        }
    ]
		})
});



//售货机销售情况
var saleOrder = echarts.init(document.getElementById('saleOrder'));
$.get("data/不同地点售货机销售数据.json").done(function (data) {
    //data = JSON.parse(data);
	saleOrder.setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        }
    },
    grid: {
        x: 10,
        y: 50,
        x2: 10,
        y2: 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: {
        top:10
    },
    barGap:'10%',
    barCategoryGap:'35%',
    xAxis: [
        {
            type: 'category',
            data: data.地点,
            axisPointer: {
                type: 'shadow'
            },
            splitLine:{lineStyle:{width:0}},
        }
    ],
    yAxis: [
        {
            type: 'value',
            name: '',
            min: 0,
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{lineStyle:{width:0}},
        }
    ],
    series: [
        {
            name:'销售金额',
            type:'bar',
            data:data.销售金额
        },
        {
            name:'订单量',
            type:'bar',
            data:data.订单量
        },
        {
            name:'毛利润',
            type:'bar',
            data:data.毛利润
        }
    ]
		})
});



//支付方式占比
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)'
                }
            }
        }
    ]
		})
});

编写user.html对应的charts.user.js

其中只有雷达图和词云图上面没有例子，所以只分析这两个板块

用户分群板块（雷达图）

这段代码是用来创建雷达图（radar chart），用于展示用户分群数据。雷达图可以直观地展示多维数据的分布情况。

在代码中，首先通过 echarts.init() 方法初始化了一个图表实例 userGroup，然后使用 $.get() 方法获取了用户分群数据。获取到数据后，调用了 userGroup.setOption() 方法来设置雷达图的配置选项。

配置选项中包括了以下内容：

tooltip: 鼠标悬停时显示的提示框配置；
legend: 图例配置；
radar: 雷达图的配置，包括雷达图的指标名称、最大值、样式等；
series: 系列数据，这里是雷达图的具体数据配置，包括了数据项的名称、类型、样式等。

数据项包括消费金额、购买数量、购买频率、交易次数和客单价等指标，每个指标的最大值为 80，并且设置了对应的颜色。

最后，将数据应用到雷达图中。

// 用户分群
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
    }]
		})
});

用户画像板块（词云图）

这段代码是用来创建一个用户画像的词云图（word cloud），用于展示用户购买的商品名称和商品数量数据。词云图可以直观地显示出数据中频繁出现的关键词。

在代码中，首先通过 echarts.init() 方法初始化了一个图表实例 chart，然后使用 $.get() 方法获取了用户购买的商品名称和商品数量数据。获取到数据后，构建了词云图的配置选项 option。

配置选项中包括了以下内容：

tooltip：提示框配置，当鼠标悬停在词云上时显示商品名称和数量；
series：系列数据，这里是词云图的具体数据配置。词云图类型为 'wordCloud'，设置了词云的大小范围、旋转范围、形状、文字样式等。

词云的数据是根据商品名称和对应的数量来确定的，通过 sort() 方法对数据进行排序，使得出现频率高的商品名称排在前面。

最后，将配置选项应用到词云图中，并且在窗口大小改变时调用 resize() 方法，保证图表的适应性

// 用户画像
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);
});




window.onresize = function() {
    cSorNum.resize();
    lossGrowth.resize();
    expTime.resize();
    expLoc.resize();
    pInterval.resize();
    userGroup.resize();
    chart.resize();
};