919 lines
21 KiB
TypeScript
919 lines
21 KiB
TypeScript
import * as echarts from 'echarts/core';
|
||
import { text } from 'stream/consumers';
|
||
// 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;
|
||
};
|
||
//z折线
|
||
export const getLineOption = (lineData: any) => {
|
||
const maxData = Math.max(...lineData.line1.flat());
|
||
|
||
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: '付款金额'
|
||
},
|
||
{
|
||
name: '净现金流'
|
||
}
|
||
]
|
||
},
|
||
grid: {
|
||
top: '12%',
|
||
left: '1%',
|
||
right: '3%',
|
||
bottom: '5%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: 'category',
|
||
data: lineData.xLabel,
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
show: false
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
splitLine: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
textStyle: {
|
||
color: '#fff'
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
show: true,
|
||
type: 'value',
|
||
max: maxData,
|
||
splitLine: {
|
||
show: false,
|
||
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[0]
|
||
},
|
||
{
|
||
name: '付款金额',
|
||
type: 'line',
|
||
symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
|
||
showAllSymbol: false,
|
||
symbolSize: 0,
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: 'rgba(255, 224, 179, 1)', // 线条颜色
|
||
borderColor: 'rgba(0,0,0,.4)'
|
||
},
|
||
itemStyle: {
|
||
color: 'rgba(255, 224, 179, 1)',
|
||
borderWidth: 2,
|
||
show: true
|
||
},
|
||
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(255, 224, 179, 0.4)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(255, 224, 179, 0)'
|
||
}
|
||
],
|
||
false
|
||
),
|
||
shadowColor: 'rgba(255, 224, 179, 0.6)', //阴影颜色
|
||
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||
},
|
||
data: lineData.line1[1]
|
||
},
|
||
{
|
||
name: '净现金流',
|
||
type: 'line',
|
||
symbol: 'none', // 默认是空心圆（中间是白色的），改成实心圆
|
||
showAllSymbol: false,
|
||
symbolSize: 0,
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 1,
|
||
color: 'rgba(39, 255, 252, 1)', // 线条颜色
|
||
borderColor: 'rgba(0,0,0,.4)'
|
||
},
|
||
itemStyle: {
|
||
color: 'rgba(39, 255, 252, 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(39, 255, 252, 0.4)'
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: 'rgba(39, 255, 252, 0)'
|
||
}
|
||
],
|
||
false
|
||
),
|
||
shadowColor: 'rgba(39, 255, 252, 0.5)', //阴影颜色
|
||
shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||
},
|
||
data: lineData.line1[2]
|
||
}
|
||
]
|
||
};
|
||
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: '8%',
|
||
top: '4%',
|
||
bottom: '8%',
|
||
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: false,
|
||
lineStyle: {
|
||
color: 'rgba(108, 128, 151, 0.3)',
|
||
type: 'dashed'
|
||
}
|
||
}
|
||
}
|
||
],
|
||
yAxis: [
|
||
{
|
||
axisLabel: {
|
||
formatter: function (value) {
|
||
value = value + '万';
|
||
return value;
|
||
},
|
||
color: 'rgba(255, 255, 255, 0.8)'
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: 'rgba(108, 128, 151, 0.3)'
|
||
}
|
||
},
|
||
splitLine: {
|
||
show: false,
|
||
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[0],
|
||
// stack: '合并',
|
||
barWidth: '5',
|
||
barGap: '100%',
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: ' rgba(29, 214, 255, 1)' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.7,
|
||
color: ' rgba(29, 214, 255, 0.5)' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: ' rgba(29, 214, 255, 0.1)' // 100% 处的颜色
|
||
}
|
||
],
|
||
false
|
||
)
|
||
},
|
||
label: {
|
||
show: false,
|
||
formatter: '{c}',
|
||
position: 'top',
|
||
color: '#fff',
|
||
fontSize: 10
|
||
// padding: 5
|
||
}
|
||
},
|
||
{
|
||
type: 'bar',
|
||
data: data.value[1],
|
||
// stack: '合并',
|
||
barWidth: '5',
|
||
barGap: '100%',
|
||
itemStyle: {
|
||
color: new echarts.graphic.LinearGradient(
|
||
0,
|
||
0,
|
||
0,
|
||
1,
|
||
[
|
||
{
|
||
offset: 0,
|
||
color: ' rgba(255, 77, 79, 1)' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 0.7,
|
||
color: ' rgba(255, 77, 79, 0.5)' // 0% 处的颜色
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: ' rgba(255, 77, 79, 0.1)' // 100% 处的颜色
|
||
}
|
||
],
|
||
false
|
||
)
|
||
},
|
||
label: {
|
||
show: false,
|
||
formatter: '{c}',
|
||
position: 'top',
|
||
color: '#fff',
|
||
fontSize: 10
|
||
// padding: 5
|
||
}
|
||
}
|
||
]
|
||
};
|
||
return option;
|
||
};
|
||
|
||
// 收支合同分析
|
||
export const getBarOptions2 = (data: any) => {
|
||
const option = {
|
||
color:['#FF932A', '#678FE6', '#1DD6FF', '#00E396'],
|
||
title: {
|
||
text: '数量（个）',
|
||
subtext: '16',
|
||
bottom: 'center',
|
||
left: 'center',
|
||
textStyle: {
|
||
color: '#9DADB7',
|
||
fontSize: 16
|
||
},
|
||
subtextStyle:{
|
||
color: '#707070',
|
||
fontSize: 32,
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
tooltip: {
|
||
trigger: 'item'
|
||
},
|
||
legend: {
|
||
top: '5%',
|
||
left: 'center'
|
||
},
|
||
series: [
|
||
{
|
||
name: 'Access From',
|
||
type: 'pie',
|
||
radius: ['50%', '60%'],
|
||
avoidLabelOverlap: false,
|
||
padAngle: 5,
|
||
label: {
|
||
show: false,
|
||
position: 'center'
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false,
|
||
fontSize: 40,
|
||
fontWeight: 'bold'
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{ value: 3, name: '100万一下' },
|
||
{ value: 4, name: '100-500万' },
|
||
{ value: 5, name: '500-1000万' },
|
||
{ value: 4, name: '1000万以上' },
|
||
]
|
||
}
|
||
]
|
||
};
|
||
return option;
|
||
} |