78 lines
1.8 KiB
JavaScript
78 lines
1.8 KiB
JavaScript
import { ref, watchEffect } from 'vue'
|
|
import { cleanRichText } from '@/common/xss'
|
|
import { questionChartsConfig } from '../config/analysisConfig'
|
|
|
|
// 饼图数据处理
|
|
const pie = (data) => {
|
|
const aggregation = data?.aggregation
|
|
return (
|
|
aggregation?.map?.((item) => {
|
|
const { id, count, text } = item
|
|
return {
|
|
id,
|
|
value: count,
|
|
name: cleanRichText(text)
|
|
}
|
|
}) || []
|
|
)
|
|
}
|
|
// 柱状图数据处理
|
|
const bar = (data) => {
|
|
const aggregation = data?.aggregation
|
|
return (
|
|
aggregation?.map?.((item) => {
|
|
const { id, count, text } = item
|
|
return {
|
|
id,
|
|
value: count,
|
|
name: cleanRichText(text)
|
|
}
|
|
}) || []
|
|
)
|
|
}
|
|
// 仪表盘数据处理
|
|
const gauge = (data) => {
|
|
return parseFloat(data?.summary?.nps) || 0
|
|
}
|
|
|
|
const dataFormateConfig = {
|
|
pie,
|
|
bar,
|
|
gauge
|
|
}
|
|
|
|
/**
|
|
* @description: 分题统计图表hook
|
|
* @param {*} chartType
|
|
* @param {*} data
|
|
* @return {*} chartRef 图表实例 chartTypeList 图表类型列表 chartType 图表类型 chartData 图表数据
|
|
*/
|
|
export default ({ questionType, data }) => {
|
|
const chartRef = ref(null)
|
|
const chartTypeList = ref([])
|
|
const chartType = ref('')
|
|
const chartData = ref({})
|
|
|
|
watchEffect(() => {
|
|
if (questionType.value) {
|
|
// 根据题型获取图表类型列表
|
|
chartTypeList.value = questionChartsConfig[questionType.value] || questionChartsConfig.default
|
|
if (!chartType.value) {
|
|
// 默认选中第一项
|
|
chartType.value = chartTypeList.value?.[0]
|
|
}
|
|
if (chartType.value) {
|
|
// 根据图表类型获取图表数据
|
|
chartData.value = dataFormateConfig[chartType.value](data)
|
|
}
|
|
}
|
|
})
|
|
|
|
return {
|
|
chartRef,
|
|
chartTypeList,
|
|
chartType,
|
|
chartData
|
|
}
|
|
}
|