ToB企服应用市场:ToB评测及商务社交产业平台
标题:
基于vite+vue导入echarts和axios
[打印本页]
作者:
王國慶
时间:
2024-10-22 20:29
标题:
基于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适用于前端与服务器数据交互的场景。两者都是在前端开辟中非常实用的工具，可以提高开辟效率并改善用户体验。
一、安装依靠
npm i --save axios@1.4.0 echarts@5.4.2
复制代码
二、使用
1、src下创建两个文件夹 叫utils 和api
2、util下创建一个文件叫request.js
import axios from 'axios'
const service = axios.create({
baseURL: import.meta.env.VITE_APP_BASE_URL,
timeout: 5000,
})
// 请求拦截器
service.interceptors.request.use(
(config) => {
config.headers.icode = 'input you icode'
return config // 必须返回配置
},
(error) => {
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use((response) => {
console.log("response的值:",response)
// const { code, info, data } = response.data
// console.log("data的值:", data)
// console.log("code的值:", code)
// console.log("info的值:",info)
// 要根据success的成功与否决定下面的操作
if (response.code = 200) {
console.log("response.data.data", response.data.data);
console.log("进来了")
return response.data.data
} else {
console.log("response.data.info的值",response.data.info)
console.log("返回错误")
return Promise.reject(new Error(response.data.info))
}
})
export default service
复制代码
3、api文件夹下创建aaa.js的文件（数据哀求模块）
import request from '@/utils/request.js'
export const getdata = () => {
return request({
url:'http://localhost:8080/geta'
})
}
复制代码
注意：不支持@，须要本身配置，本身指定
Vite.config.js中配置
resolve: {
alias: {
'@':'./src'
}
},
复制代码
参考：
Apache ECharts 官网
首页 - ECharts图表集,ECharts demo集,echarts gallery社区,Make A Pie,分享你的可视化作品isqqw.com
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)
Powered by Discuz! X3.4
