taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

资金

Browse Source
This commit is contained in:
ljx
2025-08-20 10:28:23 +08:00
parent 3b61e84a7f
commit 786e7a516f
38 changed files with 36219 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

735
src/views/largeScreen/components/optionList.ts Normal file
View File

@ -0,0 +1,735 @@
import * as echarts from 'echarts/core';
// import { PictorialBarChart } from 'echarts/charts'
// 客流量图
export const getOption = (xData: any, yData: any) => {
const data = {
xData,
yData
};
const maxData = Math.ceil(Math.max(...data.yData));
const barData = data.yData.map((item) => {
return maxData;
});
const option = {
grid: {
top: '10%',
left: '8%',
right: '5%',
bottom: '20%'
// containLabel: true
},
xAxis: {
type: 'category',
data: data.xData,
axisLine: {
show: false
},
axisTick: {
show: true
},
axisLabel: {
textStyle: {
color: '#fff'
}
}
},
yAxis: {
show: true,
type: 'value',
max: maxData,
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'rgba(73, 169, 191, 0.2)'
}
}
},
tooltip: {
trigger: 'axis',
backgroundColor: '',
textStyle: {
color: '#fff'
}
},
dataZoom: [
{
// show: true,
start: 0,
end: 30,
bottom: 2, // 下滑块距离x轴底部的距离
height: 23
},
{
type: 'inside'
}
],
series: [
{
name: '柱图',
type: 'bar',
// barWidth: '10%',
data: barData,
tooltip: {
show: false
},
barGap: '-50%',
itemStyle: {
normal: {
color: 'rgba(73, 169, 191, 0.2)'
}
}
},
{
name: '客单价',
type: 'line',
showAllSymbol: true,
symbol: 'circle',
symbolSize: 8,
lineStyle: {
normal: {
color: 'rgba(217, 231, 255, 0.3)',
shadowColor: 'rgba(0, 0, 0, .3)',
shadowBlur: 0
// shadowOffsetY: 5,
// shadowOffsetX: 5,
}
},
itemStyle: {
color: 'rgba(224, 194, 22, 1)',
borderWidth: 0,
shadowBlur: 0
},
label: {
show: false, // 显示数据标签
color: 'rgba(255, 208, 59, 1)'
},
data: data.yData
}
]
};
return option;
};
// 上菜分析图
export const getOption2 = (data: any) => {
const maxData = Math.max(...data.yData);
const option = {
// backgroundColor: "#38445E",
grid: {
left: '10%',
top: '13%',
bottom: '16%',
right: '10%'
},
xAxis: {
data: data.xData,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255, 129, 109, 0.1)',
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
textStyle: {
color: '#999',
fontSize: 12
}
}
},
yAxis: [
{
splitNumber: 2,
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(255, 129, 109, 0.1)',
width: 1 //这里是为了突出显示加上的
}
},
axisLabel: {
textStyle: {
color: '#999'
}
},
splitArea: {
areaStyle: {
color: 'rgba(255,255,255,.5)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(255,255,255,.5)',
width: 0.5,
type: 'dashed'
}
}
}
],
dataZoom: [
{
// show: true,
start: 0,
end: 30,
bottom: 2, // 下滑块距离x轴底部的距离
height: 23
},
{
type: 'inside'
}
],
tooltip: {
trigger: 'axis', // 设置为 'item'，表示鼠标悬浮在图形上时显示 tooltip
// formatter: function (params) {
// return `订单数: ${params.data}` // 显示鼠标悬浮项的数量
// },
backgroundColor: '', // 设置提示框的背景颜色
textStyle: {
color: '#fff' // 设置文字颜色
// fontSize: 14 // 设置文字大小
}
},
series: [
{
name: '订单数',
type: 'pictorialBar',
barCategoryGap: '0%',
symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
label: {
show: false,
position: 'top',
distance: 15,
color: 'rgba(255, 235, 59, 1)',
// fontWeight: "bolder",
fontSize: 16
},
itemStyle: {
normal: {
// color: {
// type: "linear",
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: "rgba(232, 94, 106, .8)", // 0% 处的颜色
// },
// {
// offset: 1,
// color: "rgba(232, 94, 106, .1)", // 100% 处的颜色
// },
// ],
// global: false, // 缺省为 false
// },
color: function (params: any) {
if (params.data === maxData) {
return 'rgba(255, 219, 103, 0.6)';
} else {
return 'rgba(239, 244, 255, 0.45)';
}
}
},
emphasis: {
opacity: 1
}
},
data: data.yData,
z: 10
}
]
};
return option;
};
//食堂周报图
export const getLineOption = (lineData: any) => {
const maxData = Math.ceil(Math.max(...lineData.line1));
const option = {
backgroundColor: '',
tooltip: {
trigger: 'axis',
backgroundColor: 'transparent',
color: '#7ec7ff',
textStyle: {
color: '#fff'
},
borderColor: '#7ec7ff'
},
// legend: {
// align: 'left',
// right: '5%',
// top: '1%',
// type: 'plain',
// textStyle: {
// color: '#fff',
// fontSize: 12
// },
// // icon:'rect',
// itemGap: 15,
// itemWidth: 18,
// data: [
// {
// name: '上周销售量'
// },
// {
// name: '本周销售量'
// }
// ]
// },
grid: {
top: '12%',
left: '1%',
right: '3%',
bottom: '12%',
containLabel: true
},
xAxis: {
type: 'category',
data: lineData.xLabel,
axisLine: {
show: false
},
axisTick: {
show: true
},
axisLabel: {
textStyle: {
color: '#fff'
}
}
},
yAxis: {
show: true,
type: 'value',
max: maxData,
splitLine: {
show: true,
lineStyle: {
type: 'solid',
color: 'rgba(73, 169, 191, 0.2)'
}
}
},
dataZoom: [
{
// show: true,
start: 0,
end: 30,
bottom: 2, // 下滑块距离x轴底部的距离
height: 23
},
{
type: 'inside'
}
],
series: [
{
name: '逆变器功率',
type: 'line',
symbol: 'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: false,
symbolSize: 0,
smooth: true,
lineStyle: {
width: 1,
color: 'rgba(80, 164, 225, 1)', // 线条颜色
borderColor: 'rgba(0,0,0,.4)'
},
itemStyle: {
color: 'rgba(80, 164, 225, 1)',
borderWidth: 2,
show: false
},
tooltip: {
show: true
},
areaStyle: {
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(80, 164, 225, 0.4)'
},
{
offset: 1,
color: 'rgba(80, 164, 225, 0)'
}
],
false
),
shadowColor: 'rgba(25,163,223, 0.5)', //阴影颜色
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
data: lineData.line1
}
]
};
return option;
};
//#endregion
// 菜品销售图
export const getDishesOption = (data?: any) => {
const res = data;
const dataIndex = 1;
const option = {
xAxis: {
type: 'value',
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
type: 'category',
axisTick: {
show: false
},
axisLabel: {
margin: 10 // 增大标签与轴线间距
},
width: 60, // 增大Y轴宽度
data: res.name,
axisLine: {
lineStyle: {
color: '#93C9C3'
}
}
},
grid: {
top: '5%', // 设置网格区域与容器之间的边距
bottom: '5%', // 同理
left: '5%',
containLabel: true
},
series: [
{
type: 'bar',
data: res.ratio,
barMaxWidth: 25,
itemStyle: {
barBorderRadius: 3,
color: 'rgba(12, 242, 216, 0.2)'
},
label: {
show: false
}
},
{
type: 'bar',
data: res.data,
barGap: '-100%',
barMaxWidth: 25,
itemStyle: {
barBorderRadius: 3,
color: function (params: any) {
if (params.data <= 300) {
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ color: 'rgba(252, 105, 0, 1)', offset: 0 },
{ color: 'rgba(250, 42, 42, 1)', offset: 1 }
]);
} else {
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ color: 'rgba(73, 169, 191, 1)', offset: 0 },
{ color: 'rgba(108, 248, 236, 1)', offset: 1 }
]);
}
}
},
label: {
show: true,
position: [200, -15],
formatter: function (params: any) {
if (params.data <= 300) {
return `{a| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
} else {
return `{b| ${params.value}g/${res.ratio[params.dataIndex]}g}`;
}
},
rich: {
a: {
color: 'rgba(255, 78, 51, 1)'
},
b: {
color: 'rgba(255, 235, 59, 1)'
}
}
}
}
]
};
return option;
};
// 菜品库存图
export const getInventoryOption = () => {
const res = {
data: [2800, 300, 3900, 3000, 2450, 2670, 3320],
name: ['麻辣牛肉', '水煮肉片', '酸菜鱼', '辣子鸡丁', '烧白', '冬瓜排骨汤', '清炒油麦菜'],
ratio: [4000, 4000, 4000, 4000, 4000, 4000, 4000]
},
dataIndex = 1;
const option = {
xAxis: {
type: 'value',
axisTick: {
show: false
},
splitLine: {
show: false
},
axisLabel: {
show: false
}
},
yAxis: {
type: 'category',
show: false,
axisTick: {
show: false
},
axisLabel: {
margin: 10 // 增大标签与轴线间距
},
width: 20, // 增大Y轴宽度
data: res.name,
axisLine: {
show: false,
lineStyle: {
color: '#93C9C3'
}
}
},
grid: {
top: '5%', // 设置网格区域与容器之间的边距
bottom: '5%', // 同理
left: '5%',
containLabel: true
},
series: [
{
type: 'bar',
data: res.ratio,
barMaxWidth: 6,
itemStyle: {
barBorderRadius: 3,
color: 'rgba(12, 242, 216, 0.2)'
},
label: {
show: true,
position: [0, -15],
fontSize: 14,
color: '#fff',
formatter: function (params: any) {
return params.name;
}
// rich: {
// a: {
// color: "rgba(255, 78, 51, 1)",
// },
// b: {
// color: "rgba(255, 235, 59, 1)",
// },
// },
}
},
{
type: 'bar',
data: res.data,
barGap: '-100%',
barMaxWidth: 6,
itemStyle: {
barBorderRadius: 0,
color: function (params: any) {
if (params.dataIndex === dataIndex) {
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ color: 'rgba(255, 78, 51, 1)', offset: 0 },
{ color: 'rgba(252, 105, 0, 0)', offset: 1 }
]);
} else {
return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
{ color: 'rgba(242, 224, 27, 1)', offset: 0 },
{ color: 'rgba(236, 227, 127, 0.55)', offset: 0.5 },
{ color: 'rgba(230, 229, 227, 0.1)', offset: 1 }
]);
}
}
},
label: {
show: true,
position: [200, -15],
formatter: function (params: any) {
if (params.dataIndex === dataIndex) {
return `{a| ${params.value}g}`;
} else {
return `{b| ${params.value}g}`;
}
},
rich: {
a: {
color: 'rgba(255, 78, 51, 1)'
},
b: {
color: 'rgba(255, 235, 59, 1)'
}
}
}
}
]
};
return option;
};
export const getBarOptions = (data: any) => {
const option = {
backgroundColor: '',
grid: {
left: '7%',
top: '4%',
bottom: '25%',
right: '2%'
},
tooltip: {
show: true,
backgroundColor: '',
trigger: 'axis',
formatter: '{b0}：{c0}元',
textStyle: {
color: '#fff'
}
// borderColor: 'rgba(252, 217, 18, 1)'
},
xAxis: [
{
type: 'category',
data: data.name,
axisLine: {
lineStyle: {
color: 'rgba(108, 128, 151, 0.3)'
}
},
axisLabel: {
textStyle: {
color: '#999',
fontSize: 12
}
},
axisTick: {
// show: true,
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(108, 128, 151, 0.3)',
type: 'dashed'
}
}
}
],
yAxis: [
{
axisLabel: {
formatter: function (value) {
if (value >= 1000) {
value = (value / 1000).toFixed(1) + 'k'; // 大于等于1000的数字显示为1k、2.5k等
}
return value;
},
color: 'rgba(255, 255, 255, 0.8)'
},
axisTick: {
show: false
},
axisLine: {
lineStyle: {
color: 'rgba(108, 128, 151, 0.3)'
}
},
splitLine: {
show: true,
lineStyle: {
color: 'rgba(108, 128, 151, 0.3)',
type: 'dashed'
}
}
}
],
dataZoom: [
{
// show: true,
start: 0,
end: 30,
bottom: 2, // 下滑块距离x轴底部的距离
height: 23
},
{
type: 'inside'
}
],
series: [
{
type: 'bar',
data: data.value,
stack: '合并',
barWidth: '15',
itemStyle: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(0, 111, 255, 0)' // 0% 处的颜色
},
{
offset: 0.7,
color: 'rgba(0, 111, 255, 0.5)' // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(0, 111, 255, 1)' // 100% 处的颜色
}
],
false
)
},
label: {
show: true,
formatter: '{c}',
position: 'top',
color: '#fff',
fontSize: 10
// padding: 5
}
}
// {
// type: 'bar',
// stack: '合并',
// data: topData,
// barWidth: '15',
// itemStyle: {
// color: 'rgba(252, 217, 18, 1)'
// }
// }
]
};
return option;
};