statisticsStyleChange
This commit is contained in:
parent
0eff00cb4e
commit
aaee37fee2
|
@ -9,14 +9,21 @@
|
|||
<Echart
|
||||
:options="pieOptions"
|
||||
id="pieChart"
|
||||
height="45vh"
|
||||
:height="domHeight"
|
||||
></Echart>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-card>
|
||||
<div class="chartsTitle">废料原因统计</div>
|
||||
<div id="barChart" style="width:100%;height: 45vh"></div>
|
||||
<charts
|
||||
:id="chartId0"
|
||||
:options="barOptions1"
|
||||
:className="chartsName"
|
||||
:height="domHeight"
|
||||
width="600px"
|
||||
>
|
||||
</charts>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
@ -54,9 +61,9 @@
|
|||
<div class="chartsTitle">采购物料表</div>
|
||||
<charts
|
||||
:id="chartId1"
|
||||
:options="barOptions"
|
||||
:options="barOptions21"
|
||||
:className="chartsName"
|
||||
height="45vh"
|
||||
:height="domHeight"
|
||||
width="600px"
|
||||
>
|
||||
</charts>
|
||||
|
@ -67,9 +74,9 @@
|
|||
<div class="chartsTitle">采购供应商表</div>
|
||||
<charts
|
||||
:id="chartId2"
|
||||
:options="barOptions"
|
||||
:options="barOptions22"
|
||||
:className="chartsName"
|
||||
height="45vh"
|
||||
:height="domHeight"
|
||||
width="600px"
|
||||
>
|
||||
</charts>
|
||||
|
@ -109,9 +116,9 @@
|
|||
<div class="chartsTitle">废料来源</div>
|
||||
<charts
|
||||
:id="chartId3"
|
||||
:options="barOptions"
|
||||
:options="barOptions3"
|
||||
:className="chartsName"
|
||||
height="45vh"
|
||||
:height="domHeight"
|
||||
>
|
||||
</charts>
|
||||
</el-card>
|
||||
|
@ -157,17 +164,21 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
chartId0: 'chart0',
|
||||
chartId1: 'chart1',
|
||||
chartId2: 'chart2',
|
||||
chartId3: 'chart3',
|
||||
barChart: null,
|
||||
barChart1: null,
|
||||
pieOptions: {},
|
||||
barOptions: {},
|
||||
barOptions1: {},
|
||||
barOptions21: {},
|
||||
barOptions22: {},
|
||||
barOptions3: {},
|
||||
activeName: '废料统计',
|
||||
chartsName: "chartsName",
|
||||
domHeight:'300px',
|
||||
cdata: {
|
||||
xData: ["气泡", "划痕"],
|
||||
seriesData: [
|
||||
{value: 10, name: "气泡"},
|
||||
{value: 5, name: "破点"},
|
||||
|
@ -175,11 +186,29 @@
|
|||
{value: 6, name: "其他"},
|
||||
]
|
||||
},
|
||||
chartData: {
|
||||
chartData1: {
|
||||
xAxisData: ["气泡", "破点", "划伤", "其他"],
|
||||
seriesData: [10, 5, 19, 6],
|
||||
seriesData: [30, 25, 35, 10],
|
||||
},
|
||||
xAxisbar: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
|
||||
chartData21: {
|
||||
xAxisData: ["物料1", "物料2", "物料3", "物料4", "物料5", "物料6", "物料7"],
|
||||
seriesData: [800, 950, 960, 906, 600, 800, 900],
|
||||
},
|
||||
chartData22: {
|
||||
xAxisData: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
|
||||
seriesData: [5, 20, 15, 25,10, 10,15],
|
||||
},
|
||||
chartData3: {
|
||||
xAxisData: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
|
||||
seriesData:[2, 2, 4, 5,1, 0,1],
|
||||
},
|
||||
xAxisData1: ["气泡", "破点", "划伤", "其他"],
|
||||
xAxisbar21: ["物料1", "物料2", "物料3", "物料4", "物料5", "物料6", "物料7"],
|
||||
xAxisbar22: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
|
||||
xAxisbar3: ["供应商1", "供应商2", "供应商3", "供应商4", "供应商5", "供应商6", "供应商7"],
|
||||
barData1: [30, 25, 35, 10],
|
||||
barData21: [800, 950, 960, 906, 600, 800, 900],
|
||||
barData22: [5, 20, 15, 25,10, 10,15],
|
||||
barData: [80, 95, 96, 96, 96, 98, 99],
|
||||
list: [
|
||||
{id: 1, name: 'HIehd91', card: '3331', sco: 'REF-31', num: 2, reason: "气泡"},
|
||||
|
@ -233,87 +262,22 @@
|
|||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
created(){
|
||||
let hei = document.getElementsByClassName('app-main')[0].clientHeight;
|
||||
this.domHeight =( hei- 20)/2+'px';
|
||||
},
|
||||
methods: {
|
||||
drawChart() {
|
||||
let that = this;
|
||||
this.barChart = this.$echarts.init(document.getElementById('barChart'));
|
||||
this.barChart.setOption({
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '3%',
|
||||
right: '5%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
let color = params.color;//图例颜色
|
||||
let htmlStr = '<div>';
|
||||
htmlStr += params.seriesName + '<br/>';
|
||||
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
|
||||
htmlStr += params.name + ':' + params.value + '件';
|
||||
htmlStr += '</div>';
|
||||
return htmlStr;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //去掉X轴分割线
|
||||
},
|
||||
data: that.chartData.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true,//y轴线
|
||||
},
|
||||
axisTick: {
|
||||
show: false//Y轴刻度线
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333333'//Y轴文本颜色
|
||||
},
|
||||
splitLine: {
|
||||
show: true, //Y轴分割线
|
||||
lineStyle: {
|
||||
color: '#dddddd'//Y轴分割线颜色
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '废料统计',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: that.chartData.seriesData,
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
formatter: '{c}',//显示百分号
|
||||
textStyle: { //数值样式
|
||||
color: 'black',//字体颜色
|
||||
fontSize: 10//字体大小
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
}]
|
||||
});
|
||||
},
|
||||
handleClick(tab) {
|
||||
handleClick() {
|
||||
// console.log(tab);
|
||||
// debugger;
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.drawChart();
|
||||
this.barOptions = {
|
||||
let that = this;
|
||||
this.barOptions1 = {
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '3%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
|
@ -323,9 +287,9 @@
|
|||
formatter: function (params) {
|
||||
let color = params.color;//图例颜色
|
||||
let htmlStr = '<div>';
|
||||
htmlStr += params.name + '<br/>';
|
||||
htmlStr += params.seriesName + '<br/>';
|
||||
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
|
||||
htmlStr += params.seriesName + ':' + params.value + '%';
|
||||
htmlStr += params.name + ':' + params.value + '件';
|
||||
htmlStr += '</div>';
|
||||
return htmlStr;
|
||||
}
|
||||
|
@ -337,7 +301,7 @@
|
|||
splitLine: {
|
||||
show: false, //去掉X轴分割线
|
||||
},
|
||||
data: this.xAxisbar,
|
||||
data: that.chartData1.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
|
@ -357,10 +321,10 @@
|
|||
},
|
||||
},
|
||||
series: [{
|
||||
name: '成品率',
|
||||
name: '废料统计',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: this.barData,
|
||||
data: that.chartData1.seriesData,
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
|
@ -374,7 +338,202 @@
|
|||
color: '#409EFF'
|
||||
},
|
||||
}]
|
||||
}
|
||||
};
|
||||
this.barOptions21 = {
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
let color = params.color;//图例颜色
|
||||
let htmlStr = '<div>';
|
||||
htmlStr += '物料采购' + '<br/>';
|
||||
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
|
||||
htmlStr += params.name + ':' + params.value + '件';
|
||||
htmlStr += '</div>';
|
||||
return htmlStr;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //去掉X轴分割线
|
||||
},
|
||||
data: this.chartData21.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true,//y轴线
|
||||
},
|
||||
axisTick: {
|
||||
show: false//Y轴刻度线
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333333'//Y轴文本颜色
|
||||
},
|
||||
splitLine: {
|
||||
show: true, //Y轴分割线
|
||||
lineStyle: {
|
||||
color: '#dddddd'//Y轴分割线颜色
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '物料',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: this.chartData21.seriesData,
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
formatter: '{c}',//显示百分号
|
||||
textStyle: { //数值样式
|
||||
color: 'black',//字体颜色
|
||||
fontSize: 10//字体大小
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
}]
|
||||
};
|
||||
this.barOptions22 = {
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
let color = params.color;//图例颜色
|
||||
let htmlStr = '<div>';
|
||||
htmlStr += params.seriesName + '<br/>';
|
||||
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
|
||||
htmlStr += params.name + ':' + params.value + '%';
|
||||
htmlStr += '</div>';
|
||||
return htmlStr;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //去掉X轴分割线
|
||||
},
|
||||
data: this.chartData22.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true,//y轴线
|
||||
},
|
||||
axisTick: {
|
||||
show: false//Y轴刻度线
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333333'//Y轴文本颜色
|
||||
},
|
||||
splitLine: {
|
||||
show: true, //Y轴分割线
|
||||
lineStyle: {
|
||||
color: '#dddddd'//Y轴分割线颜色
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '采购占比',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: this.chartData22.seriesData,
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
formatter: '{c}',//显示百分号
|
||||
textStyle: { //数值样式
|
||||
color: 'black',//字体颜色
|
||||
fontSize: 10//字体大小
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
}]
|
||||
};
|
||||
this.barOptions3 = {
|
||||
grid: {
|
||||
top: '10%',
|
||||
left: '5%',
|
||||
right: '5%',
|
||||
bottom: '1%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: function (params) {
|
||||
let color = params.color;//图例颜色
|
||||
let htmlStr = '<div>';
|
||||
htmlStr += params.seriesName + '<br/>';
|
||||
htmlStr += '<span style="height:10px;width:10px;font-size:12px;border-radius:5px;margin-right:5px;font-family:Consolas;display:inline-block;background:' + color + ';"></span>';
|
||||
htmlStr += params.name + ':' + params.value + '件';
|
||||
htmlStr += '</div>';
|
||||
return htmlStr;
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //去掉X轴分割线
|
||||
},
|
||||
data: this.chartData3.xAxisData,
|
||||
},
|
||||
yAxis: {
|
||||
axisLine: {
|
||||
show: true,//y轴线
|
||||
},
|
||||
axisTick: {
|
||||
show: false//Y轴刻度线
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#333333'//Y轴文本颜色
|
||||
},
|
||||
splitLine: {
|
||||
show: true, //Y轴分割线
|
||||
lineStyle: {
|
||||
color: '#dddddd'//Y轴分割线颜色
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [{
|
||||
name: '废料来源',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: this.chartData3.seriesData,
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
position: 'top', //在上方显示
|
||||
formatter: '{c}',//显示百分号
|
||||
textStyle: { //数值样式
|
||||
color: 'black',//字体颜色
|
||||
fontSize: 10//字体大小
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
},
|
||||
}]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
<Echart
|
||||
:options="pieOptions"
|
||||
id="pieChart"
|
||||
height="45vh"
|
||||
:height="domHeight"
|
||||
></Echart>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
@ -18,7 +18,7 @@
|
|||
:id="chartId1"
|
||||
:options="barOptions"
|
||||
:className="chartsName"
|
||||
height="45vh"
|
||||
:height="domHeight"
|
||||
width="100%"
|
||||
>
|
||||
</charts>
|
||||
|
@ -31,7 +31,7 @@
|
|||
:id="chartId2"
|
||||
:options="barOptions1"
|
||||
:className="chartsName"
|
||||
height="45vh"
|
||||
:height="domHeight"
|
||||
width="100%"
|
||||
>
|
||||
</charts>
|
||||
|
@ -54,7 +54,6 @@
|
|||
v-el-height-adaptive-table="{bottomOffset: 42}"
|
||||
>
|
||||
<el-table-column type="index" width="50" />
|
||||
|
||||
<el-table-column label="订单编号" width="120" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ scope.row.number }}</template>
|
||||
</el-table-column>
|
||||
|
@ -64,7 +63,6 @@
|
|||
<el-table-column label="产品数量">
|
||||
<template slot-scope="scope">{{ scope.row.count }}</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="已交货数量">
|
||||
<template slot-scope="scope">{{ scope.row.delivered_count }}</template>
|
||||
</el-table-column>
|
||||
|
@ -168,6 +166,7 @@
|
|||
{value: 1, name: "逾期率"},
|
||||
]
|
||||
},
|
||||
domHeight:'300px',
|
||||
xAxisbar:["冷加工", "热弯", "钢化", "镀膜", "夹层", "包边", "装框"],
|
||||
barData: [80, 95, 96, 96, 96, 98, 99],
|
||||
xAxisbar1:[ "2021/09", "2021/10", "2021/11", "2021/12", "2022/01", "2022/02"],
|
||||
|
@ -217,6 +216,10 @@
|
|||
immediate: true,
|
||||
deep: true
|
||||
},
|
||||
created(){
|
||||
let hei = document.getElementsByClassName('app-main')[0].clientHeight;
|
||||
this.domHeight =( hei- 60)/2+'px';
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.orderLoading = true;
|
||||
|
@ -378,6 +381,7 @@
|
|||
},
|
||||
}]
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue