mirror of https://github.com/1Panel-dev/1Panel
Pr@dev@dan (#1721)
#### What this PR does / why we need it? #### Summary of your change #### Please indicate you've done the following: - [ ] Made sure tests are passing and test coverage is added if needed. - [ ] Made sure commit message follow the rule of [Conventional Commits specification](https://www.conventionalcommits.org/). - [ ] Considered the docs impact and opened a new docs issue or PR with docs changes if needed.pull/1730/head
wangdan-fit2cloud
1 year ago
committed by
GitHub
parent
03ed4c8071
commit
f556038425
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div :id="id" ref="PieChartRef" :style="{ height: height, width: width }" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, nextTick, watch, onBeforeUnmount } from 'vue';
|
||||
import * as echarts from 'echarts';
|
||||
import { GlobalStore } from '@/store';
|
||||
const globalStore = GlobalStore();
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: 'pieChartId',
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%',
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
},
|
||||
option: {
|
||||
type: Object,
|
||||
required: true,
|
||||
}, // option: { title , data }
|
||||
});
|
||||
|
||||
function initChart() {
|
||||
let myChart = echarts?.getInstanceByDom(document.getElementById(props.id) as HTMLElement);
|
||||
if (myChart === null || myChart === undefined) {
|
||||
myChart = echarts.init(document.getElementById(props.id) as HTMLElement);
|
||||
}
|
||||
const theme = globalStore.$state.themeConfig.theme || 'light';
|
||||
let percentText = String(props.option.data).split('.');
|
||||
const option = {
|
||||
title: [
|
||||
{
|
||||
text: `{a|${percentText[0]}.}{b|${percentText[1] || 0} %}`,
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: '22',
|
||||
},
|
||||
b: {
|
||||
fontSize: '14',
|
||||
padding: [5, 0, 0, 0],
|
||||
},
|
||||
},
|
||||
|
||||
color: theme === 'dark' ? '#ffffff' : '#0f0f0f',
|
||||
lineHeight: 25,
|
||||
// fontSize: 20,
|
||||
fontWeight: 500,
|
||||
},
|
||||
left: '49%',
|
||||
top: '32%',
|
||||
subtext: props.option.title,
|
||||
subtextStyle: {
|
||||
color: theme === 'dark' ? '#BBBFC4' : '#646A73',
|
||||
fontSize: 13,
|
||||
},
|
||||
textAlign: 'center',
|
||||
},
|
||||
],
|
||||
polar: {
|
||||
radius: ['71%', '80%'],
|
||||
center: ['50%', '50%'],
|
||||
},
|
||||
angleAxis: {
|
||||
max: 100,
|
||||
show: false,
|
||||
},
|
||||
radiusAxis: {
|
||||
type: 'category',
|
||||
show: true,
|
||||
axisLabel: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
roundCap: true,
|
||||
barWidth: 30,
|
||||
showBackground: true,
|
||||
coordinateSystem: 'polar',
|
||||
backgroundStyle: {
|
||||
color: theme === 'dark' ? 'rgba(255, 255, 255, 0.05)' : 'rgba(0, 94, 235, 0.05)',
|
||||
},
|
||||
color: [
|
||||
new echarts.graphic.LinearGradient(0, 1, 0, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(81, 192, 255, .1)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#4261F6',
|
||||
},
|
||||
]),
|
||||
],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
data: [props.option.data],
|
||||
},
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['0%', '60%'],
|
||||
center: ['50%', '50%'],
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
color: theme === 'dark' ? '#16191D' : '#fff',
|
||||
data: [
|
||||
{
|
||||
value: 0,
|
||||
itemStyle: {
|
||||
shadowColor: theme === 'dark' ? '#16191D' : 'rgba(0, 94, 235, 0.1)',
|
||||
shadowBlur: 5,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
// 渲染数据
|
||||
myChart.setOption(option, true);
|
||||
}
|
||||
|
||||
function changeChartSize() {
|
||||
echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement)?.resize();
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.option,
|
||||
(val) => {
|
||||
if (val) {
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
window.addEventListener('resize', changeChartSize);
|
||||
});
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
echarts.getInstanceByDom(document.getElementById(props.id) as HTMLElement).dispose();
|
||||
window.removeEventListener('resize', changeChartSize);
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
Loading…
Reference in new issue