<template>
|
<el-card style="border-radius: 0" :body-style="{ padding: '1rem 2rem' }" v-loading="loading">
|
<template #header>
|
<div style="font-weight: bold; font-size: 1.2rem">物料类型统计</div>
|
</template>
|
<div ref="goodsTypeChartDom" style="height: 25rem; width: 100%"></div>
|
</el-card>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, onUnmounted, nextTick } from "vue";
|
// 引入echarts
|
import * as echarts from "echarts";
|
import { GetGoodsTypeDistApi } from '@/api/dashboard';
|
import { ElLoading } from 'element-plus'
|
const loading=ref(true)
|
|
const xData = ref([]);
|
const yData = ref([]);
|
|
|
// 创建一个响应式引用来保存DOM元素
|
const goodsTypeChartDom = ref(null);
|
let chartInstance = null;
|
|
// 初始化ECharts实例并设置配置项（这里以折线图为例，但可灵活替换）
|
onMounted(async () => {
|
await GetGoodsTypeDistApi().then(res => {
|
xData.value = res.data.map(i => i.name)
|
yData.value = res.data
|
})
|
|
|
await nextTick(); // 确保DOM已经渲染完成
|
chartInstance = echarts.init(goodsTypeChartDom.value);
|
const option = {
|
tooltip: {
|
trigger: 'item',
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
},
|
color: ["#EAEA26", "#906BF9", "#FE5656", "#01E17E"],
|
series: [
|
{
|
name: '物料占比',
|
type: 'pie',
|
radius: '50%',
|
center: ['50%', '50%'],
|
data: yData.value,
|
itemStyle: {
|
emphasis: {
|
shadowBlur: 10,
|
shadowOffsetX: 0,
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
}
|
},
|
itemStyle: {
|
normal: {
|
label: {
|
show: true,
|
// position:'inside',
|
formatter: '{b} : {c} ({d}%)'
|
}
|
},
|
labelLine: { show: true }
|
}
|
}
|
]
|
};
|
chartInstance.setOption(option);
|
nextTick(() => {
|
loading.value = false
|
});
|
});
|
|
// 销毁ECharts实例
|
onUnmounted(() => {
|
if (chartInstance != null && chartInstance.dispose) {
|
chartInstance.dispose();
|
}
|
});
|
|
//窗口大小变化重绘echart
|
window.onresize = function () {
|
if (chartInstance != null && chartInstance.resize) {
|
chartInstance.resize();
|
}
|
};
|
</script>
|
|
<style></style>
|
