基于vue3 的 Echarts图表展示(任务一:用柱状图展示消费额最高的省份)(操作全流程)(图文版)

news2024/12/23 11:07:52

目录

前言:

操作要求:

操作流程:

 一.创建vue项目

  1.在vscode上创建vue脚手架工程

二.配置运行环境 

           2.配置axios(用于访问接口) 和引入echarts包

  3.引入需要用到的js包

三.开始实践做题(最后附有完整代码)

1.获取接口数据

2.数据处理

3.echarts图表展示

4.最终效果图 

4.完整参考代码


前言:

这篇是一个基于vue3上的echarts图表展示文章,无论你有没有基础 ,只要看这篇文章你都可以学会!加油哦~

操作要求:

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

操作流程:

 一.创建vue项目

  1.在vscode上创建vue脚手架工程

       1.1 由node去下拉vuecli脚手架(未安装node的请查看文章:安装npm)

     ​​

        1.2 创建vue项目命令:vue create test3

     ​​                   ​​

               然后用vscode打开该vue工程

二.配置运行环境 

      2.配置axios(用于访问接口) 和引入echarts包

         2.1 首先先打开vscode终端(快捷键Ctrl+`),引入axios包和Echarts包

                如果你没有这两个包,可以私信我领取哦!

           

         2.2 配置代理服务器

             在vuecli的工程脚手架项目中找到vue.config.js文件,有则打开,无则新   

 ​​

2.3 在vue.config.js中  配置代理服务器,代码如下:(注意配置的ip地址)

module.exports = {
    
    devServer: {
      proxy: 'http://192.168.23.xx:xxxx'  //配置代理服务器(域名和端口为被请求方的)
    }
  }

 注意:配置完后必须重新启动vuecli脚手架服务才会生效!!!

3.引入需要用到的js包

 3.1.新建一个vue组件,引入axios和echarts

三.开始实践做题(最后附有完整代码)

题目分析: 根据最上方题目要求,可以分析出,主要的代码步骤是:

1.获取接口数据

2.数据处理

3.echarts图表展示

 1.获取接口数据

此处涉及到异步变同步问题,可以参考这篇文章:异步->同步接口请求

// async 和 await 让异步变同步
async  function getdata(){
        // 设置带参请求
          let proms={
            "startTime":"2020-01-01 00:00:00",
            "endTime":"2020-12-30 00:00:00"
                }
         const alldata = await    axios.post("http://localhost:8080/dataVisualization/**",proms).then((request)=>{
          return request.data.data
           },(error)=>
           {
                console.log(error)
           })
           culdata(alldata)
        }

 2.数据处理

  // 处理数据
        function culdata(data){
            let map = new Map()
            for(let i in data){
                let finalTotalAmount = data[i].finalTotalAmount   //拿到金额
                let provinceName = data[i].provinceName  // 拿到省份

                if(map.has(provinceName)){
                    map.set(provinceName,map.get(provinceName)+finalTotalAmount)
                }else{
                    map.set(provinceName,finalTotalAmount)
                }
            }

        // 类型转换并排序取前五
      let newdata =    Array.from(map).sort((a,b)=>b[1]-a[1]).slice(0,5)
       console.log(newdata) 
        
      let    xdataa =[]
      let   ydataa =[]
    //   分别取出数组中的数据
       for(let [k,v] of newdata){
        xdataa.push(k)
        ydataa.push(v)
       }
      xdata = xdataa
      ydata = ydataa
    //   调用绘图方法
       initEcharts()
        }

3.echarts图表展示

 function initEcharts(){
            // 初始化dom元素
         let barone = echarts.init(document.getElementById("one"))
         barone.setOption({
            title:{
                text:"柱状图展示2020年消费前5省"
            },
            // 设置x轴
            xAxis:{
                type:"category",
                data: xdata
            },
            // 设置y轴
            yAxis:{
                type:"value"
            },
            // 设置配置项
            series:{
                name:"one",
                type:"bar",
                data:ydata
            }
         })
}

4.最终效果图 

 

4.完整参考代码

<template>
  <div id="one" class="root">123</div>
</template>

<script>
import { onMounted } from 'vue'
import axios from "../assets/axios"
import echarts from "../assets/echarts"
export default {

    setup(){
        let xdata = ""
        let ydata = ""

        // 获取数据
       async  function getdata(){
        // 设置带参请求
          let proms={
            "startTime":"2020-01-01 00:00:00",
            "endTime":"2020-12-30 00:00:00"
                }
         const alldata = await    axios.post("http://localhost:8080/dataVisualization/selectOrderInfo",proms).then((request)=>{
          return request.data.data
           },(error)=>
           {
                console.log(error)
           })
           culdata(alldata)
        }
        
	// finalTotalAmount :总金额
	// provinceName :省名称
	
        // 处理数据
        function culdata(data){
            let map = new Map()
            for(let i in data){
                let finalTotalAmount = data[i].finalTotalAmount   //拿到金额
                let provinceName = data[i].provinceName  // 拿到省份

                if(map.has(provinceName)){
                    map.set(provinceName,map.get(provinceName)+finalTotalAmount)
                }else{
                    map.set(provinceName,finalTotalAmount)
                }
            }

        // 类型转换并排序取前五
      let newdata =    Array.from(map).sort((a,b)=>b[1]-a[1]).slice(0,5)
       console.log(newdata) 
        
      let    xdataa =[]
      let   ydataa =[]
    //   分别取出数组中的数据
       for(let [k,v] of newdata){
        xdataa.push(k)
        ydataa.push(v)
       }
      xdata = xdataa
      ydata = ydataa
    //   调用绘图方法
       initEcharts()
        }

// 绘图
        function initEcharts(){
            // 初始化dom元素
         let barone = echarts.init(document.getElementById("one"))
         barone.setOption({
            title:{
                text:"柱状图展示2020年消费前5省"
            },
            // 设置x轴
            xAxis:{
                type:"category",
                data: xdata
            },
            // 设置y轴
            yAxis:{
                type:"value"
            },
            // 设置配置项
            series:{
                name:"one",
                type:"bar",
                data:ydata
            }
         })
        console.log(ydata)
        console.log(xdata)
        }

        onMounted(()=>{
            getdata()
        })
    }
}
</script>

<style>
.root {
  width: 700px;
  height: 400px;
  border: 1px solid red;
  float: right;
}
</style>

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

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

相关文章

博格华纳高压发卡式电机解析

博格华纳的高压发卡式电机具有功率强大、坚固耐用和高性能等特点&#xff0c;采用紧凑型设计&#xff0c;优化的导体绕组结构缩短了电机的尺寸&#xff0c;使其便于在更小的空间内进行安装&#xff0c;并提高了常用区间的工作效率。此外&#xff0c;电机在设计上减少了重稀土元…

Spring Cloud Alibaba Nacos 2.2.3 (4) - 本地源码编译 调试

下载nacos nacos在GitHub上有下载地址&#xff1a;https://github.com/alibaba/nacos/releases&#xff0c;可以选择任意版本下载。 我下载的是2.2.3 版本 导入idea mvn 安装包 1&#xff0c;切换到Terminal ,并且使用command prompt模式 2&#xff0c;执行 mvn -Prelease…

Delaunay三角剖分算法

目录 一. 简介1.1 三角剖分1.2 Delaunay三角剖分 二. Delaunay三角剖分的相关理论2.1 Delaunay三角形和&#xff08;局部&#xff09;Delaunay边的概念2.2 Delaunay引理2.3 翻转边算法&#xff08;flip algorithm&#xff09;2.4 Delaunay三角剖分的最优性质 三. Delaunay三角剖…

缺口的大利润!伦敦银如何使用缺口交易

在伦敦银市场中&#xff0c;我们经常能够看见市场跳空形成缺口&#xff0c;其实&#xff0c;如果利用得当&#xff0c;我们在伦敦银投之中&#xff0c;这些缺口是能够为我们创造盈利机会的&#xff0c;那么下面我们就来讨论一下在伦敦银投之中如何认识这些跳空缺口&#xff0c;…

哪些远程桌面软件适合与团队共享屏幕和文件

远程桌面软件是一种方便团队协作和共享工作的工具。它们能够允许用户通过互联网连接到其他计算机&#xff0c;实现远程访问、共享屏幕和文件、以及协同工作。以下是一些适合与团队共享屏幕和文件的常用远程桌面软件。 1、RayLink RayLink是一款功能强大且易于使用的远程桌面软…

企业微信 API 接口调用教程:图文详解企业微信 API 的使用方法

本文通过 access_token 凭证的方式来讲解怎么调用 企业微信 API&#xff0c;并一步步介绍如何获取企业微信 API 的 corpsecret、corpid、access_token 凭证以及怎么向企业微信的应用发送消息。 企业微信 API 在线地址为&#xff1a;概述 - 企业微信 API &#xff0c;这个在线地…

大型架构设计的演进之路

Java全能学习面试指南&#xff1a;https://javaxiaobear.cn 今天我们一起看看大型互联网系统架构的演进之路&#xff0c;主要包含三部分内容。 第一部分是大型互联网系统的特点&#xff0c;分析大型互联网有哪些特点和挑战&#xff0c;它们是现在一些技术和架构方案产生的原因。…

性能测试 —— 性能测试常见的测试指标 !

一、什么是性能测试 先看下百度百科对它的定义&#xff0c;性能测试是通过自动化的测试工具模拟多种正常、峰值以及异常负载条件来对系统的各项性能指标进行测试。 我们可以认为性能测试是&#xff1a;通过在测试环境下对系统或构件的性能进行探测&#xff0c;用以验证在生产环…

网站有反爬机制就爬不了数据?那是你不会【反】反爬

目录 前言 一、什么是代理IP 二、使用代理IP反反爬 1.获取代理IP 2.设置代理IP 3.验证代理IP 4.设置代理池 5.定时更新代理IP 三、反反爬案例 1.分析目标网站 2.爬取目标网站 四、总结 前言 爬虫技术的不断发展&#xff0c;使得许多网站都采取了反爬机制&#xff…

SSL证书如何做到保障网站安全?

当网站显示不安全时&#xff0c;用户会在头脑中产生该网站是否合法的疑问&#xff0c;如果是购物网站或者购物商城&#xff0c;那意味着可能会损失大部分的用户。而SSL证书能有效保障网站的安全性&#xff0c;轻松解决网站不被用户信任的问题。那么&#xff0c;SSL证书究竟是如…

社交媒体商业禁令冲击:TikTok如何应对印尼政策变化?

随着社交媒体的普及和发展&#xff0c;各国政府开始越来越关注这一领域的监管和控制。印尼政府最近的决定&#xff0c;禁止在社交媒体上进行商品交易&#xff0c;引起了广泛的关注。 这一政策变化对TikTok等社交媒体平台带来了巨大的挑战&#xff0c;要求它们重新审视商业模式…

小米云原生文件存储平台化实践:支撑 AI 训练、大模型、容器平台多项业务

小米作为全球知名的科技巨头公司&#xff0c;已经在数百款产品中广泛应用了 AI 技术&#xff0c;这些产品包括手机、电视、智能音箱、儿童手表和翻译机等。这些 AI 应用主要都是通过小米的深度学习训练平台完成的。 在训练平台的存储方案中&#xff0c;小米曾尝试了多种不同的…

按照经纬度进行天气下载

https://power.larc.nasa.gov/data-access-viewer/ 点击data access viewer classic

数据工程中的单元测试完全指南

在数据工程领域中&#xff0c;经常被忽视的一项实践是单元测试。许多人可能认为单元测试仅仅是一种软件开发方法论&#xff0c;但事实远非如此。随着我们努力构建稳健、无错误的数据流水线和SQL数据模型&#xff0c;单元测试在数据工程中的价值变得越来越清晰。 本文带你深入探…

安卓桌面记事本便签软件哪个好用?

日常生活及工作中&#xff0c;很多人常常会遇到一些一闪而现的灵感&#xff0c;这时候拿出手机想要记录时&#xff0c;却找不到记录的软件。在这个快节奏的时代&#xff0c;安卓手机是我们日常生活不可或缺的伙伴。然而&#xff0c;正因为我们的生活如此忙碌&#xff0c;记事变…

从 Hackathon 战队到创业公司,和开发者们聊聊真实世界 AI Apps 的基础设施丨活动预告

在不久前结束的 TiDB Future App Hackath on 2023 上&#xff0c;来自全球 88 个国家的 1492 名参赛者们借助 AI 和 TiDB Serverless 的能力&#xff0c;构建了许多令人印象深刻的项目。 打造 Hackathon 的项目是一个从 0-1 的过程&#xff0c;真实世界中也涌现出了一批创业公…

Java 21正式发布了,来来来,一睹它的芳容!

Oracle 高兴地宣布 JDK 21 已经正式上线了。这是按照每六个月一次的发布计划,准时推出的第 12 个版本。这种定期的发布模式为开发者提供了稳定和可预见的创新,使得他们可以轻松地接纳和采用这些新特性。 Java 由于其出色的性能、稳定性和安全性使其持续成为全球最受欢迎的编程…

启山智软/微信小程序商城源码(微信小程序)

文章目录 启山智软一、小程序商城首页二、小程序商城分类三、小程序商城我的源码获取 启山智软 想要了解代码规范&#xff0c;学习商城解决方案&#xff0c;点击下方官网链接联系客服 作者&#xff1a;启山智软 官网及博客&#xff1a;启山智软官网、CSDN、掘金、gitee 简介&a…

爱分析《商业智能最佳实践案例》

近日&#xff0c;国内知名数字化市场研究咨询机构爱分析发布《2023爱分析商业智能最佳实践案例》&#xff0c;此评选活动面向落地商业智能的各行企业和商业智能厂商&#xff0c;以第三方专业视角深入调研&#xff0c;评选出具有参考价值的创新案例。永达汽车集团与数聚股份合作…

【Zabbix监控一】zabbix的原理与安装

利用一个优秀的监控软件&#xff0c;我们可以: ●通过一个友好的界面进行浏览整个网站所有的服务器状态 ●可以在 Web 前端方便的查看监控数据 ●可以回溯寻找事故发生时系统的问题和报警情况 总结&#xff1a;zabbix主要功能 监控&#xff0c;cpu负载&#xff0c;内存使用&a…