开源datav组件中环形图的使用案例-数据可视化大屏
效果图->datav
组件使用demo
<template>
<div class="center-cmp">
<dv-active-ring-chart class="ccmc-middle" :config="config"/>
</div>
</template>
<script>
export default {
props: ["equData"],
watch: {
equData: {
handler(newName, oldName) {
// console.log(newName)
this.data(newName);
},
deep: true,
immediate: true
}
},
components: {},
data() {
return {
config: {
data: [
{
name: "消防设备",
value: 3
},
{
name: "公共区域设备",
value: 3
},
{
name: "防洪防漏设备",
value: 3
},
],
color: [
"#FF5D1D",
"#FFA91F",
"#FFF803",
"#9DF90D",
"#11EA00",
"#00FFF8",
"#038CEA",
"#2948FF",
"#B283FC",
"#A000EA",
"#F746EA",
"#AF1E59"
],
lineWidth: 30,
radius: "55%",
activeRadius: "60%"
}
};
},
methods: {
data(data) {
this.config = {
data,
color: [
// "#FF0D1F",
"#FF5D1D",
"#FFA91F",
"#FFF803",
"#9DF90D",
"#11EA00",
"#00FFF8",
"#038CEA",
"#2948FF",
"#B283FC",
"#A000EA",
"#F746EA",
"#AF1E59"
],
// 圆环内数据大小
// digitalFlopStyle: {
// fontSize: 16
// },
// 是否展示原始数据/百分比数值
showOriginValue: true,
lineWidth: 30,
radius: "55%",
activeRadius: "60%"
};
}
},
};
</script>
<style lang="less">
.dv-active-ring-chart .active-ring-info .dv-digital-flop {
// margin-top: -50px !important;
// font-size: 14px !important;
}
.ccmc-middle {
width: 4.4rem;
height: 4.4rem;
// margin-top: -42px;
.active-ring-name {
// 调整圆环字体大小
font-size: 15px !important;
}
}
</style>
本文来自博客园,作者:JackieDYH,转载请注明原文链接:https://www.cnblogs.com/JackieDYH/p/17634456.html