113 lines
2.3 KiB
Vue
113 lines
2.3 KiB
Vue
<!-- 只适用于指标完成情况对标 -->
|
|
<template>
|
|
<div>
|
|
<!-- 暂无数据 -->
|
|
<div
|
|
:style="{ height: chartHeight + 'px' }"
|
|
v-show="this.chartMsg.series[0].data.length === 0"
|
|
>
|
|
<div
|
|
class="no-data-bg"
|
|
style="position: relative; left: 50%; transform: translateX(-50%)"
|
|
></div>
|
|
</div>
|
|
<!-- 图例 -->
|
|
<div v-show="this.chartMsg.series[0].data.length > 0">
|
|
<div class="legend">
|
|
<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>
|
|
<!-- 图 -->
|
|
<base-chart
|
|
:chartHeight="chartHeight"
|
|
:legendList="legendList"
|
|
:chartMsg="chartMsg"
|
|
:chartId="chartId"
|
|
:chartNum="chartNum"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import baseChart from "./baseChart.vue";
|
|
export default {
|
|
name: "bmBarComplete",
|
|
data() {
|
|
return;
|
|
},
|
|
props: {
|
|
chartHeight: {
|
|
type: Number,
|
|
default: 300,
|
|
},
|
|
legendList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
chartMsg: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
chartId: {
|
|
type: String,
|
|
default: "bmChart",
|
|
},
|
|
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>
|