雷达分页
This commit is contained in:
熊丽君
@ -1,256 +1,285 @@
|
||||
<template>
|
||||
<div>
|
||||
<center2 title="关键参数SPC分析">
|
||||
<el-select v-model="value" slot="datePicker" size="mini" placeholder="请选择" @change="handleValue">
|
||||
<el-option v-for="item in selectData" :key="item" :label="item" :value="item"> </el-option>
|
||||
</el-select>
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</center2>
|
||||
</div>
|
||||
<div>
|
||||
<center2 title="关键参数SPC分析">
|
||||
<el-select
|
||||
v-model="value"
|
||||
slot="datePicker"
|
||||
size="mini"
|
||||
placeholder="请选择"
|
||||
@change="handleValue"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in selectData"
|
||||
:key="item"
|
||||
:label="item"
|
||||
:value="item"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</center2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import center2 from './components/center2/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import colorList from '@/utils/colorPalette'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
import center2 from "./components/center2/index.vue";
|
||||
import rocketTit from "../components/rocketTit/index.vue";
|
||||
import bigScreenTabs from "../components/bigScreenTabs/index.vue";
|
||||
import colorList from "@/utils/colorPalette";
|
||||
import echarts from "echarts";
|
||||
require("echarts/theme/macarons"); // echarts theme
|
||||
import resize from "../../dashboard/mixins/resize";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
center2,
|
||||
rocketTit,
|
||||
bigScreenTabs,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
selectData: [],
|
||||
chart: null,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getSelectData()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
handleValue(e) {
|
||||
this.initChart()
|
||||
},
|
||||
getSelectData() {
|
||||
this.request({
|
||||
url: '/hx/qualityAssurance/getHxAllSpcCategory',
|
||||
method: 'get',
|
||||
}).then(({ data }) => {
|
||||
if (!data.length) return console.log('暂无分类')
|
||||
this.selectData = data
|
||||
this.value = data[0]
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
initChart() {
|
||||
this.request({
|
||||
url: '/hx/qualityAssurance/getHxSpcPic',
|
||||
method: 'get',
|
||||
params: {
|
||||
category: this.value,
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions(data)
|
||||
})
|
||||
},
|
||||
setOptions(resData) {
|
||||
let productName = []
|
||||
let realValue = []
|
||||
for (let i = 0; i < resData.product.length; i++) {
|
||||
const item = resData.product[i]
|
||||
productName.push(item.productName)
|
||||
realValue.push(item.realValue)
|
||||
}
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: productName,
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '',
|
||||
min: 0,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
left: 0,
|
||||
right: 20,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(productName.length, 7),
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '实际',
|
||||
data: realValue,
|
||||
type: 'line',
|
||||
symbol: 'none',
|
||||
markLine: {
|
||||
symbol: 'none', //去掉警戒线最后面的箭头
|
||||
label: {
|
||||
position: 'end', //三个值“start”,"middle","end" 开始 中点 结束
|
||||
},
|
||||
silent: true,
|
||||
data: [
|
||||
{
|
||||
lineStyle: {
|
||||
type: 'dotted', // type: 'solid' //'dotted'虚线 'solid'实线
|
||||
color: colorList[0],
|
||||
},
|
||||
label: { show: true, position: 'middle', formatter: '上限' + resData.spc.upperLimit },
|
||||
yAxis: resData.spc.upperLimit,
|
||||
},
|
||||
{
|
||||
lineStyle: {
|
||||
type: 'dotted', // type: 'solid' //'dotted'虚线 'solid'实线
|
||||
color: colorList[1],
|
||||
},
|
||||
label: { show: true, position: 'middle', formatter: '中心线' + resData.spc.centerLine },
|
||||
yAxis: resData.spc.centerLine,
|
||||
},
|
||||
{
|
||||
lineStyle: {
|
||||
type: 'dotted', // type: 'solid' //'dotted'虚线 'solid'实线
|
||||
color: colorList[2],
|
||||
},
|
||||
label: { show: true, position: 'middle', formatter: '下限' + resData.spc.lowerLimit },
|
||||
yAxis: resData.spc.lowerLimit,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
mixins: [resize],
|
||||
name: "left1",
|
||||
components: {
|
||||
center2,
|
||||
rocketTit,
|
||||
bigScreenTabs,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: "",
|
||||
selectData: [],
|
||||
chart: null,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.getSelectData();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
handleValue(e) {
|
||||
this.initChart();
|
||||
},
|
||||
getSelectData() {
|
||||
this.request({
|
||||
url: "/hx/qualityAssurance/getHxAllSpcCategory",
|
||||
method: "get",
|
||||
}).then(({ data }) => {
|
||||
if (!data.length) return console.log("暂无分类");
|
||||
this.selectData = data;
|
||||
this.value = data[0];
|
||||
this.initChart();
|
||||
});
|
||||
},
|
||||
initChart() {
|
||||
this.request({
|
||||
url: "/hx/qualityAssurance/getHxSpcPic",
|
||||
method: "get",
|
||||
params: {
|
||||
category: this.value,
|
||||
},
|
||||
}).then(({ data }) => {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
this.setOptions(data);
|
||||
});
|
||||
},
|
||||
setOptions(resData) {
|
||||
let productName = [];
|
||||
let realValue = [];
|
||||
for (let i = 0; i < resData.product.length; i++) {
|
||||
const item = resData.product[i];
|
||||
productName.push(item.productName);
|
||||
realValue.push(item.realValue);
|
||||
}
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
color: ["#c23531", ...colorList],
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
data: ["实际", "上限", "中心线", "下限"],
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: productName,
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "",
|
||||
min: 0,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: "{value}",
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "rgb(255, 255, 255)",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
left: 0,
|
||||
right: 50,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {
|
||||
type: "slider",
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(productName.length, 7),
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "实际",
|
||||
data: realValue,
|
||||
type: "line",
|
||||
symbol: "none",
|
||||
},
|
||||
{
|
||||
name: "上限",
|
||||
type: "line",
|
||||
markLine: {
|
||||
symbol: "none",
|
||||
label: {
|
||||
color: "#fff",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: "上限",
|
||||
yAxis: resData.spc.upperLimit,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "中心线",
|
||||
type: "line",
|
||||
markLine: {
|
||||
symbol: "none",
|
||||
label: {
|
||||
color: "#fff",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: "中心线",
|
||||
yAxis: resData.spc.centerLine,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "下限",
|
||||
type: "line",
|
||||
markLine: {
|
||||
symbol: "none",
|
||||
label: {
|
||||
color: "#fff",
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: "下限",
|
||||
yAxis: resData.spc.lowerLimit,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tit {
|
||||
padding: 16px 24px;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.warp-scroll {
|
||||
height: 215px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: #2a437d;
|
||||
opacity: 0.6;
|
||||
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||
margin-bottom: 1px;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
height: 215px;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: #2a437d;
|
||||
opacity: 0.6;
|
||||
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||
margin-bottom: 1px;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.warp {
|
||||
height: 280px;
|
||||
width: 440px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
padding-left: 20px;
|
||||
margin: 5px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
height: 280px;
|
||||
width: 440px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
li,
|
||||
a {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
}
|
||||
li {
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
padding-left: 20px;
|
||||
margin: 5px 0;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user