720648274e
-重构了饼图组件的逻辑，增加了维度数据处理和表格数据生成功能 - 优化了饼图数据格式化和更新机制，提高了图表的动态响应能力 - 新增了表格数据处理相关函数，提升了表格展示的灵活性和准确性- 调整了图表和表格的样式，增强了可视化效果
79 lines
1.9 KiB
Vue
79 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref, useTemplateRef, watch } from 'vue';
|
|
import { useSetPieChart } from '@/hooks/chart/usePieChart';
|
|
import {
|
|
formatData,
|
|
getTableData,
|
|
setDimensionData
|
|
} from '@/views/Survey/views/Analysis/components/AnalysisInfo/hooks/pieSeries';
|
|
|
|
// series 信息
|
|
const tableData = ref([]);
|
|
const analysis = defineModel('analysis');
|
|
const series = ref([]);
|
|
const dimension = defineModel('dimension');
|
|
|
|
const index = ref(0);
|
|
// 饼图 dom 结构
|
|
// 当 keyword 变动的时候，标记脏数据
|
|
watch(
|
|
() => analysis.value,
|
|
async () => {
|
|
tableData.value = {
|
|
...analysis.value,
|
|
option: getTableData(analysis.value)
|
|
};
|
|
|
|
series.value = formatData(dimension.value ? tableData.value : analysis.value, index.value);
|
|
const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
|
|
useSetPieChart(pieChart, series, { title: false, legend: false });
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
|
|
const changeChart = (i: Number) => {
|
|
index.value = i;
|
|
series.value = formatData(tableData.value, index.value);
|
|
// const pieChart = useTemplateRef<HTMLSpanElement>('pieChart');
|
|
// useSetPieChart(pieChart, series, { title: false, legend: false });
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<section>
|
|
<div v-if="dimension">
|
|
<van-radio-group v-model="index" @change="changeChart">
|
|
<van-radio v-for="(item, index) in tableData.option" :name="index">{{
|
|
item.option
|
|
}}</van-radio>
|
|
</van-radio-group>
|
|
</div>
|
|
|
|
<!-- 图表部分 -->
|
|
<div
|
|
class="charts"
|
|
style="
|
|
display: flex;
|
|
height: 300px;
|
|
|
|
justify-content: center;
|
|
margin: 16px 0;
|
|
"
|
|
>
|
|
<span ref="pieChart" style="width: 100%; height: 300px"></span>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.task-card {
|
|
//margin: 16px;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
.charts {
|
|
width: calc(100vw - 50px);
|
|
}
|
|
</style>
|