基于vite+vue导入echarts和axios

一、了解echarts和axios
1、ECharts

ECharts（百度ECharts） 是一个基于JavaScript的开源可视化库，主要用于创建各种交互式和可定制的图表。它由百度开辟和维护，旨在帮助开辟者轻松地实现数据可视化。以下是关于ECharts的具体先容：

• 功能特点：
  
  
  
  • 丰富的图表类型： ECharts支持多种常见的图表类型，包罗折线图、柱状图、饼图、散点图、雷达图等，以及一些特别的图表类型如地图、热力图等。
    
  • 灵活的配置选项： 用户可以通过配置选项自定义图表的外貌和举动，包罗调解样式、设置数据、配置交互等。
    
  • 响应式设计： ECharts可以根据不同的设备和屏幕尺寸举行自顺应体现，确保图表在各种情况下都能正常展示。
    
  • 丰富的事件处理： 支持各种图表交互操纵，如数据筛选、拖拽、缩放、悬停等，使用户可以更直观地与图表举行互动。
    
  • 跨平台兼容性： ECharts既可以在Web端运行，也可以在Node.js情况中使用，同时支持主流的今世欣赏器。
    
  
  
• 应用场景：
  
  
  
  • 数据报告和分析： ECharts可用于天生各种数据报告和分析图表，帮助用户更直观地理解数据。
    
  • 仪表盘： 通过ECharts可以创建动态、交互式的仪表盘，用于监控和展示关键指标。
    
  • 可视化大屏： 在数据大屏、可视化展示等场景下，ECharts可以用于创建各种精致的可视化效果。
    
  • 商业应用： 在商业智能、数据可视化平台等领域，ECharts被广泛应用于数据展示和可视化分析。
    
  
  

2、Axios

Axios 是一个基于Promise的HTTP客户端，用于在欣赏器和Node.js情况中发送HTTP哀求。它是一个简洁、易用且功能丰富的库，以下是关于Axios的具体先容：

• 特点和功能：
  
  
  
  • Promise支持： Axios基于Promise，提供了一种更简洁、更灵活的方式来处理异步哀求。
    
  • 简洁的API： Axios的API设计简洁明了，使用起来十分便捷，例如通过axios.get、axios.post等方法发送HTTP哀求。
    
  • 主动转换JSON数据： 在接收到响应数据时，Axios会主动将JSON数据转换为JavaScript对象，方便处理和操纵。
    
  • 拦截器支持： Axios支持哀求和响应拦截器，答应在发送哀求或者接收响应时执行特定的逻辑，例如添加全局的哀求头或者处理错误信息。
    
  • 取消哀求： Axios答应取消未完成的HTTP哀求，制止不须要的网络开销和资源浪费。
    
  
  
• 应用场景：
  
  
  
  • 与服务器数据交互： 在前端开辟中，Axios常用于与服务器举行数据交互，包罗从后端获取数据、向后端发送数据等。
    
  • 处理API哀求： 在开辟基于RESTful API的应用时，Axios可以方便地执行各种HTTP哀求，如GET、POST等。
    
  • 异步数据加载： 通过Axios可以实现异步加载数据，用于更新页面内容或者响应用户交互。
    
  • 错误处理： Axios提供了丰富的错误处理机制，可以捕获和处理各种哀求错误，包管应用的稳定性和可靠性。
    
  
  

综上所述，ECharts适用于数据可视化领域，而Axios适用于前端与服务器数据交互的场景。两者都是在前端开辟中非常实用的工具，可以提高开辟效率并改善用户体验。
 一、安装依靠

1. npm i --save axios@1.4.0 echarts@5.4.2

复制代码

二、使用
1、src下创建两个文件夹 叫utils 和api
2、util下创建一个文件叫request.js

1. import axios from 'axios'
2. const service = axios.create({
3.     baseURL: import.meta.env.VITE_APP_BASE_URL,
4.     timeout: 5000,
5. })
7. // 请求拦截器
8. service.interceptors.request.use(
9.     (config) => {
10.         config.headers.icode = 'input you icode'
11.         return config // 必须返回配置
12.     },
13.     (error) => {
14.         return Promise.reject(error)
15.     }
16. )
18. // 响应拦截器
19. service.interceptors.response.use((response) => {
20.     console.log("response的值:",response)
21.     // const { code, info, data } = response.data
22.     // console.log("data的值:", data)
23.     // console.log("code的值:", code)
24.     // console.log("info的值:",info)
25.     // 要根据success的成功与否决定下面的操作
27.     if (response.code = 200) {
28.         console.log("response.data.data", response.data.data);
29.         console.log("进来了")
30.         return response.data.data
31.     } else {
32.         console.log("response.data.info的值",response.data.info)
33.         console.log("返回错误")
34.         return Promise.reject(new Error(response.data.info))
35.     }
36. })
38. export default service

复制代码

3、api文件夹下创建aaa.js的文件（数据哀求模块）

1. import request from '@/utils/request.js'
2. export const getdata = () => {
3.     return request({
4.         url:'http://localhost:8080/geta'
5.     })
6. }

复制代码

注意：不支持@，须要本身配置，本身指定
Vite.config.js中配置

1.   resolve: {
2.     alias: {
3.       '@':'./src'
4.     }
5.   },

复制代码

参考：
Apache ECharts 官网
首页 - ECharts图表集,ECharts demo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。