|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<div class="headTitle">质量可视化管理</div>
|
|
|
<div class="exit" @click="exitFun"></div>
|
|
|
|
|
|
|
|
|
<div class="centerTitle">本月综合质量</div>
|
|
|
<div class="chart11">
|
|
|
<Chart ref="chart11"></Chart>
|
|
|
</div>
|
|
|
<div class="chart12">
|
|
|
<Chart ref="chart12"></Chart>
|
|
|
</div>
|
|
|
<div class="chart13">
|
|
|
<Chart ref="chart13"></Chart>
|
|
|
</div>
|
|
|
<div class="chart14">
|
|
|
<Chart ref="chart14"></Chart>
|
|
|
</div>
|
|
|
<div class="box1">
|
|
|
<div class="boxTitle">一次校验合格率</div>
|
|
|
<div class="chart1">
|
|
|
<Chart ref="chart1"></Chart>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box2">
|
|
|
<div class="boxTitle">OQC抽检分数</div>
|
|
|
<div class="chart2">
|
|
|
<Chart ref="chart2"></Chart>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box3">
|
|
|
<div class="chart3">
|
|
|
<Chart ref="chart3"></Chart>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box4">
|
|
|
<div class="boxTitle">本月缺陷占比</div>
|
|
|
<div class="chart4">
|
|
|
<Chart ref="chart4"></Chart>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box5">
|
|
|
<div class="boxTitle">重点工序监控</div>
|
|
|
<div class="chart5">
|
|
|
<Chart ref="chart5"></Chart>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="box6">
|
|
|
<div class="boxTitle">当年市场不良率</div>
|
|
|
<div class="chart6">
|
|
|
<Chart ref="chart6"></Chart>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import Chart from "@/components/board/Chart";
|
|
|
import {getData} from "@/api/board/getData";
|
|
|
import * as echarts from 'echarts'
|
|
|
|
|
|
export default {
|
|
|
name: "Liner",
|
|
|
components: {
|
|
|
Chart
|
|
|
},
|
|
|
props: {
|
|
|
exit: {
|
|
|
type: Function,
|
|
|
default: null
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {}
|
|
|
},
|
|
|
mounted() {
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
|
this.$refs.chart1.setData({
|
|
|
grid: {
|
|
|
top: "15%",
|
|
|
bottom: "10%", //也可设置left和right设置距离来控制图表的大小
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "shadow",
|
|
|
label: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["产品数", "合格率"],
|
|
|
top: "3%",
|
|
|
textStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: [
|
|
|
"01",
|
|
|
"02",
|
|
|
"03",
|
|
|
"04",
|
|
|
],
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true, //隐藏X轴刻度
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ffffff66", //X轴文字颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
name: "数量",
|
|
|
nameTextStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "value",
|
|
|
name: "合格率",
|
|
|
nameTextStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
position: "right",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
formatter: "{value} %", //右侧Y轴文字显示
|
|
|
textStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "合格率",
|
|
|
type: "line",
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
formatter: '{c}%',
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
|
smooth: true, //平滑曲线显示
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: "circle", //标记的图形为实心圆
|
|
|
symbolSize: 5, //标记的大小
|
|
|
itemStyle: {
|
|
|
//折线拐点标志的样式
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
data: [94.2, 93.8, 94.8, 93.5],
|
|
|
},
|
|
|
{
|
|
|
name: "产品数",
|
|
|
type: "bar",
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: ['0%', '50%'],
|
|
|
textStyle: {
|
|
|
color: "#ffffff",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
barWidth: 15,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#45e9a7",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#35a075",
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
},
|
|
|
data: [4.2, 3.8, 4.8, 3.5],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart2.setData({
|
|
|
grid: {
|
|
|
top: "15%",
|
|
|
bottom: "10%", //也可设置left和right设置距离来控制图表的大小
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "shadow",
|
|
|
label: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["OQC抽检分数", "目标值"],
|
|
|
top: "3%",
|
|
|
textStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: [
|
|
|
"01",
|
|
|
"02",
|
|
|
"03",
|
|
|
"04",
|
|
|
],
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true, //隐藏X轴刻度
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ffffff66", //X轴文字颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
name: "OQC抽检分数",
|
|
|
nameTextStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
position: "left",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "OQC抽检分数",
|
|
|
type: "line",
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: "circle", //标记的图形为实心圆
|
|
|
symbolSize: 5, //标记的大小
|
|
|
itemStyle: {
|
|
|
//折线拐点标志的样式
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
data: [94.6, 93.4, 94.7, 93.3],
|
|
|
},
|
|
|
{
|
|
|
name: "目标值",
|
|
|
type: "line",
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "bottom",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: "circle", //标记的图形为实心圆
|
|
|
symbolSize: 5, //标记的大小
|
|
|
itemStyle: {
|
|
|
//折线拐点标志的样式
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
data: [94.7, 93.2, 94.7, 93.4],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart3.setData({
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "",
|
|
|
type: "pie",
|
|
|
center: ["50%", "50%"],
|
|
|
data: [
|
|
|
{value: 335, name: "测温"},
|
|
|
{value: 310, name: "捡漏"},
|
|
|
{value: 234, name: "后板"},
|
|
|
{value: 135, name: "系统件"},
|
|
|
],
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
label: {
|
|
|
show: true,
|
|
|
formatter: "{b} : {c} ({d}%)",
|
|
|
color:'#fff'
|
|
|
},
|
|
|
},
|
|
|
labelLine: {show: true},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart4.setData({
|
|
|
grid: {
|
|
|
top: "15%",
|
|
|
bottom: "10%", //也可设置left和right设置距离来控制图表的大小
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "shadow",
|
|
|
label: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["占比"],
|
|
|
top: "3%",
|
|
|
textStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: [
|
|
|
"测温",
|
|
|
"捡漏",
|
|
|
"后板",
|
|
|
"系统件",
|
|
|
],
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true, //隐藏X轴刻度
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ffffff66", //X轴文字颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
name: "缺陷占比",
|
|
|
nameTextStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
position: "left",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "占比",
|
|
|
type: "line",
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "bottom",
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: "circle", //标记的图形为实心圆
|
|
|
symbolSize: 5, //标记的大小
|
|
|
itemStyle: {
|
|
|
//折线拐点标志的样式
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
data: [94.7, 93.2, 94.7, 93.4],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart5.setData({
|
|
|
grid: {
|
|
|
top: "15%",
|
|
|
bottom: "10%", //也可设置left和right设置距离来控制图表的大小
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "shadow",
|
|
|
label: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["质检次数", "合格率"],
|
|
|
top: "3%",
|
|
|
textStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: [
|
|
|
"01",
|
|
|
"02",
|
|
|
"03",
|
|
|
"04",
|
|
|
],
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true, //隐藏X轴刻度
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ffffff66", //X轴文字颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
name: "数量",
|
|
|
nameTextStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: true,
|
|
|
lineStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
{
|
|
|
type: "value",
|
|
|
name: "合格率",
|
|
|
nameTextStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
position: "right",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
formatter: "{value} %", //右侧Y轴文字显示
|
|
|
textStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "合格率",
|
|
|
type: "line",
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
formatter: '{c}%',
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
|
|
|
smooth: true, //平滑曲线显示
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: "circle", //标记的图形为实心圆
|
|
|
symbolSize: 5, //标记的大小
|
|
|
itemStyle: {
|
|
|
//折线拐点标志的样式
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
data: [94.2, 93.8, 94.8, 93.5],
|
|
|
},
|
|
|
{
|
|
|
name: "质检次数",
|
|
|
type: "bar",
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: ['0%', '50%'],
|
|
|
textStyle: {
|
|
|
color: "#ffffff",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
barWidth: 15,
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
|
|
{
|
|
|
offset: 0,
|
|
|
color: "#96c4fc",
|
|
|
},
|
|
|
{
|
|
|
offset: 1,
|
|
|
color: "#32547d",
|
|
|
},
|
|
|
]),
|
|
|
},
|
|
|
},
|
|
|
data: [4.2, 3.8, 4.8, 3.5],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart6.setData({
|
|
|
grid: {
|
|
|
top: "15%",
|
|
|
bottom: "10%", //也可设置left和right设置距离来控制图表的大小
|
|
|
},
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
type: "shadow",
|
|
|
label: {
|
|
|
show: true,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
legend: {
|
|
|
data: ["当年市场不良率", "目标市场不良率"],
|
|
|
top: "3%",
|
|
|
textStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
},
|
|
|
xAxis: {
|
|
|
data: [
|
|
|
"01",
|
|
|
"02",
|
|
|
"03",
|
|
|
"04",
|
|
|
],
|
|
|
axisLine: {
|
|
|
show: true, //隐藏X轴轴线
|
|
|
lineStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: true, //隐藏X轴刻度
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
color: "#ffffff66", //X轴文字颜色
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
yAxis: [
|
|
|
{
|
|
|
type: "value",
|
|
|
name: "当年市场不良率",
|
|
|
nameTextStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
position: "left",
|
|
|
splitLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisTick: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLine: {
|
|
|
show: false,
|
|
|
},
|
|
|
axisLabel: {
|
|
|
show: true,
|
|
|
formatter: '{value}%',
|
|
|
textStyle: {
|
|
|
color: "#ffffff66",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
series: [
|
|
|
{
|
|
|
name: "当年市场不良率",
|
|
|
type: "line",
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "top",
|
|
|
formatter: '{c}%',
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: "circle", //标记的图形为实心圆
|
|
|
symbolSize: 5, //标记的大小
|
|
|
itemStyle: {
|
|
|
//折线拐点标志的样式
|
|
|
color: "#45e9a7",
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: "#45e9a7",
|
|
|
},
|
|
|
data: [4.6, 3.4, 4.7, 3.3],
|
|
|
},
|
|
|
{
|
|
|
name: "目标市场不良率",
|
|
|
type: "line",
|
|
|
label: {
|
|
|
normal: {
|
|
|
show: true,
|
|
|
position: "bottom",
|
|
|
formatter: '{c}%',
|
|
|
textStyle: {
|
|
|
color: "#a8aab0",
|
|
|
fontStyle: "normal",
|
|
|
fontFamily: "微软雅黑",
|
|
|
fontSize: 0.75 * vw,
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
showAllSymbol: true, //显示所有图形。
|
|
|
symbol: "circle", //标记的图形为实心圆
|
|
|
symbolSize: 5, //标记的大小
|
|
|
itemStyle: {
|
|
|
//折线拐点标志的样式
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
lineStyle: {
|
|
|
color: "#ffffff",
|
|
|
},
|
|
|
data: [4.7, 3.2, 4.7, 3.4],
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart11.setData({
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "",
|
|
|
type: "pie",
|
|
|
center: ["50%", "50%"],
|
|
|
radius: ["85%", "100%"],
|
|
|
data: [
|
|
|
{value: 91.21, name: "合格率"},
|
|
|
],
|
|
|
label: {
|
|
|
normal: {
|
|
|
rich: {
|
|
|
a: {
|
|
|
color: "#fff",
|
|
|
align: "center",
|
|
|
fontSize: 1.5 * vw,
|
|
|
fontWeight: "bold",
|
|
|
},
|
|
|
b: {
|
|
|
color: "#fff",
|
|
|
align: "center",
|
|
|
fontSize: 0.8 * vw,
|
|
|
},
|
|
|
},
|
|
|
formatter: function (params) {
|
|
|
return (
|
|
|
"{a|" +
|
|
|
params.value +
|
|
|
"%}" +
|
|
|
"\n{b|" +
|
|
|
params.name +
|
|
|
"}"
|
|
|
);
|
|
|
},
|
|
|
position: "center",
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
fontSize: "14",
|
|
|
fontWeight: "normal",
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#fa2f5a",
|
|
|
label: {
|
|
|
show: false,
|
|
|
formatter: "{b} : {c} ({d}%)",
|
|
|
color: "#fff"
|
|
|
},
|
|
|
},
|
|
|
labelLine: {show: true},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart12.setData({
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "",
|
|
|
type: "pie",
|
|
|
center: ["50%", "50%"],
|
|
|
radius: ["85%", "100%"],
|
|
|
data: [
|
|
|
{value: 99.65, name: "质量控制达标率"},
|
|
|
],
|
|
|
label: {
|
|
|
normal: {
|
|
|
rich: {
|
|
|
a: {
|
|
|
color: "#fff",
|
|
|
align: "center",
|
|
|
fontSize: 1.5 * vw,
|
|
|
fontWeight: "bold",
|
|
|
},
|
|
|
b: {
|
|
|
color: "#fff",
|
|
|
align: "center",
|
|
|
fontSize: 0.8 * vw,
|
|
|
},
|
|
|
},
|
|
|
formatter: function (params) {
|
|
|
return (
|
|
|
"{a|" +
|
|
|
params.value +
|
|
|
"%}" +
|
|
|
"\n{b|" +
|
|
|
params.name +
|
|
|
"}"
|
|
|
);
|
|
|
},
|
|
|
position: "center",
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
fontSize: "14",
|
|
|
fontWeight: "normal",
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#62aafe",
|
|
|
label: {
|
|
|
show: false,
|
|
|
formatter: "{b} : {c} ({d}%)",
|
|
|
color: "#fff"
|
|
|
},
|
|
|
},
|
|
|
labelLine: {show: true},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart13.setData({
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "",
|
|
|
type: "pie",
|
|
|
center: ["50%", "50%"],
|
|
|
radius: ["85%", "100%"],
|
|
|
data: [
|
|
|
{value: 1.85, name: "当年市场不良率"},
|
|
|
],
|
|
|
label: {
|
|
|
normal: {
|
|
|
rich: {
|
|
|
a: {
|
|
|
color: "#fff",
|
|
|
align: "center",
|
|
|
fontSize: 1.5 * vw,
|
|
|
fontWeight: "bold",
|
|
|
},
|
|
|
b: {
|
|
|
color: "#fff",
|
|
|
align: "center",
|
|
|
fontSize: 0.8 * vw,
|
|
|
},
|
|
|
},
|
|
|
formatter: function (params) {
|
|
|
return (
|
|
|
"{a|" +
|
|
|
params.value +
|
|
|
"%}" +
|
|
|
"\n{b|" +
|
|
|
params.name +
|
|
|
"}"
|
|
|
);
|
|
|
},
|
|
|
position: "center",
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
fontSize: "14",
|
|
|
fontWeight: "normal",
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#2ffae0",
|
|
|
label: {
|
|
|
show: false,
|
|
|
formatter: "{b} : {c} ({d}%)",
|
|
|
color: "#fff"
|
|
|
},
|
|
|
},
|
|
|
labelLine: {show: true},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
this.$refs.chart14.setData({
|
|
|
tooltip: {
|
|
|
trigger: "item",
|
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)",
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: "",
|
|
|
type: "pie",
|
|
|
center: ["50%", "50%"],
|
|
|
radius: ["85%", "100%"],
|
|
|
data: [
|
|
|
{value: 45.90, name: "OQC抽检分数"},
|
|
|
],
|
|
|
label: {
|
|
|
normal: {
|
|
|
rich: {
|
|
|
a: {
|
|
|
color: "#fff",
|
|
|
align: "center",
|
|
|
fontSize: 1.5 * vw,
|
|
|
fontWeight: "bold",
|
|
|
},
|
|
|
b: {
|
|
|
color: "#fff",
|
|
|
align: "center",
|
|
|
fontSize: 0.8 * vw,
|
|
|
},
|
|
|
},
|
|
|
formatter: function (params) {
|
|
|
return (
|
|
|
"{a|" +
|
|
|
params.value +
|
|
|
"}" +
|
|
|
"\n{b|" +
|
|
|
params.name +
|
|
|
"}"
|
|
|
);
|
|
|
},
|
|
|
position: "center",
|
|
|
show: true,
|
|
|
textStyle: {
|
|
|
fontSize: "14",
|
|
|
fontWeight: "normal",
|
|
|
color: "#fff",
|
|
|
},
|
|
|
},
|
|
|
},
|
|
|
itemStyle: {
|
|
|
normal: {
|
|
|
color: "#fae92f",
|
|
|
},
|
|
|
labelLine: {show: true},
|
|
|
},
|
|
|
},
|
|
|
],
|
|
|
})
|
|
|
},
|
|
|
methods: {
|
|
|
exitFun() {
|
|
|
this.exit()
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.app-container {
|
|
|
background-image: url("~@/assets/model/quality/bg.jpg");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-color: #021e31;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
}
|
|
|
|
|
|
.exit {
|
|
|
background-image: url("~@/assets/model/factoryIntroduction/exit.png");
|
|
|
background-repeat: no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
position: absolute;
|
|
|
top: 1%;
|
|
|
right: 1%;
|
|
|
font-weight: bold;
|
|
|
width: 2vw;
|
|
|
height: 2vw;
|
|
|
color: #e7b219;
|
|
|
}
|
|
|
|
|
|
|
|
|
.headTitle {
|
|
|
position: absolute;
|
|
|
top: 5%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -100%);
|
|
|
font-size: 1.5vw;
|
|
|
color: #d6eaed;
|
|
|
letter-spacing: 10px;
|
|
|
}
|
|
|
|
|
|
.boxTitle {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
height: 2vw;
|
|
|
line-height: 2vw;
|
|
|
background: linear-gradient(to right, #152049, #184680);
|
|
|
color: #fff;
|
|
|
font-size: 1vw;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
.box1 {
|
|
|
position: absolute;
|
|
|
top: 10%;
|
|
|
left: 2%;
|
|
|
width: 34%;
|
|
|
height: 43%;
|
|
|
border: 1px solid #123061;
|
|
|
|
|
|
.chart1 {
|
|
|
position: absolute;
|
|
|
top: 2vw;
|
|
|
width: 100%;
|
|
|
height: calc(100% - 2vw);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.box2 {
|
|
|
position: absolute;
|
|
|
top: 55%;
|
|
|
left: 2%;
|
|
|
width: 34%;
|
|
|
height: 41%;
|
|
|
border: 1px solid #123061;
|
|
|
|
|
|
.chart2 {
|
|
|
position: absolute;
|
|
|
top: 2vw;
|
|
|
width: 100%;
|
|
|
height: calc(100% - 2vw);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.box3 {
|
|
|
position: absolute;
|
|
|
top: 40%;
|
|
|
left: 50%;
|
|
|
width: 25%;
|
|
|
height: 25%;
|
|
|
border: 1px solid #123061;
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
.chart3 {
|
|
|
position: absolute;
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.box4 {
|
|
|
position: absolute;
|
|
|
top: 70%;
|
|
|
left: 50%;
|
|
|
width: 25%;
|
|
|
height: 25%;
|
|
|
border: 1px solid #123061;
|
|
|
transform: translateX(-50%);
|
|
|
|
|
|
.chart4 {
|
|
|
position: absolute;
|
|
|
top: 2vw;
|
|
|
width: 100%;
|
|
|
height: calc(100% - 2vw);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.box5 {
|
|
|
position: absolute;
|
|
|
top: 10%;
|
|
|
right: 2%;
|
|
|
width: 34%;
|
|
|
height: 43%;
|
|
|
border: 1px solid #123061;
|
|
|
|
|
|
.chart5 {
|
|
|
position: absolute;
|
|
|
top: 2vw;
|
|
|
width: 100%;
|
|
|
height: calc(100% - 2vw);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.box6 {
|
|
|
position: absolute;
|
|
|
top: 55%;
|
|
|
right: 2%;
|
|
|
width: 34%;
|
|
|
height: 41%;
|
|
|
border: 1px solid #123061;
|
|
|
|
|
|
.chart6 {
|
|
|
position: absolute;
|
|
|
top: 2vw;
|
|
|
width: 100%;
|
|
|
height: calc(100% - 2vw);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.chart11 {
|
|
|
position: absolute;
|
|
|
top: 17%;
|
|
|
left: 41%;
|
|
|
width: 9%;
|
|
|
height: 15%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
|
|
|
.chart12 {
|
|
|
position: absolute;
|
|
|
top: 32%;
|
|
|
left: 46%;
|
|
|
width: 9%;
|
|
|
height: 15%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
|
|
|
.chart13 {
|
|
|
position: absolute;
|
|
|
top: 32%;
|
|
|
left: 54%;
|
|
|
width: 9%;
|
|
|
height: 15%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
|
|
|
.chart14 {
|
|
|
position: absolute;
|
|
|
top: 17%;
|
|
|
left: 59%;
|
|
|
width: 9%;
|
|
|
height: 15%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
.centerTitle{
|
|
|
position: absolute;
|
|
|
top: 15%;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
color: #fff;
|
|
|
font-size: 1.4vw;
|
|
|
}
|
|
|
</style>
|