-
- 编号
-
-
@@ -102,20 +117,20 @@ export default {
],
titlePosition: [
{
- top: 11.3,
+ top: 19.7,
left: 5.5
},
{
- top: 11.3,
- left: 75
+ top: 19.7,
+ left: 35.2
},
{
- top: 63,
+ top: 59.8,
left: 5.5
},
{
- top: 63,
- left: 30.5
+ top: 59.8,
+ left: 35.2
},
],
scrollTableOption: {
@@ -128,18 +143,13 @@ export default {
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 0,
},
- scrollTableData: Array(50).fill('').map(function (i, k) {
- let val1 = Math.ceil(Math.random() * 10000)
- let val2 = val1 - Math.ceil(Math.random() * val1)
- let val3 = val1 - val2
- let val4 = ((val2 / val1) * 100).toFixed(2) + '%'
+ scrollTableData: Array(4).fill('').map(function (i, k) {
return {
value1: k + 1,
- value2: "20230304" + k,
- value3: val1,
- value4: val2,
- value5: val3,
- value6: val4,
+ value2: '出库',
+ value3: '物料1',
+ value4: '000' + k,
+ value5: '2024.03.04',
}
}),
}
@@ -147,97 +157,142 @@ export default {
mounted() {
this.$refs.chart1.setData({
tooltip: {
- trigger: 'axis',
- axisPointer: {
- // 坐标轴指示器，坐标轴触发有效
- type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
- }
+ trigger: "item",
},
grid: {
- left: '0',
- right: '4%',
- bottom: '0',
- top: 20,
- containLabel: true
+ borderWidth: 0,
+ top: "10%",
+ left: "10%",
+ right: "10%",
+ bottom: "10%",
},
- xAxis: {
- type: 'category',
- data: [1, 2, 3, 4, 5, 6],
- axisLine: {
- lineStyle: {
- color: 'white'
- }
- },
- axisLabel: {
- // interval: 0,
- // rotate: 40,
- textStyle: {
- fontFamily: 'Microsoft YaHei'
- }
- }
- },
-
yAxis: {
- type: 'value',
- axisLine: {
- show: false,
+ type: "category",
+ axisLabel: {
+ margin: 10,
+ color: "#ffffff63",
+ },
+
+ axisTick: {
+ show: true,
lineStyle: {
- color: 'white'
- }
+ color: "#ffffff1f",
+ },
},
splitLine: {
- show: false
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: "#ffffff1f",
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#fff3",
+ width: 2,
+ },
+ },
+ data: ['物料1', '物料2', '物料3'],
+ },
+ xAxis: {
+ type: "value",
+ axisLabel: {
+ margin: 10,
+ color: "#ffffff63",
+ },
+ axisLine: {
+ show: false,
+ },
+ axisTick: {
+ show: true,
+ lineStyle: {
+ color: "#ffffff1f",
+ },
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: "#ffffff1f",
+ },
},
- axisLabel: {}
},
series: [
{
- name: '数量',
- label: {
- normal: {
- show: true,
- position: 'top',
- textStyle: {
- color: '#a8aab0',
- fontStyle: 'normal',
- fontFamily: '微软雅黑',
- fontSize: 0.75 * vw
- }
- }
- },
- type: 'bar',
- barWidth: '30%',
- barMaxWidth: 50,
+ name: "",
+ type: "bar",
+ barWidth: "40%",
itemStyle: {
- normal: {
- color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 0,
+ 1,
+ 0,
+ [
{
offset: 0,
- color: '#39ffff'
+ color: "#0a2ad7",
},
{
offset: 1,
- color: '#5affa6'
- }
- ])
- }
+ color: "#138dd7",
+ },
+ ],
+ false
+ ),
},
- data: [1, 2, 3, 4, 5, 6]
- }
+ data: [1, 2, 3],
+ },
+ {
+ name: "",
+ type: "pictorialBar",
+ barWidth: "40%",
+ symbolSize: [5, '100%'],
+ symbolPosition: 'end',
+ symbolOffset: [3, 0],
+ barGap: '-100%',
+ itemStyle: {
+ color: '#138dd7'
+ },
+ data: [1, 2, 3],
+ },
]
})
this.$refs.chart2.setData({
grid: {
- top: 30,
- left: "2%",
+ top: "10%",
+ left: "5%",
right: "5%",
- bottom: "2%",
- containLabel: true,
+ bottom: "10%",
+ },
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ label: {
+ show: true,
+ },
+ },
+ },
+ legend: {
+ data: ["出库", "入库"],
+ top: "0%",
+ textStyle: {
+ color: "#ffffff",
+ },
},
xAxis: {
- type: "category",
- boundaryGap: false,
- data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
+ data: [
+ "物料1",
+ "物料2",
+ "物料3",
+ "物料4",
+ "物料5",
+ "物料6",
+ "物料7",
+ "物料8",
+ ],
axisLabel: {
margin: 10,
color: "#ffffff63",
@@ -252,300 +307,264 @@ export default {
},
},
splitLine: {
- show: false,
+ show: true,
lineStyle: {
type: 'dashed',
color: "#ffffff1f",
},
},
},
- yAxis: [
- {
- type: "value",
- axisLabel: {
- margin: 10,
- color: "#ffffff63",
- },
+ yAxis: {
+ type: "value",
+ axisLabel: {
+ margin: 10,
+ color: "#ffffff63",
+ },
- axisTick: {
- show: true,
- lineStyle: {
- color: "#ffffff1f",
- },
- },
- splitLine: {
- show: false,
- lineStyle: {
- type: 'dashed',
- color: "#ffffff1f",
- },
- },
- axisLine: {
- lineStyle: {
- color: "#fff",
- width: 2,
- },
+ axisTick: {
+ show: true,
+ lineStyle: {
+ color: "#ffffff1f",
},
},
- ],
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: 'dashed',
+ color: "#ffffff1f",
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: "#fff3",
+ width: 2,
+ },
+ },
+ },
series: [
{
- name: "产量",
- type: "line",
- smooth: true, //是否平滑曲线显示
- showAllSymbol: true,
- symbol: "circle",
- symbolSize: 6,
- lineStyle: {
- normal: {
- color: "#fff", // 线条颜色
- },
- },
- label: {
- show: true,
- position: "top",
- textStyle: {
- color: "#fff",
- },
- },
+ name: "出库",
+ type: "bar",
+ barWidth: '25%',
itemStyle: {
- color: "red",
- borderColor: "#fff",
- borderWidth: 3,
- },
- tooltip: {
- show: false,
- },
- areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
- 0,
- 0,
0,
1,
+ 0,
+ 0,
[
{
offset: 0,
- color: "#eb64fb",
+ color: "#0a2ad7",
},
{
offset: 1,
- color: "#3fbbff0d",
+ color: "#138dd7",
},
],
false
),
},
},
- data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
+ data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
+ },
+ {
+ name: "入库",
+ type: "bar",
+ barWidth: '25%',
+ barGap: '20%',
+ itemStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(
+ 0,
+ 1,
+ 0,
+ 0,
+ [
+ {
+ offset: 0,
+ color: "#159d40",
+ },
+ {
+ offset: 1,
+ color: "#0bcb98",
+ },
+ ],
+ false
+ ),
+ },
+ },
+ data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
+ },
+ {
+ name: "",
+ tooltip: {
+ show: false
+ },
+ type: "pictorialBar",
+ barWidth: "25%",
+ symbolSize: ['100%', 5],
+ symbolPosition: 'end',
+ symbolOffset: ['-60%', -3],
+ itemStyle: {
+ color: '#138dd7'
+ },
+ data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
+ },
+ {
+ name: "",
+ type: "pictorialBar",
+ tooltip: {
+ show: false
+ },
+ barWidth: "25%",
+ symbolSize: ['100%', 5],
+ symbolPosition: 'end',
+ symbolOffset: ['60%', -3],
+ itemStyle: {
+ color: '#0bcb98'
+ },
+ data: [4.2, 3.8, 4.8, 3.5, 2.9, 2.8, 3, 5],
},
],
})
this.$refs.chart3.setData({
- grid: {
- top: 30,
- left: "2%",
- right: "5%",
- bottom: "2%",
- containLabel: true,
+ tooltip: {
+ trigger: "item",
+ formatter: "{a}
{b} : {c} ({d}%)",
},
- xAxis: {
- type: "category",
- data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
- axisLabel: {
- margin: 10,
- color: "#ffffff63",
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: true,
- lineStyle: {
- color: "#ffffff1f",
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: "#ffffff1f",
- },
+ legend: {
+ type: "scroll",
+ orient: "vertical",
+ left: "70%",
+ align: "left",
+ top: "middle",
+ textStyle: {
+ color: "#8C8C8C",
},
+ height: 250,
},
- yAxis: [
- {
- type: "value",
- axisLabel: {
- margin: 10,
- color: "#ffffff63",
- },
-
- axisTick: {
- show: true,
- lineStyle: {
- color: "#ffffff1f",
- },
- },
- splitLine: {
- show: true,
- lineStyle: {
- type: 'dashed',
- color: "#ffffff1f",
- },
- },
- axisLine: {
- lineStyle: {
- color: "#fff",
- width: 2,
- },
- },
- },
- ],
series: [
{
- name: "产量",
- type: "line",
- smooth: true, //是否平滑曲线显示
- showAllSymbol: true,
- symbol: "circle",
- symbolSize: 6,
- lineStyle: {
- normal: {
- color: "#fff", // 线条颜色
+ name: "库存情况",
+ type: "pie",
+ radius: ["20%", "70%"],
+ center: ["35%", "50%"],
+ clockwise: false,
+ data: [
+ {
+ value: 45,
+ name: "已过期",
},
- },
+ {
+ value: 25,
+ name: "半年内",
+ },
+ {
+ value: 15,
+ name: "三个月内",
+ },
+ {
+ value: 8,
+ name: "一个月内",
+ },
+ ],
label: {
- show: true,
- position: "top",
- textStyle: {
- color: "#fff",
+ normal: {
+ position: "inner",
+ textStyle: {
+ color: "#fff",
+ fontSize: 14,
+ },
+ formatter: (e) => {
+ return e.percent.toFixed(2) + '%'
+ }
},
},
- itemStyle: {
- color: "red",
- borderColor: "#fff",
- borderWidth: 3,
+ labelLine: {
+ normal: {
+ show: false,
+ },
},
- tooltip: {
- show: false,
- },
- data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
},
],
})
this.$refs.chart4.setData({
- grid: {
- top: 30,
- left: "2%",
- right: "5%",
- bottom: "2%",
- containLabel: true,
- },
- xAxis: {
- type: "category",
- boundaryGap: false,
- data: ["14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
- axisLabel: {
- margin: 10,
- color: "#ffffff63",
- },
- axisLine: {
- show: false,
- },
- axisTick: {
- show: true,
- lineStyle: {
- color: "#ffffff1f",
- },
- },
- splitLine: {
- show: false,
- lineStyle: {
- type: 'dashed',
- color: "#ffffff1f",
- },
+ title: {
+ x: 'center',
+ y: 'center',
+ text: "75%",
+ textStyle: {
+ color: '#ccc',
+ fontSize: 1.5 * vw,
},
},
- yAxis: [
+ series: [
{
- type: "value",
- axisLabel: {
- margin: 10,
- color: "#ffffff63",
- },
-
- axisTick: {
- show: true,
- lineStyle: {
- color: "#ffffff1f",
+ type: "pie",
+ radius: ["47.5%", "55%"],
+ center: ["50%", "50%"],
+ startAngle: 225,
+ endAngle: -45,
+ color: ['#fa9800', "transparent"],
+ data: [
+ {
+ value: 75,
+ name: ''
},
- },
- splitLine: {
- show: false,
- lineStyle: {
- type: 'dashed',
- color: "#ffffff1f",
+ {
+ value: 25,
+ name: ''
},
+ ],
+ label: {
+ show: false
},
- axisLine: {
- lineStyle: {
- color: "#fff",
- width: 2,
+ labelLine: {
+ normal: {
+ show: false,
},
},
},
],
+ })
+ this.$refs.chart5.setData({
+ title: {
+ x: 'center',
+ y: 'center',
+ text: "75%",
+ textStyle: {
+ color: '#ccc',
+ fontSize: 1.5 * vw,
+ },
+ },
series: [
{
- name: "产量",
- type: "line",
- smooth: true, //是否平滑曲线显示
- showAllSymbol: true,
- symbol: "circle",
- symbolSize: 6,
- lineStyle: {
- normal: {
- color: "#fff", // 线条颜色
+ type: "pie",
+ radius: ["47.5%", "55%"],
+ center: ["50%", "50%"],
+ startAngle: 225,
+ endAngle: -45,
+ color: ['#00f79e', "transparent"],
+ data: [
+ {
+ value: 75,
+ name: '',
},
- },
+ {
+ value: 25,
+ name: ''
+ },
+ ],
label: {
- show: true,
- position: "top",
- textStyle: {
- color: "#fff",
- },
+ // show: false
},
- itemStyle: {
- color: "red",
- borderColor: "#fff",
- borderWidth: 3,
- },
- tooltip: {
- show: false,
- },
- areaStyle: {
+ labelLine: {
normal: {
- color: new echarts.graphic.LinearGradient(
- 0,
- 0,
- 0,
- 1,
- [
- {
- offset: 0,
- color: "#eb64fb",
- },
- {
- offset: 1,
- color: "#3fbbff0d",
- },
- ],
- false
- ),
+ show: false,
},
},
- data: [393, 438, 485, 631, 689, 824, 987, 1000, 1100, 1200],
},
],
})
@@ -555,6 +574,7 @@ export default {
this.$refs.chart2.chart.resize()
this.$refs.chart3.chart.resize()
this.$refs.chart4.chart.resize()
+ this.$refs.chart5.chart.resize()
}
},
methods: {}
@@ -593,53 +613,122 @@ export default {
.table1 {
position: absolute;
- top: 14.5%;
- left: 3.3%;
- width: 23.8%;
- height: 45.5%;
+ top: 66.5%;
+ left: 67.3%;
+ width: 27.8%;
+ height: 27.5%;
color: #fff
}
.scrollTableItem {
display: inline-block;
- width: calc(100% / 6);
+ width: calc(100% / 5);
text-align: center;
- padding: 4px 0;
+ padding: 14px 0;
color: #fff9
}
.chart1 {
position: absolute;
- top: 14.5%;
- left: 73%;
- width: 23.8%;
- height: 45.5%;
+ top: 23%;
+ left: 3.8%;
+ width: 27.8%;
+ height: 32%;
}
.chart2 {
position: absolute;
- top: 66%;
- left: 3.3%;
- width: 23.8%;
- height: 29%;
+ top: 23%;
+ left: 33%;
+ width: 63.8%;
+ height: 32%;
}
.chart3 {
position: absolute;
- top: 66%;
- left: 28.4%;
- width: 43.1%;
- height: 29%;
+ top: 63%;
+ left: 3.8%;
+ width: 27.8%;
+ height: 32%;
}
.chart4 {
position: absolute;
- top: 66%;
- left: 73%;
- width: 23.8%;
- height: 29%;
+ top: 64.6%;
+ left: 33.9%;
+ width: 16vw;
+ height: 16vw;
}
+
+.chart5 {
+ position: absolute;
+ top: 64.6%;
+ left: 48.8%;
+ width: 16vw;
+ height: 16vw;
+
+}
+
+.span1 {
+ position: absolute;
+ top: 86.3%;
+ left: 41.9%;
+ transform: translate(-50%, -50%);
+ color: #dddddd;
+ font-size: 1vw;
+}
+
+.span2 {
+ position: absolute;
+ top: 86.3%;
+ left: 56.8%;
+ transform: translate(-50%, -50%);
+ color: #dddddd;
+ font-size: 1vw;
+}
+
+.info1, .info2, .info3, .info4 {
+ position: absolute;
+ top: 11.9%;
+ width: 19.6%;
+ height: 5.8%;
+ transform: translate(-50%, -50%);
+
+ .infoSpan {
+ position: absolute;
+ transform: translate(-100%, -50%);
+ top: 50%;
+ left: 45%;
+ color: #ccc;
+ font-size: 1.1vw;
+ }
+
+ .infoSum {
+ position: absolute;
+ transform: translate(100%, -50%);
+ top: 50%;
+ left: 47%;
+ font-size: 1.1vw;
+ }
+}
+
+.info1 {
+ left: 13.1%;
+}
+
+.info2 {
+ left: 37.7%;
+}
+
+.info3 {
+ left: 62.3%;
+}
+
+.info4 {
+ left: 86.9%;
+}
+