利用Vue+Echarts完成可视化任务

news2024/11/24 3:36:55

文章目录

  • 任务一:用柱状图展示消费额最高的省份
    • (一)提出任务
    • (二)准备工作
      • 1、利用postman访问接口数据
      • 2、安装node.js
      • 3、输入更换镜像源为淘宝源
      • 4、清除npm缓存
      • 5、安装vue脚手架

任务一:用柱状图展示消费额最高的省份

(一)提出任务

  • 编写Vue工程代码,根据接口,用柱状图展示2020年消费额最高的5个省份,同时将用于图表展示的数据结构在浏览器的console中进行打印输出,将图表可视化结果和浏览器console打印结果分别截图并粘贴至对应报告中。

(二)准备工作

1、利用postman访问接口数据

  • 采用POST提交方式 - http://192.168.23.89:8999/dataVisualization/selectOrderInfo
  • 提交参数是JSON格式
{
    "startTime": "2020-01-01 00:00:00",
    "endTime": "2020-12-30 00:00:00"
}
  • 通过设置startTime和endTime值,可以筛选出2020年的消费数据
    在这里插入图片描述
  • data是个json数组,里面的每一个json对象就是一条消费数据
{
	"id": 78506,
    "finalTotalAmount": 305062.00,
    "outTradeNo": "756847726439369",
    "provinceName": "北京",
    "regionName": "华北",
    "userName": "华馥"
}

2、安装node.js

  • 执行命令:sudo apt install nodejs
    在这里插入图片描述
  • 查看node.js版本
    在这里插入图片描述
  • 测试node运行环境
    在这里插入图片描述

3、输入更换镜像源为淘宝源

  • 查看npm版本,执行命令:npm --version
    在这里插入图片描述
  • 执行命令:npm config set registry https://registry.npm.taobao.org
    在这里插入图片描述

4、清除npm缓存

  • 执行命令:npm cache clean --force
    在这里插入图片描述

5、安装vue脚手架

  • 执行命令:sudo nmp install -g @vue/cli
    在这里插入图片描述
  • 检验vue是否安装成功,执行命令:vue --version
    在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1212640.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2023.11.15-hivesql之炸裂函数explode练习

把一个容器的多个数据炸裂出单独展示: explode(容器) 需求:将NBA总冠军球队数据使用explode进行拆分&#xff0c;并且根据夺冠年份进行倒序排序。 1.建表 --step1:建表 create table the_nba_championship(team_name string,champion_year array<string> ) row format…

手摸手入门Springboot2.7集成Swagger2.9.2

环境介绍 技术栈 springbootmybatis-plusmysqloracleSwagger 软件 版本 mysql 8 IDEA IntelliJ IDEA 2022.2.1 JDK 1.8 Spring Boot 2.7.13 mybatis-plus 3.5.3.2 REST软件架构风格 REST即表述性状态传递&#xff08;英文&#xff1a;Representational State T…

【informer】 时间序列的预测学习 2021 AAAI best paper

文章目录 前言1.引入2.数据集训练 前言 数据集 https://github.com/zhouhaoyi/ETDataset/blob/main/README_CN.md 代码&#xff1a;https://github.com/zhouhaoyi/Informer2020#reproducibility 21年的paper:https://arxiv.org/pdf/2012.07436.pdf 论文在代码上有连接&#xf…

Promise 重写 (第一部分)

学习关键语句&#xff1a; promise 重写 写在前面 重新学习了怎么重写 promise &#xff0c; 我觉得最重要的就是要有思路&#xff0c;不然有些 A 规范是完全想不到的 开始 重写函数的过程中, 最重要的是有思路 我们从哪里获取重写思路? 从正常的代码中 我们先看正常的代码…

C语言判断水仙花数(ZZULIOJ1027:判断水仙花数)

题目描述 春天是鲜花的季节&#xff0c;水仙花就是其中最迷人的代表&#xff0c;数学上有个水仙花数&#xff0c;他是这样定义的&#xff1a;“水仙花数”是指一个三位数&#xff0c;它的各位数字的立方和等于其本身&#xff0c;比如153135333。 现在要求输入一个三位数&#…

delete 与 truncate 命令的区别

直接去看原文 原文链接:【SQL】delete 与 truncate 命令的区别_truncate和delete的区别-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- 1. 相同点 二者都能删除表中的数据…

不敢信,30+岁的项目经理会是这样

大家好&#xff0c;我是老原。 你们知道&#xff0c;每个阶段的项目经理都是什么样的吗&#xff1f; 20多岁时&#xff0c;刚踏入项目管理的你可能是个什么都不懂的职场小白&#xff0c;或者只能在旁边打打下手&#xff1b; 到了30岁&#xff0c;经历了项目的人情冷暖&#…

QT中的鼠标事件

鼠标追踪打开后进去一动就显示

我把微信群聊机器人项目开源

▍PART 序 开源项目地址》InsCode - 让你的灵感立刻落地 目前支持的回复 ["抽签", "天气", "讲笑话", "讲情话", "梦到", "解第", "动漫图", "去水印-", "历史今天", "星座-…

Linux控制---进程程序替换

前言&#xff1a;前面我们学洗了Linux进程退出的相关知识&#xff0c;了解了什么是进程退出&#xff0c;已经进程等待的相关话题&#xff0c;今天&#xff0c;我们来学习Linux中的进程程序替换&#xff0c;进程程序替换在Linux中可以用于实现新程序的启动、程序升级、多进程程序…

k8s-集群升级 2

在每个集群节点都安装部署cir-docker 配置cri-docker 升级master节点 导入镜像到本地并将其上传到仓库 修改节点套接字 升级kubelet 注&#xff1a;先腾空后进行升级&#xff0c;顺序不能搞反&#xff0c;否则会导致严重问题 配置kubelet使用cri-docker 解除节点保护 升级wor…

传统企业如何利用软文营销突破重围

数字经济的发展让企业有了更多发展的可能&#xff0c;通过线下线上齐发展能够助力企业推广品牌&#xff0c;获得不错的销量。传统的线下门店销售在数字化时代下还是有一定的局限性&#xff0c;转型只是时间问题&#xff0c;然而有些企业在面对网络营销的时候却束手无策&#xf…

11.15 知识总结(模板层、模型层)

一、 模板层 1.1 过滤器 1.什么是过滤器&#xff1f; 过滤器类似于python的内置函数&#xff0c;用来把变量值加以修饰后再显示。 2. 语法 1、 {{ 变量名|过滤器名 }} 2、链式调用&#xff1a;上一个过滤器的结果继续被下一个过滤器处理 {{ 变量名|过滤器1|过滤器2 }} 3、有的过…

windows 安装 Oracle Database 19c

目录 什么是 Oracle 数据库 下载 Oracle 数据库 解压文件 运行安装程序 测试连接 什么是 Oracle 数据库 Oracle数据库是由美国Oracle Corporation&#xff08;甲骨文公司&#xff09;开发和提供的一种关系型数据库管理系统&#xff0c;它是一种强大的关系型数据库管理系统…

kubernetes资源管理

资源管理 资源管理介绍 在kubernetes中&#xff0c;所有的内容都抽象为资源&#xff0c;用户需要通过操作资源来管理kubernetes。 kubernetes的本质上就是一个集群系统&#xff0c;用户可以在集群中部署各种服务&#xff0c;所谓的部署服务&#xff0c;其实就是在kubernetes集…

基于Java Web的云端学习系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

Prometheus入门与实战

1.Prometheus介绍 1.什么是监控&#xff1f; 从技术角度来看&#xff0c;监控是度量和管理技术系统的工具和过程&#xff0c;但监控也提供从系统和应用程序生成的指标到业务价值的转换。这些指标转换为用户体验的度量&#xff0c;为业务提供反馈&#xff0c;同样还向技术提供反…

记feign调用第三方接口时header是multipart/form-data

1.请求第三方接口&#xff0c;用feign请求 请求第三方接口&#xff0c;用feign请求&#xff0c;header不通&#xff0c;feign的写法不同 调用时报错Could not write request: no suitable HttpMessageConverter found for request type [com.ccreate.cnpc.mall.dto.zm.ZMPage…

现场直击!触想智能亮相德国2023 SPS展会

当地时间11月14日上午9时 2023 年(德国)纽伦堡国际工业自动化及元器件展览会 SPS 展(以下简称&#xff1a;SPS展会)正式拉开帷幕&#xff0c;触想智能与来自全球各地的领先科技公司及前沿业者齐聚盛会&#xff0c;共赴一场科技与创新交汇的“饕餮盛宴”。 △ 2023 SPS展会开幕(…

sCrypt Playground 发布

sCrypt Playground 发布了。 与桌面IDE 完全相同的功能&#xff0c;但是无需安装。体验地址: https://playground.scrypt.io。 请不要在 sCrypt Playground 上存储重要数据。我们会不定时清除用户保存在其上的数据。