本文共 798 字，大约阅读时间需要 2 分钟。

Vue工程配置与数据可视化开发

1. Vue项目配置说明

在项目的 vue.config.js 文件中，我们需要配置开发服务器的跨域设置和代理。以下是推荐的配置示例：

module.exports = {  devServer: {    port: 8080,    proxy: {      '/api': {        target: 'http://192.168.10.10:8999', // 部署服务器地址需替换        changeOrigin: true,        pathRewrite: {          '^/api': '/dataVisualization'        }      }    }  }}

2. 插件与资源管理

• Echarts 集成：将 echarts.min.js 文件放置在项目的 assets 文件夹中，确保路径正确无误。
• Axios 配置：通过 vue-axios 插件进行全局配置，方便后续数据请求。

3. 数据可视化开发任务

任务目标

• 使用 Vue 项目展示 2020 年消费额最高的五个省份的柱状图。
• 调用对应接口获取数据，并输出数据结构到浏览器的 console。
• 截图图表展示结果及 console 打印内容，将结果保存到指定文档。

实现步骤

注意事项

• 确保接口地址正确，跨域设置已完成。
• 数据结构清晰，确保可直接输出到 console 并处理。

通过以上步骤，可以完成任务要求，确保数据可视化结果与打印输出一致。

转载地址：http://sxgfk.baihongyu.com/