任务
本项目已经实现了文件上传、Excel转CSV以及利用通义千问API生成结构化数据的任务。
下面是对结构化数据进行处理并使用Echarts进行前端可视化。
具体流程
数据清洗
1. 分析从后端拿到的数据的格式:我们可以看出对于AI给出的结构数据data.code
中存在大量的换行符,以及许多不需要的引号,空格等内容,为了方便对结构数据直接进行可视化,我们需要进行数据清洗。
{
"code": 200,
"data": {
"code": "\n{\n \"title\": \"网站用户增长情况\",\n \"xAxis\": {\n \"type\": \"category\",\n \"data\": [\"1号\", \"2号\", \"3号\"]\n },\n \"yAxis\": {\n \"type\": \"value\",\n \"name\": \"用户数\"\n },\n \"series\": [\n {\n \"name\": \"用户增长\",\n \"type\": \"line\",\n \"data\": [10.0, 20.0, 30.0],\n \"smooth\": true\n }\n ]\n}\n",
"analyse": "\n\n数据分析结论:\n根据图表显示,网站用户在1号到3号期间呈现逐日增长的趋势。具体来说,1号用户数为10,2号增长到20,3号进一步增加到30,显示出网站的用户基础在稳步扩大。这可能是由于新用户注册增加、活跃度提升或者市场推广活动的效果。为了更深入地了解用户增长的驱动力,可能需要分析其他相关数据,如用户来源、留存率等。"
},
"msg": "分析成功"
}
2. 使用使用正则表达式对数据进行清洗,去除换行符,双引号,空格等无效干扰的内容,将真正有效可用于可视化的内容以JSON
格式保存到decoration
中。
// 提交表单
submitForm() {
analyseData(param).then(response=>{
console.log(response)
this.chartName=this.form.name
this.analyse=response.data.analyse
this.loading=false
//处理数据
let rawData=response.data.code
let cleanedData = rawData.replace(/^\s*\n*\"|\"\n*\s*$/g, '');
cleanedData = cleanedData.replace(/\s+/g, ' ');
this.decoration=JSON.parse(cleanedData)
})
},
- 数据清洗:首先,cleanedData = rawData.replace(/^\s*\n*\"|\"\n*\s*$/g, '')移除字符串开始和结束的空格、换行符和双引号。接着,cleanedData = cleanedData.replace(/\s+/g, ' ')将所有连续的空白字符替换为单个空格,进一步清理数据。
- 解析JSON数据:最后,使用JSON.parse(cleanedData)将清理过的字符串转换为JavaScript对象,并将结果赋值给this.decoration。这一步假定清理后的数据格式为有效的JSON字符串,以便进一步在应用中使用。
数据可视化
1. 首先构建了一个清晰的界面布局,上半部分用于展示图表(包括图表名称和图表容器),下半部分用于展示相关的分析结论,同时通过Vue的绑定机制动态更新数据显示,并集成了加载状态的管理,以提升用户体验。
<!-- 图表与结论区域 -->
<div style="display: flex; flex-direction: column;">
<!-- 图表容器 -->
<el-tag effect="dark" width="80px">最近图表:{{ chartName }}</el-tag>
<div v-loading="chartLoading" style="border:1px solid #ccc">
<div ref="chartContainer" style="width: 600px; height: 360px;"></div>
</div>
<!-- 结论区域 -->
<el-tag effect="dark" width="80px">最近分析结果</el-tag>
<div v-loading="chartLoading" style="border: 1px solid #ccc; padding: 1rem; overflow-y: auto; margin-top: 10px;">
<!-- 结论 -->
<p>{{ analyse }}</p>
</div>
</div>
2. 根据图表容器,用清洗好的数据进行渲染。实现了ECharts图表的动态创建与更新,以及分析结果和图表名称的实时反映,是实现数据可视化和分析反馈的核心逻辑部分。
if (!this.chartInstance) {
//基于DOM引用,创建图表实例
this.chartInstance = echarts.init(this.$refs.chartContainer);
}
//将清洗后的数据传入,绘制出最近的图表
this.chartInstance.setOption(this.decoration);
//展示生成结论
this.analyse=response.data.genResult
//设置图表名称
this.chartName=response.data.name
效果展示
总结与设想
通过Echarts能够很好的将结构化数据进行渲染,但是要注意Echarts基于DOM引用进行初始化的时机以及方法。
之后可以据此,完成多种多样的可视化手段如地图、热力图、动态变化的图表等。