Vue实战之 11. 数据统计

news/2024/7/10 2:29:10 标签: echarts, 前端, javascript, vue

1. 数据统计概述

数据统计模块主要用于统计电商平台运营过程中的各种统计数据,并通过直观的可视化方式展现出来,方便相关运营和管理人员查看。

在这里插入图片描述

2. 用户来源数据统计报表

1. Echarts 第三方可视化库的基本使用

在这里插入图片描述

在这里插入图片描述

详细代码可以去 菜鸟教程 进行复制

2. 实现用户来源数据统计报表

  • 调用接口获取后台接口数据
  • 通过echarts的api实现报表效果
// 发起数据请求,获取折线图数据
    const { data: res } = await this.$http.get('reports/type/1')

    if (res.meta.status !== 200) {
      return this.$message.error('获取折线图失败!')
    }
// 4.指定图表的配置项和数据
    const result = _.merge(res.data, this.options)
    console.log(result)
    // 5. 展示数据
myChart.setOption(result)

在这里插入图片描述


http://www.niftyadmin.cn/n/1333731.html

相关文章

9.1黑马Vue电商后台管理系统商品管理模块完善:编辑商品的功能

在原视频中,老师跳过了这个功能,我觉得自己去实现也可以锻炼自己,于是自己补充了编辑功能 同用户管理,权限管理等之前各个模块的编辑功能不同,因为商品具有很多可编辑的选项,所以选择像添加商品一样&#x…

Vue实战之 12. 项目优化

1. 项目优化 1. 项目优化策略 生成打包报告第三方库启用CDNElement-UI 组件按需加载路由懒加载首页内容定制 1. 生成打包报告 打包时,为了直观地发现项目中存在的问题,可以在打包时生成报告。生成报告的方式有两种: 通过命令行参数的形式…

12. 1 补充:关于 babel-plugin-transform-remove-console 插件

这个插件的作用是在项目发布上线阶段,去掉我们在开发阶段时进行测试的console.log() 1. 关于使用 找到项目的babel.config.js,加入一句代码: 但是,如果只是加入这么一句话,其实无论是在项目的开…

Gstreamer编译篇_libmount

Gstreamer编译篇_libmount /usr/lib/x86_64-linux-gnu/libmount.so: file not recognized: File format not… 在交叉编译的时候出现libmount.so文件格式不正确 因为现在是在交叉编译环境下啊。 仔细对比了glib的meson.build # libmount is only used by gio, but we need …

13.1 补充:购买服务器部署上线

在进行之前,我们需要先下载两个软件 Xshell 和 postman 1. 去阿里云购买一个云服务器 也可以先试用一个月 1. 基础配置 地区最好选择香港,因为后期可能会涉及到域名的绑定,选择香港会方便一点其他的选项都选择第一个,因为第一个是…

Vue实战之 13. 项目上线

1. 项目上线相关配置 通过 node 创建 web 服务器。开启 gzip 配置。配置 https 服务。使用 pm2 管理应用。 1. 通过 node 创建 web 服务器 创建 node 项目,并安装 express,通过 express 快速创建 web 服务器,将 vue 打包生成的 dist 文件夹…

gstreamer-glib篇

Gstreamer-glib篇 Glib的获取 git clone https://gitlab.gnome.org/GNOME/glib.git git tag git checkout tag git checkout 2.62.6

3. github --- 非团队协作

什么是非团队协作? 即使你不是团队成员,也有方法想向其他人的github中提交代码,只不过你提交的代码是需要被审核的,只有审核通过了才能够生效。 应用场景:比如说,你要完成一个网页效果,这个网页…