120 lines
2.3 KiB
Vue
120 lines
2.3 KiB
Vue
|
<!--
|
||
|
|
filename: DoubleRingChart.vue
|
||
|
|
author: liubin
|
||
|
|
date: 2024-04-17 11:01:55
|
||
|
|
description:
|
||
|
|
-->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="double-ring-chart">
|
||
|
|
<div ref="chart" class="double-ring-chart__container"></div>
|
||
|
|
<!-- :style="{ height: vHeight + 'vh' }" -->
|
||
|
|
<div class="double-ring-chart__legend">
|
||
|
|
<div v-for="item in legendItems" :key="item.label" class="legend-item">
|
||
|
|
<span class="legend-item__label">{{ item.label }}</span>
|
||
|
|
<span class="legend-item__value">{{
|
||
|
|
item.value.toLocaleString()
|
||
|
|
}}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import chartMixin from "@/mixins/chart.js";
|
||
|
|
import fullscreenMixin from "@/mixins/fullscreen.js";
|
||
|
|
import options from "./double-ring-chart-options";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: "DoubleRingChart",
|
||
|
|
mixins: [chartMixin, fullscreenMixin],
|
||
|
|
props: {
|
||
|
|
vHeight: {
|
||
|
|
type: Number,
|
||
|
|
default: 24,
|
||
|
|
},
|
||
|
|
legendItems: {
|
||
|
|
type: Array,
|
||
|
|
default: () => [
|
||
|
|
{ label: "2023年累计", value: 88002 },
|
||
|
|
{ label: "2024年累计", value: 88002 },
|
||
|
|
{ label: "2025年累计", value: 88002 },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
computed: {},
|
||
|
|
mounted() {
|
||
|
|
this.initOptions(options);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
// fullscreen mixin 需要的回调
|
||
|
|
fullscreenCallback(isFullscreen) {
|
||
|
|
console.log("isFullscreen--->", isFullscreen);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.double-ring-chart {
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
}
|
||
|
|
|
||
|
|
.double-ring-chart__container {
|
||
|
|
flex: 1;
|
||
|
|
height: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.double-ring-chart__legend {
|
||
|
|
padding: 12px;
|
||
|
|
color: #fff;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
gap: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-item {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-item__label {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-item__label::before {
|
||
|
|
content: "";
|
||
|
|
position: absolute;
|
||
|
|
width: 12px;
|
||
|
|
height: 12px;
|
||
|
|
background: #ccc;
|
||
|
|
border-radius: 2px;
|
||
|
|
top: 6px;
|
||
|
|
left: -18px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-item:nth-child(1) .legend-item__label::before {
|
||
|
|
background: #0f65ff;
|
||
|
|
}
|
||
|
|
.legend-item:nth-child(1) .legend-item__value {
|
||
|
|
color: #0f65ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-item:nth-child(2) .legend-item__label::before {
|
||
|
|
background: #12fff5;
|
||
|
|
}
|
||
|
|
.legend-item:nth-child(2) .legend-item__value {
|
||
|
|
color: #12fff5;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-item:nth-child(3) .legend-item__label::before {
|
||
|
|
background: #003982;
|
||
|
|
}
|
||
|
|
</style>
|