You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.4 KiB
62 lines
1.4 KiB
4 years ago
|
<template>
|
||
|
|
<div id="device-overview-container" style="height: 228px"></div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import { onMounted } from 'vue';
|
||
|
|
import { Pie } from '@antv/g2plot';
|
||
|
|
|
||
|
|
const data = [
|
||
|
|
{ type: '在线', value: 27 },
|
||
|
|
{ type: '故障', value: 25 },
|
||
|
|
{ type: '离线', value: 18 },
|
||
|
|
{ type: '报警', value: 15 },
|
||
|
|
];
|
||
|
|
let piePlot = null;
|
||
|
|
|
||
|
|
function render() {
|
||
|
|
piePlot = new Pie('device-overview-container', {
|
||
|
|
legend: false,
|
||
|
|
appendPadding: 10,
|
||
|
|
data,
|
||
|
|
angleField: 'value',
|
||
|
|
colorField: 'type',
|
||
|
|
radius: 1,
|
||
|
|
innerRadius: 0.64,
|
||
|
|
label: {
|
||
|
|
type: 'inner',
|
||
|
|
offset: '-50%',
|
||
|
|
autoRotate: false,
|
||
|
|
style: { textAlign: 'center' },
|
||
|
|
},
|
||
|
|
statistic: {
|
||
|
|
title: { offsetY: -12, content: '设备总数' },
|
||
|
|
content: { offsetY: 0 },
|
||
|
|
},
|
||
|
|
// 添加 中心统计文本 交互
|
||
|
|
interactions: [
|
||
|
|
{ type: 'element-selected' },
|
||
|
|
{ type: 'element-active' },
|
||
|
|
{
|
||
|
|
type: 'pie-statistic-active',
|
||
|
|
cfg: {
|
||
|
|
start: [
|
||
|
|
{ trigger: 'element:mouseenter', action: 'pie-statistic:change' },
|
||
|
|
{ trigger: 'legend-item:mouseenter', action: 'pie-statistic:change' },
|
||
|
|
],
|
||
|
|
end: [
|
||
|
|
{ trigger: 'element:mouseleave', action: 'pie-statistic:reset' },
|
||
|
|
{ trigger: 'legend-item:mouseleave', action: 'pie-statistic:reset' },
|
||
|
|
],
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
});
|
||
|
|
piePlot.render();
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
render();
|
||
|
|
});
|
||
|
|
</script>
|