233 lines
7.4 KiB
Vue
233 lines
7.4 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="barChart" 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
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
},
|
|
methods: {
|
|
drawBar(arr) {
|
|
// console.log("均值图",arr)
|
|
let myChart = this.$echarts.getInstanceByDom(this.$refs.barChart);
|
|
if (myChart == null) {
|
|
myChart = this.$echarts.init(this.$refs.barChart);
|
|
}
|
|
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: [arr.avg],
|
|
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: [arr.med],
|
|
zlevel: 9
|
|
},
|
|
|
|
{
|
|
name: '最大值',
|
|
type: 'bar',
|
|
stack: 'val',
|
|
barWidth: 150,
|
|
barGap: '-100%',
|
|
data: [arr.max],
|
|
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: [arr.min],
|
|
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
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
window.addEventListener('resize', function() {
|
|
myChart.resize();
|
|
});
|
|
// this.$nextTick(() => {
|
|
// myChart.setOption(option)
|
|
// myChart.resize();
|
|
// })
|
|
}
|
|
},
|
|
mounted() {
|
|
// this.drawBar(this.typeValue);
|
|
},
|
|
watch: {
|
|
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.tableTitle {
|
|
background: #f7f8fa;
|
|
margin-bottom: 5px;
|
|
padding: 8px;
|
|
}
|
|
</style>
|