vue3的echarts从后端获取数据,用于绘制图表

场景需求:后端采用flask通过pymysql从数据库获取数据,并返回给前端。前端vue3利用axios获取数据并运用到echarts绘制图表。

第一步,vue中引入echarts

首先vue下载echarts

npm install echarts

 然后在main.js文件写如下代码

import {createApp} from 'vue'
import App from './App.vue'
import router from "@/router/index.js"  // 导入路由
import "lib-flexible/flexible"   //导入响应式布局文件,阿里开发的flexible.js
import $ from "jquery"  //导入jQuery
import * as echarts from "echarts"// 注册路由
const app = createApp(App)
app.use(router)
app.mount("#app")// 图表处理
app.config.globalProperties.$echarts = echarts

主要是引入echarts,并进行配置

第二步,在任意要使用echarts的xxx.vue组件中写如下代码

<script>
import axios from "axios"
import {defineComponent, toRaw} from 'vue'export default defineComponent({data() {return {num: [],}},methods: {getData() {let arr = []axios.get("http://127.0.0.1:5000/").then(res => {arr = toRaw(res.data)console.log(arr)let myChart = this.$echarts.init(document.getElementById("myChart"));// 绘制图表console.log(newArray)myChart.setOption({tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: "销量",type: "bar",data: arr,},]});})},},mounted() {this.getData()},
})</script><template><div id="myChart"></div>
</template><style scoped>#myChart {width: 200px;height: 200px;
}
</style>

解释一下,在script代码中,分别引入axios用于从后端接受数据和引入用于绘制图表的defineComponent, toRaw。然后在data中定义从后端接受数据的变量,我这里定义了一个num。需要根据后端返回的数据类型在data定义不同的变量来接受存储。

然后定义一个接受数据并绘图的函数getData(),首先定义一个arr数组来存储接收到的数据(vue中echarts使用规定的,不能直接用this),然后通过toRow()方法来把接收的后端数据存储到arr数组中。然后下面的代码就是定义了一个图表,在data部分用arr来表示图表数据。

可以看看console打印的

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

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

相关文章

东芝工控机维修东芝电脑PC机维修FA3100A

TOSHIBA东芝工控机维修电脑控制器PC机FA3100A MODEL8000 UF8A11M 日本东芝TOSHIBA IA controller维修SYU7209A 001 FXMC12/FXMC11;BV86R-T2GKR-DR7YF-8CPPY-4T3QD; CPU处理单元是可编程逻辑控制器的控制部分。它按照可编程逻辑控制器系统程序赋予的功能接收并存储从编程器键入…

C++知识点总结(22):模拟算法真题 ★★★☆☆《安全警报》

安全警报 1. 审题 题目描述 Z市最大的金融公司&#xff1a;太平洋金融遭到了入侵&#xff0c;一名黑客潜入到了公司中&#xff0c;公司紧急启动安保程序&#xff0c;将大楼封锁&#xff0c;并安排作为安全主管的你对楼层进行搜查。所以你准备写一个程序&#xff0c;输入搜查楼…

基于 LVGL 使用 SquareLine Studio 快速设计 UI 界面

目录 简介注册与软件获取工程配置设计 UI导出源码板级验证更多内容 简介 SquareLine Studio 是一款专业的 UI 设计软件&#xff0c;它与 LVGL&#xff08;Light and Versatile Graphics Library&#xff0c;轻量级通用图形库&#xff09;紧密集成。LVGL 是一个轻量化的、开源的…

K8S之Deployment的介绍和使用

Deployment的理论和实操 Deployment控制器&#xff1a;概念、原理解读概述工作原理 编写Deployment资源清单文件使用案例&#xff1a;创建一个web站点Deployment管理pod&#xff1a;扩容、缩容通过deployment管理应用&#xff0c;实现扩容&#xff0c;把副本数变成3通过deploym…

135 Linux 系统编程12,linux命令重定向,dup 和dup2,fcntl实现dup和dup2 ,进程和程序概念,虚拟内存和物理内存映射关系,pcb进程块详解

一 linux 命令中重定向&#xff0c;使用>实现 通过 大于号 将前面的内容写入到某一个地方 cat main.c > b.txt //cat main 本身的意思是 显示main.c的值&#xff0c;后面加上 > b.txt 会将显示在屏幕上的字符全部写到b.txt中 例子&#xff1a;将 ls -l 的内容 通…

JavaScript最新实现城市级联操作,json格式的数据

前置知识&#xff1a; <button onclick"doSelect()">操作下拉列表</button><hr>学历&#xff1a;<select id"degree"><option value"0">--请选择学历--</option><option value"1">专科<…

配置前端项目到 github-pages

Quickstart for GitHub Pages - GitHub Docs

【Day59】代码随想录之动态规划_647回文子串_516最长回文子序列

文章目录 动态规划理论基础动规五部曲&#xff1a;出现结果不正确&#xff1a; 1. 647回文子串2. 516最长回文子序列 动态规划理论基础 动规五部曲&#xff1a; 确定dp数组 下标及dp[i] 的含义。递推公式&#xff1a;比如斐波那契数列 dp[i] dp[i-1] dp[i-2]。初始化dp数组…

AxureCloud配置文件详细介绍

AxureCloud配置文件详细介绍 原文地址&#xff1a;https://docs.axure.com/axure-cloud/business/custom-settings-json/ 通过修改 customsettings.json 可以修改AxureCloud私有部署的域名、端口、HTTPS、存储目录、是否开启插件等, 默认安装的路径为: C:\Program Files\Axure…

睿易售前初级认证课程R4.2上网行为管理系统-2023练习题答案

1、UAC基础功能包含哪些? A、上网行为审计 B、专业的流控管理 C、内网用户管理 D、用户行为管理 A B C D 2、下列关于RG-UAC系列产品用户认证功能,销售脚本说法正确的是? A、在商场、景区、餐饮门店等公共场所,手机短信实名认证或微信点一点认证上网; B、针对企业用户…

神秘顾客检查:陕西新能源汽车神秘顾客调查应如何做

在汽车行业中&#xff0c;神秘顾客已经成为评估汽车销售与售后服务质量的重要手段。通过神秘顾客的考察&#xff0c;汽车企业可以了解客户需求、发现服务短板&#xff0c;并针对性地提升服务质量。 在进行陕西新能源汽车4S服务神秘顾客调查时&#xff0c;深圳神秘顾客&#xf…

白介素IL-17靶点作用机制、全球在研管线与临床试验结果汇总分析

IL-17与化脓性汗腺炎疾病 化脓性汗腺炎&#xff08;Hidradenitis suppurativa&#xff0c;HS&#xff09;&#xff0c;也称为反痤疮&#xff0c;是一种慢性致残性和衰弱性炎症性疾病&#xff0c;其特征是深部疼痛的结节和脓肿、瘘管、窦道和疤痕&#xff0c;全球发病率约为1%~…

Mysql的储存引擎

储存引擎介绍 1. 文件系统 操作系统存取数据的一种机制 2. 文件系统类型 不管使用什么文件系统&#xff0c;数据内容不会变化 不同的是&#xff0c;存储空间、大小、速度 3. MySQL存储引擎 可以理解为&#xff0c;MySQL的“文件系统”&#xff0c;只不过功能更加强大 4. MySQL…

oracle DG 原理

在Oracle中&#xff0c;什么是DG&#xff1f;DG有哪些优缺点&#xff1f; DG&#xff08;Data Guard&#xff0c;数据卫士&#xff09;不是一个备份恢复的工具&#xff0c;然而&#xff0c;DG却拥有备份的功能&#xff0c;在物理DG下它可以和主库一模一样&#xff0c;但是它存…

安装极狐GitLab Runner并测试使用

本文继【新版极狐安装配置详细版】之后继续 1. 添加官方极狐GitLab 仓库&#xff1a; 对于 RHEL/CentOS/Fedora&#xff1a; curl -L "https://packages.gitlab.com/install/repositories/runner/gitlab-runner/script.rpm.sh" | sudo bash2. 安装最新版本的极狐G…

Hive的Rank排名(rank函数,dense_rank函数,row_numer函数)

一、区别&#xff1a; 三者通常都会配合窗口函数over()&#xff0c;并结合partition by order by xxx来分组排序&#xff0c;即形式使用&#xff1a;function_name over(partition by xxx order by xxx)。首先三者都是产生一个自增序列&#xff0c;不同的是 row_number() 排序…

Django项目使用vue打包前端页面使用教程

一、vue打包&#xff1a; 一般使用 npm run build 进行打包&#xff0c;打包完成后会生成一个dist文件夹 二、修改vue.config.js配置 vue.config..js配置里面增加&#xff1a; assetsDir: static 三、修改Django项目 将Django的static文件夹删除&#xff0c;移动di…

Flink动态分区裁剪

1 原理 1.1 静态分区裁剪与动态分区裁剪 静态分区裁剪的原理跟谓词下推是一致的&#xff0c;只是适用的是分区表&#xff0c;通过将where条件中的分区条件下推到数据源达到减少分区扫描的目的   动态分区裁剪应用于Join场景&#xff0c;这种场景下&#xff0c;分区条件在joi…

Oracle中序列

1. Sequence 定义 在Oracle中可以用SEQUENCE生成自增字段。Sequence序列是Oracle中用于生成数字序列的对象&#xff0c;可以创建一个唯一的数字作为主键。 2. 为什么要用 Sequence 你可能有疑问为什么要使用序列&#xff1f; 不能使用一个存储主键的表并每次递增吗&#xf…

milvus upsert流程源码分析

milvus版本:v2.3.2 整体架构: Upsert 的数据流向: 1.客户端sdk发出Upsert API请求。 import numpy as np from pymilvus import (connections,Collection, )num_entities, dim 4, 3print("start connecting to Milvus") connections.connect("default",…