|
|
@@ -315,31 +315,31 @@
|
|
|
getAction(this.url.initPieAndColumnar, 'get').then((res) => {
|
|
|
if(res.success) {
|
|
|
data = res.result;
|
|
|
- this.pieInside = res.result.pieInside;
|
|
|
- this.pieOutside = res.result.pieOutside;
|
|
|
- this.loadingPie();
|
|
|
- this.loadingShadow();
|
|
|
- console.log(res);
|
|
|
+ this.loadingPie(res.result);
|
|
|
+ this.loadingShadow(res.result);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
},
|
|
|
- loadingPie() {
|
|
|
+ loadingPie(data) {
|
|
|
this.pieChart = this.$echarts.init(this.$refs.pie)
|
|
|
+ let legendData = [];
|
|
|
+ let color = []
|
|
|
+ data.pieInside.forEach(res => {
|
|
|
+ legendData.push("name", res.name);
|
|
|
+ color.push(res.itemStyle.color);
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log(data);
|
|
|
let option = {
|
|
|
- color: ['#70bfe5', '#eb6a6c', '#f9c942', '#91c974', '#5a6ac0'],
|
|
|
+ color: color,
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|
|
},
|
|
|
backgroundColor: '#fff',
|
|
|
legend: {
|
|
|
- data: [
|
|
|
- '开发未完',
|
|
|
- '日别Capa不足',
|
|
|
- '合并生产',
|
|
|
- 'LOT不良'
|
|
|
- ]
|
|
|
+ data: legendData
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
@@ -354,7 +354,7 @@
|
|
|
labelLine: {
|
|
|
show: false
|
|
|
},
|
|
|
- data: this.pieInside
|
|
|
+ data: data.pieInside
|
|
|
},
|
|
|
{
|
|
|
name: 'Access From',
|
|
|
@@ -395,14 +395,58 @@
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- data: this.pieOutside
|
|
|
+ data: data.pieOutside
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
this.pieChart.setOption(option)
|
|
|
},
|
|
|
- loadingShadow() {
|
|
|
+ loadingShadow(data) {
|
|
|
this.barlineChart = this.$echarts.init(this.$refs.barline)
|
|
|
+ let seriesData = [];
|
|
|
+ let legendData = [];
|
|
|
+ let lossData = {
|
|
|
+ name: "LOSS",
|
|
|
+ type: "line",
|
|
|
+ yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
|
+ smooth: false, //平滑曲线显示
|
|
|
+ symbol: "circle", //标记的图形为实心圆
|
|
|
+ symbolSize: 8, //标记的大小
|
|
|
+ itemStyle: {
|
|
|
+ normal: {
|
|
|
+ color: '#72A9FE',
|
|
|
+ borderColor: 'rgba(114, 169, 254, 0.5)', //圆点透明 边框
|
|
|
+ borderWidth: 7
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ lineStyle: {
|
|
|
+ color: "#72A9FE"
|
|
|
+ },
|
|
|
+ data: data.lossData
|
|
|
+ }
|
|
|
+ let itemStyle = {
|
|
|
+ normal: {
|
|
|
+ label: {
|
|
|
+ show: false,
|
|
|
+ textStyle: {
|
|
|
+ color: '#333',
|
|
|
+ fontSize: 14
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for (let key in data.columnarData) {
|
|
|
+ legendData.push("name", key);
|
|
|
+ seriesData.push({
|
|
|
+ "name": key,
|
|
|
+ "type": "bar",
|
|
|
+ "data": data.columnarData[key],
|
|
|
+ "stack": "总量",
|
|
|
+ "barWidth": "40%",
|
|
|
+ "itemStyle": itemStyle});
|
|
|
+ }
|
|
|
+ seriesData.push(lossData);
|
|
|
let option = {
|
|
|
"backgroundColor": "#fff",
|
|
|
"color": [
|
|
|
@@ -410,24 +454,14 @@
|
|
|
"#FFC533",
|
|
|
"#56C994",
|
|
|
"#F6856E",
|
|
|
+ "#CC66FF",
|
|
|
+ "#CCCC66"
|
|
|
],
|
|
|
"title": {
|
|
|
},
|
|
|
"legend": {
|
|
|
"orient": "horizontal",
|
|
|
- "data": [
|
|
|
- {
|
|
|
- "name": "R&D LOSS数量"
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "制造 LOSS数量"
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- "name": "LOSS率"
|
|
|
- },
|
|
|
-
|
|
|
- ],
|
|
|
+ "data": legendData,
|
|
|
"left": 0,
|
|
|
"top": "4%",
|
|
|
"textStyle": {
|
|
|
@@ -454,9 +488,7 @@
|
|
|
"xAxis": [
|
|
|
{
|
|
|
"type": "category",
|
|
|
- "data": [
|
|
|
- 'W10', 'W11', 'W12', 'W13', 'W14', 'W15'
|
|
|
- ],
|
|
|
+ "data": data.columnarWeeks,
|
|
|
"axisTick": {
|
|
|
"show": false,
|
|
|
|
|
|
@@ -481,7 +513,7 @@
|
|
|
"yAxis": [
|
|
|
{
|
|
|
"type": "value",
|
|
|
- "max": "600",
|
|
|
+ "max": data.weekMax,
|
|
|
"axisTick": {
|
|
|
"show": false
|
|
|
},
|
|
|
@@ -548,95 +580,15 @@
|
|
|
end: 70
|
|
|
}
|
|
|
],
|
|
|
- "series": [
|
|
|
- // {symbol: 'circle'},
|
|
|
- {
|
|
|
- "name": "R&D",
|
|
|
- "type": "bar",
|
|
|
- "stack": "总量",
|
|
|
- "barWidth": "40%",
|
|
|
- "data": [
|
|
|
- "42",
|
|
|
- "44",
|
|
|
- "40",
|
|
|
- "78",
|
|
|
- "101",
|
|
|
- "376",
|
|
|
- ],
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- label: {
|
|
|
- show: true, //开启显示
|
|
|
- //
|
|
|
- textStyle: { //数值样式
|
|
|
- color: '#333',
|
|
|
- fontSize: 14
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- "name": "制造",
|
|
|
- "type": "bar",
|
|
|
- "stack": "总量",
|
|
|
- "barWidth": "40%",
|
|
|
- "data": [
|
|
|
- "12",
|
|
|
- "14",
|
|
|
- "10",
|
|
|
- "92",
|
|
|
- "24",
|
|
|
- "208",
|
|
|
- ],
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- label: {
|
|
|
- show: true, //开启显示
|
|
|
- textStyle: { //数值样式
|
|
|
- color: '#333',
|
|
|
- fontSize: 14
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- {
|
|
|
- name: "LOSS",
|
|
|
- type: "line",
|
|
|
- yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
|
- smooth: false, //平滑曲线显示
|
|
|
- symbol: "circle", //标记的图形为实心圆
|
|
|
- symbolSize: 8, //标记的大小
|
|
|
- itemStyle: {
|
|
|
- normal: {
|
|
|
- color: '#72A9FE',
|
|
|
- borderColor: 'rgba(114, 169, 254, 0.5)', //圆点透明 边框
|
|
|
- borderWidth: 7
|
|
|
- },
|
|
|
-
|
|
|
- },
|
|
|
- lineStyle: {
|
|
|
- color: "#72A9FE"
|
|
|
- },
|
|
|
- data: [
|
|
|
- "0.35",
|
|
|
- "0.4",
|
|
|
- "0.3",
|
|
|
- "0.3",
|
|
|
- "0.9",
|
|
|
- "4.0",
|
|
|
- ]
|
|
|
- },
|
|
|
-
|
|
|
- ]
|
|
|
+ "series": seriesData,
|
|
|
}
|
|
|
+
|
|
|
this.barlineChart.setOption(option);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+
|
|
|
</script>
|
|
|
<style scoped>
|
|
|
@import '~@assets/less/common.less';
|
zhouxingyu