375 lines
13 KiB
Vue
375 lines
13 KiB
Vue
<template>
|
|
<!-- 均值图 -->
|
|
<!-- <div style="width: 100%;margin-top: 5px;"> -->
|
|
<!-- <div class="tableTitle">
|
|
<div>
|
|
<span
|
|
style="width: 10px;height:10px;border-radius: 50%;background-color: #3297ff;display: inline-block;vertical-align: middle;margin-right: 8px;"
|
|
></span>
|
|
<span style="font-size:18px;">{{ componentName + '-' + chartName + '-' + '均值图'+'-'+status }}</span>
|
|
</div>
|
|
</div> -->
|
|
<div :id="echartsRef" ref="barChart" style="width: 705px; height: 300px"></div>
|
|
<!-- </div> -->
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'barChart', //均值图图组件
|
|
props: {
|
|
list: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
typeValue: {
|
|
type: Object
|
|
},
|
|
// 组件名称
|
|
componentName: {
|
|
type: String
|
|
},
|
|
chartName: {
|
|
type: String
|
|
},
|
|
status: {
|
|
type: String
|
|
},
|
|
intersectionName: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
chatShowType: {
|
|
type: String
|
|
},
|
|
echartsRef: {
|
|
type: String
|
|
},
|
|
dataList: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
max: [],
|
|
min: [],
|
|
med: [],
|
|
avg: []
|
|
};
|
|
},
|
|
methods: {
|
|
initEcharts() {
|
|
this.max = [];
|
|
this.min = [];
|
|
this.med = [];
|
|
this.avg = [];
|
|
// console.log("均值图",arr)
|
|
// let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
|
// if (myChart == null) {
|
|
// myChart = this.$echarts.init(this.$refs.barChart);
|
|
// }
|
|
// this.dataProcessing(this.dataList);
|
|
if (this.dataList.length > 10) {
|
|
this.dataList = this.dataList.slice(-10);
|
|
}
|
|
for (let i = 0; i < this.dataList.length; i++) {
|
|
if (this.dataList[i].max) {
|
|
this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
|
} else {
|
|
this.max.push(0);
|
|
}
|
|
|
|
if (this.dataList[i].min) {
|
|
this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
|
} else {
|
|
this.min.push(0);
|
|
}
|
|
|
|
if (this.dataList[i].med) {
|
|
this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
|
} else {
|
|
this.med.push(0);
|
|
}
|
|
|
|
if (this.dataList[i].avg) {
|
|
this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
|
} else {
|
|
this.avg.push(0);
|
|
}
|
|
|
|
// this.max.push(Math.abs(this.dataList[i].max.toFixed(2)));
|
|
// this.min.push(Math.abs(this.dataList[i].min.toFixed(2)));
|
|
// this.med.push(Math.abs(this.dataList[i].med.toFixed(2)));
|
|
// this.avg.push(Math.abs(this.dataList[i].avg.toFixed(2)));
|
|
}
|
|
let maxData = '';
|
|
let minData = '';
|
|
let medData = '';
|
|
let avgData = '';
|
|
for (let i = 0; i < this.max.length; i++) {
|
|
maxData = this.max[i];
|
|
}
|
|
for (let i = 0; i < this.min.length; i++) {
|
|
minData = this.min[i];
|
|
}
|
|
for (let i = 0; i < this.med.length; i++) {
|
|
medData = this.med[i];
|
|
}
|
|
for (let i = 0; i < this.avg.length; i++) {
|
|
avgData = this.avg[i];
|
|
}
|
|
let myChart = this.chart;
|
|
let chartData = [{ stage: '', number: 40 }];
|
|
let option = {
|
|
tooltip: {},
|
|
color: ['#0EECE4'],
|
|
grid: {
|
|
left: '0%',
|
|
right: '0%',
|
|
bottom: '10%',
|
|
top: '15%',
|
|
z: 22
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
gridIndex: 0,
|
|
data: chartData.map((item) => item.stage),
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
}
|
|
}
|
|
],
|
|
yAxis: {
|
|
type: 'value',
|
|
|
|
splitArea: { show: false },
|
|
gridIndex: 0,
|
|
min: 0,
|
|
splitNumber: 12,
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: false
|
|
},
|
|
max: 200
|
|
},
|
|
series: [
|
|
{
|
|
name: '外框',
|
|
type: 'bar',
|
|
barGap: '-120%', // 设置外框粗细
|
|
data: [300],
|
|
barWidth: 150,
|
|
itemStyle: {
|
|
normal: {
|
|
color: 'rgba(0,0,0,.1)', // 填充色
|
|
barBorderWidth: 1, // 边框宽度
|
|
label: {
|
|
// 标签显示位置
|
|
show: false
|
|
}
|
|
}
|
|
},
|
|
z: 1
|
|
},
|
|
{
|
|
name: '平均值',
|
|
type: 'bar',
|
|
stack: 'val',
|
|
barWidth: 150,
|
|
xAxisIndex: 0,
|
|
yAxisIndex: 0,
|
|
label: {
|
|
show: true,
|
|
position: 'right',
|
|
// offset: [10, 20],
|
|
distance: 15,
|
|
color: '#000',
|
|
fontSize: 17,
|
|
formatter: '{c}' + '[avg]'
|
|
},
|
|
itemStyle: {
|
|
color: '#89c6ff'
|
|
},
|
|
data: [avgData],
|
|
zlevel: 9
|
|
},
|
|
{
|
|
name: '中间值',
|
|
type: 'bar',
|
|
barWidth: 150,
|
|
stack: 'val',
|
|
label: {
|
|
show: true,
|
|
position: 'left',
|
|
distance: 15,
|
|
color: '#000',
|
|
fontSize: 17,
|
|
formatter: '{c}' + '[med]',
|
|
rich: {}
|
|
},
|
|
itemStyle: {
|
|
color: '#67b4fd'
|
|
},
|
|
data: [medData],
|
|
zlevel: 9
|
|
},
|
|
|
|
{
|
|
name: '最大值',
|
|
type: 'bar',
|
|
stack: 'val',
|
|
barWidth: 150,
|
|
barGap: '-100%',
|
|
data: [maxData],
|
|
label: {
|
|
show: true,
|
|
position: 'right',
|
|
distance: 10,
|
|
color: '#000',
|
|
fontSize: 17,
|
|
offset: [0, -30],
|
|
formatter: '{c}' + '[max]'
|
|
},
|
|
itemStyle: {
|
|
color: '#319cff'
|
|
},
|
|
zlevel: 9
|
|
},
|
|
{
|
|
name: '最小值',
|
|
type: 'bar',
|
|
stack: 'val',
|
|
barWidth: 150,
|
|
barGap: '-100%',
|
|
data: [minData],
|
|
label: {
|
|
offset: [10, 20],
|
|
show: true,
|
|
position: 'left',
|
|
distance: 10,
|
|
color: '#000',
|
|
offset: [0, -30],
|
|
fontSize: 17,
|
|
formatter: '{c}' + '[min]'
|
|
},
|
|
// tooltip: {
|
|
// backgroundColor: 'transparent',
|
|
// formatter: ' '
|
|
// },
|
|
itemStyle: {
|
|
color: '#328adc'
|
|
},
|
|
zlevel: 9
|
|
}
|
|
]
|
|
};
|
|
if (myChart) {
|
|
myChart.setOption(option);
|
|
window.addEventListener('resize', function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
// this.$nextTick(() => {
|
|
// myChart.setOption(option)
|
|
// myChart.resize();
|
|
// })
|
|
}
|
|
},
|
|
mounted() {
|
|
let that = this;
|
|
const $dom = document.getElementById(this.echartsRef);
|
|
$dom.style.width = '440px';
|
|
$dom.style.height = '260px';
|
|
setTimeout(() => {
|
|
that.$nextTick(() => {
|
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
|
if (this.chart == null) {
|
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
}
|
|
that.initEcharts();
|
|
});
|
|
}, 300);
|
|
},
|
|
watch: {
|
|
intersectionName: {
|
|
handler: function (oldValues, newValues) {
|
|
this.$nextTick(() => {
|
|
this.initEcharts();
|
|
});
|
|
}
|
|
},
|
|
chatShowType: {
|
|
handler: function (oldValues, newValues) {
|
|
let that = this;
|
|
setTimeout(() => {
|
|
that.$nextTick(() => {
|
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
|
if (this.chart == null) {
|
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
}
|
|
that.initEcharts();
|
|
});
|
|
}, 300);
|
|
}
|
|
},
|
|
echartsRef: {
|
|
handler: function (oldValues, newValues) {
|
|
console.log('old', oldValues);
|
|
console.log('newV', newValues);
|
|
let that = this;
|
|
setTimeout(() => {
|
|
that.$nextTick(() => {
|
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
|
if (this.chart == null) {
|
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
}
|
|
that.initEcharts();
|
|
});
|
|
}, 300);
|
|
}
|
|
},
|
|
dataList: {
|
|
handler: function (oldValues, newValues) {
|
|
this.$nextTick(() => {
|
|
this.chart = this.$echarts.getInstanceByDom(document.getElementById(this.echartsRef));
|
|
if (this.chart == null) {
|
|
this.chart = this.$echarts.init(document.getElementById(this.echartsRef));
|
|
}
|
|
this.initEcharts();
|
|
});
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.tableTitle {
|
|
background: #f7f8fa;
|
|
margin-bottom: 5px;
|
|
padding: 8px;
|
|
}
|
|
#meanValue {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|