vue2+datav可视化数据大屏(2)

本文涉及的产品
数据可视化DataV,5个大屏 1个月
可视分析地图(DataV-Atlas),3 个项目,100M 存储空间
简介: 接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios

接上一节所说 我们已经讲骨架搭好 这节我们讲述的如何在vue2中使用mock数据和封装axios

1,项目中使用moke

       📓什么是mock?,mock就是假数据,除了数据是假的,其他内容都和正常工作中后端开发的接口都是一致的。我们现在就根据实际的情况,定义9个接口给大屏使用

      📓 在src文件夹下新建文件夹mock,在mock文件夹下新建文件index.js,在index文件里写mock接口image.gif编辑

       📓 来建第一个接口

import Mock from "mockjs";  //导入mock
Mock.setup({  //设置延迟时间,最大程度的接近正式接口
    timeout: 4000
    })
Mock.mock("/api/info", "get", {  //第一个参数是地址,第二个参数是该接口的请求方式,第三个参数是返回值
  code: 200,
  data: {
    Tue: 123,
    Wed: 231,
    Thu: 2142,
    Fri: 432,
    Sat: 9271,
    Sun: 8987,
  },
});

image.gif

     📓以此类推 我们创建9个接口

import Mock from "mockjs";
Mock.setup({
    timeout: 4000
    })
Mock.mock("/api/info", "get", {  //折线图接口
  code: 200,
  data: {
    Tue: 123,
    Wed: 231,
    Thu: 2142,
    Fri: 432,
    Sat: 9271,
    Sun: 8987,
  },
});
Mock.mock("/api/info1", "get", { //饼图接口
    code: 200,
   data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
  });
Mock.mock("/api/info2", "get", {  //环形图接口
    code: 200,
    data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
  });
  Mock.mock("/api/info3", "get", { //柱状图接口
    code: 200,
    data: {
      Tue: 123,
      Wed: 231,
      Thu: 2142,
      Fri: 432,
      Sat: 9271,
      Sun: 8987,
    },
  });
  Mock.mock("/api/info4", "get", {
    code: 200,
    data: {
      Tue: 123,
      Wed: 231,
      Thu: 2142,
      Fri: 432,
      Sat: 9271,
      Sun: 8987,
    },
  });
  Mock.mock("/api/info5", "get", {
    code: 200,
    data: {
      Tue: 123,
      Wed: 231,
      Thu: 2142,
      Fri: 432,
      Sat: 9271,
      Sun: 8987,
    },
  });
  Mock.mock("/api/info6", "get", {
    code: 200,
    data: {
      Tue: 123,
      Wed: 231,
      Thu: 2142,
      Fri: 432,
      Sat: 9271,
      Sun: 8987,
    },
  });
  Mock.mock("/api/info7", "get", {
    code: 200,
    data: {
      Tue: 123,
      Wed: 231,
      Thu: 2142,
      Fri: 432,
      Sat: 9271,
      Sun: 8987,
    },
  });
  Mock.mock("/api/info8", "get", {
    code: 200,
    data: {
      Tue: 123,
      Wed: 231,
      Thu: 2142,
      Fri: 432,
      Sat: 9271,
      Sun: 8987,
    },
  });

image.gif

        📓在main.js里导入我们创建在mock下的index文件

image.gif编辑

       📓这时候,我们就已经新建了9个接口,下一步就是封装axios了

2.封装axios

         📓axios刚初始化时肯定是不好使用的,所以我们得需要进行2次封装

       📓在src文件夹下面新建一个文件夹utlis文件,文件夹下面新建文件requests.js用来二次封装axios

image.gif编辑

       📓 在文件里倒入axios,并使用axios的create方法创建axios实例,并导出

import axios from "axios"
const requests = axios.create({
    baseURL:"" //这里放接口请求域名
}) 
//写请求拦截器或者想要拦截器
requests.interceptors.request.use(config=>{ //我这里写请拦截器 给每个请求加上请求头
    config.headers.Authorization = 'Bearer ' + "123123"
    return config
})
requests.interceptors.response.use(config=>{ //这里我写了一个响应拦截器,这里对所有接口返回值是code的在控制台上打印响应成功
    if(config.data.code == 200){
        console.log("响应成功")
    }
    return config
})
export default requests  //将我们二次封装处理好的axios默认导出

image.gif

3.统一处理接口

      📓当我们axios封装好了,mock数据也有了后,这时,我们就需要做一件事情了,要对请求接口进行加工,便于我们更好的进行管理

       📓在src-views里新建文件夹api,api文件夹下新建文件index.js

image.gif编辑

       📓在index,js文件里面导入我们二次封装后的axios,并在里面设置请求的方式,和需要请求的接口,并进行导出

import requests from "@/utlis/requests";
// 折线图接口
export function info(){
    return requests({
        url:"/api/info",
        method:"GET"
    })
}
// 饼图接口
export function info1(){
    return requests({
        url:"/api/info1",
        method:"GET"
    })
}
// //环形图接口
export function info2(){
    return requests({
        url:"/api/info2",
        method:"GET"
    })
}
// //柱状图接口
export function info3(){
    return requests({
        url:"/api/info3",
        method:"GET"
    })
}
// 折线图接口
export function info4(){
    return requests({
        url:"/api/info4",
        method:"GET"
    })
}
// 折线图接口
export function info5(){
    return requests({
        url:"/api/info5",
        method:"GET"
    })
}
// 折线图接口
export function info6(){
    return requests({
        url:"/api/info6",
        method:"GET"
    })
}
// 折线图接口
export function info7(){
    return requests({
        url:"/api/info7",
        method:"GET"
    })
}
// 折线图接口
export function info8(){
    return requests({
        url:"/api/info8",
        method:"GET"
    })
}

image.gif

现阶段当进行了接口的二次封装后,后续我们直接调用函数方法,就能进行接口请求了,下一节将进行页面的填充和echarts的渲染

相关实践学习
DataV Board用户界面概览
本实验带领用户熟悉DataV Board这款可视化产品的用户界面
阿里云实时数仓实战 - 项目介绍及架构设计
课程简介 1)学习搭建一个数据仓库的过程,理解数据在整个数仓架构的从采集、存储、计算、输出、展示的整个业务流程。 2)整个数仓体系完全搭建在阿里云架构上,理解并学会运用各个服务组件,了解各个组件之间如何配合联动。 3 )前置知识要求   课程大纲 第一章 了解数据仓库概念 初步了解数据仓库是干什么的 第二章 按照企业开发的标准去搭建一个数据仓库 数据仓库的需求是什么 架构 怎么选型怎么购买服务器 第三章 数据生成模块 用户形成数据的一个准备 按照企业的标准,准备了十一张用户行为表 方便使用 第四章 采集模块的搭建 购买阿里云服务器 安装 JDK 安装 Flume 第五章 用户行为数据仓库 严格按照企业的标准开发 第六章 搭建业务数仓理论基础和对表的分类同步 第七章 业务数仓的搭建  业务行为数仓效果图  
相关文章
|
3月前
|
人工智能 数据可视化 定位技术
DataV AI助手小技巧-如何制作PPT数据地图
“数据地图”是PPT汇报地区业务数据的最佳形式之一;以往制作数据地图需要用户有一定的编程和数据处理基础,制作门槛较高;随着DataV整合通义千问大模型能力之后,不懂编程和设计的用户也可以借助AI助手“零代码”制作数据地图,真正实现了人人可用的地图数据可视化。 进入大模型AI时代,人人可以变成职场跨界多面手!
11171 2
DataV AI助手小技巧-如何制作PPT数据地图
|
5月前
|
SQL 数据可视化 定位技术
见证数据的视觉奇迹——DataV Atlas
阿里云DataV的DataV-Atlas是一款专注于地理数据可视化的工具,提供时空数据分析和地图发布功能,适合快速创建地图并分享。与ArcGIS Server相比,DataV.GeoAtlas更侧重于数据可视化和云服务集成,适合非专业用户,而ArcGIS Server是全面的GIS服务平台,适合复杂分析和定制化应用。用户可通过阿里云免费试用DataV-Atlas,体验包括数据上传、地图制作和分析在内的功能。
见证数据的视觉奇迹——DataV Atlas
|
4月前
|
数据可视化 前端开发 数据挖掘
身怀绝技的开发者们,快来DataV玩转可视化组件,开启数据新视界!
理论学习之后,实践是检验知识的最好方式。建议你动手创建一个DataV项目,将所学的知识和技能应用到实际开发中。通过实践,你可以更好地理解和掌握DataV的使用技巧,并发现其中的乐趣和挑战。
|
5月前
|
数据可视化 搜索推荐 atlas
DataV Atlas深度解析与实战应用:打造个性化地理信息可视化
阿里云DataV的Atlas功能专注于地理信息可视化,提供范围选择、边界生成和层级展示等工具,助用户轻松创建专业地图应用。通过代码示例展示了如何用Geo组件展示中国省份销售数据,强调了数据安全和性能优化的重要性。DataV Atlas简化了复杂地理信息的展示,提升了数据洞察的直观性和美感。【6月更文挑战第19天】
547 3
|
6月前
|
Prometheus 监控 Cloud Native
用 DataV 展示 Prometheus 数据
本文介绍了如何将 Prometheus 数据接入 DataV 进行可视化展示。如果使用的是阿里云可观测监控中的 Prometheus 实例,或者自建的 Prometheus 开放了公网可访问的 HTTP API,那么可直接通过 API 将数据接入 DataV 展示。
350 0
|
6月前
|
JSON 数据可视化 定位技术
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
python_将包含汉字的字典数据写入json(将datav的全省数据中的贵州区域数据取出来)
61 0
|
6月前
|
数据可视化 JavaScript 开发工具
vue2+datav可视化数据大屏(3)
接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦
426 0
|
6月前
|
数据可视化 前端开发 JavaScript
react+datav+echarts实现可视化数据大屏
最近有点闲,就学习了下react,没想到就把react学完了,觉得还不错,就打算出一把react+datav的简易版可视化数据大屏供大家做个参考
463 2
react+datav+echarts实现可视化数据大屏
|
6月前
|
数据可视化 JavaScript 前端开发
vue2+datav可视化数据大屏(1)
最近打算出一个前端可视化数据大屏的系列专栏,这次将很全面的教大家设计可视化大屏,从开始到打包结束,其中,包括如何设计框架,如何封装axios,等等,本次使用的数据均为mock数据。与正常使用一致。本文会从开始的创建vu23项目到最后的项目打包,本篇共计3节。
703 1
|
数据可视化 容器
DataV构建大屏(全屏)数据展示页面
DataV构建大屏(全屏)数据展示页面
727 0