150 lines
3.4 KiB
Vue
150 lines
3.4 KiB
Vue
<!-- 只适用于指标完成情况对标 -->
|
|
<template>
|
|
<div>
|
|
<!-- 图例 -->
|
|
<div
|
|
class="legend"
|
|
v-show="
|
|
this.chartMsg1.series[0].data.length > 0 ||
|
|
this.chartMsg2.series[0].data.length > 0
|
|
"
|
|
>
|
|
<span class="item" v-for="item in legendList" :key="item.id">
|
|
<span
|
|
v-if="item.type === 1"
|
|
class="block"
|
|
:style="{ backgroundColor: item.color }"
|
|
></span>
|
|
<span
|
|
v-if="item.type === 2"
|
|
class="line"
|
|
:style="{ backgroundColor: item.color }"
|
|
>
|
|
<span
|
|
class="line-block"
|
|
:style="{ backgroundColor: item.color }"
|
|
></span>
|
|
</span>
|
|
{{ item.name }}</span
|
|
>
|
|
</div>
|
|
<!-- 图 -->
|
|
<div>
|
|
<div style="display: inline-block; width: 79%; vertical-align: top">
|
|
<base-chart
|
|
v-show="this.chartMsg1.series[0].data.length > 0"
|
|
:chartHeight="chartHeight"
|
|
:chartWidth="chartWidth1"
|
|
:chartMsg="chartMsg1"
|
|
chartId="targetChartLeft"
|
|
:chartNum="chartNum"
|
|
/>
|
|
<!-- 暂无数据 -->
|
|
<div
|
|
:style="{ height: chartHeight + 'px' }"
|
|
v-show="this.chartMsg1.series[0].data.length === 0"
|
|
>
|
|
<div
|
|
class="no-data-bg"
|
|
style="position: relative; left: 50%; transform: translateX(-50%)"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div style="display: inline-block; width: 20%; vertical-align: top">
|
|
<base-chart
|
|
v-show="this.chartMsg2.series[0].data.length > 0"
|
|
:chartHeight="chartHeight"
|
|
:chartWidth="chartWidth2"
|
|
:chartMsg="chartMsg2"
|
|
chartId="targetChartRight"
|
|
:chartNum="chartNum"
|
|
/>
|
|
<!-- 暂无数据 -->
|
|
<div
|
|
:style="{ height: chartHeight + 'px' }"
|
|
v-show="this.chartMsg2.series[0].data.length === 0"
|
|
>
|
|
<div
|
|
class="no-data-bg"
|
|
style="
|
|
position: relative;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 80%;
|
|
"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import baseChart from "./baseChart.vue";
|
|
export default {
|
|
name: "bmBarComplete",
|
|
data() {
|
|
return {
|
|
chartWidth1: "60%",
|
|
chartWidth2: "20%",
|
|
};
|
|
},
|
|
props: {
|
|
chartHeight: {
|
|
type: Number,
|
|
default: 300,
|
|
},
|
|
legendList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
chartMsg1: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
chartMsg2: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
chartNum: {
|
|
type: Number,
|
|
default: 1,
|
|
},
|
|
},
|
|
components: { baseChart },
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.legend {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 15px;
|
|
.item {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
font-size: 14px;
|
|
color: #8c8c8c;
|
|
.block {
|
|
width: 10px;
|
|
height: 10px;
|
|
display: inline-block;
|
|
margin-right: 4px;
|
|
}
|
|
.line {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
display: inline-block;
|
|
margin-right: 4px;
|
|
position: relative;
|
|
.line-block {
|
|
position: absolute;
|
|
width: 20px;
|
|
height: 2px;
|
|
left: -5px;
|
|
top: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|