创新项目实训——可视化

任务

本项目已经实现了文件上传、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引用进行初始化的时机以及方法。

之后可以据此，完成多种多样的可视化手段如地图、热力图、动态变化的图表等。