vue 使用 创建二维数组响应数据 渲染 echarts图标

目前我遇到的情况就是用动态的二维数组数据渲染echarts图标,我们从后端收到的接口一般是个一维数组,需要手动构建并且保证响应式。接下来我做了个案例

一、案例总逻辑

1. 先创建一个vue项目

2. 添加 echarts依赖

3. 模拟数据请求,构建二维数组响应式数据,渲染图表

二、创建一个vite项目(也就是vue项目,但使用的是vite而不是webpack)

1.找到打开vite官网

2. 运行创建命令

yarn create vite

3. 执行yarn install安装项目依赖,之后执行行yarn dev运行项目

三、添加echarts依赖

 1. 搜索echarts官网

 2. 添加依赖

yarn add echarts

三、 模拟数据请求,构建二维数组响应式数据,渲染图表

这里有两个问题值得注意
1. 处理二维数组
2. 异步请求数据:我目前的解决办法是,等数据请求完成再渲染图标。 当然也有第二种方式,就是向渲染空表,等待数据过来后,再执行一次 setOption

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as echarts from 'echarts';
let myChart;
let data = reactive([]);
onMounted(() => {//1. 初始化eharts的渲染节点const chartDom = document.getElementById("boxEcharts");myChart = echarts.init(chartDom);//2. 获取数据(模拟请求数据是异步的)setTimeout(()=>{/*目标数据格式[["score", "amount", "product"],[89.3, 58212, "Matcha Latte"],[57.1, 78254, "Milk Tea"],[74.4, 41032, "Cheese Cocoa"],[50.1, 12755, "Cheese Brownie"],[89.7, 20145, "Matcha Cocoa"],[68.1, 79146, "Tea"],[19.6, 91852, "Orange Juice"],[10.6, 101852, "Lemon Juice"],[32.7, 20112, "Walnut Brownie"],]*///请求回来的数据是一维对象数组let d1 = [{score: "score",amount: "amount",product: "product"},{score: 89.3,amount: 58212,product: "Matcha Latte"},{score: 57.1,amount: 78254,product: "Milk Tea"},{score: 74.4,amount: 41032,product: "Cheese Cocoa"}];/*处理成二维数组*/let arr = [];      //定义一个数组,让它里面直接装数组d1.forEach(item=>{arr.push([item.score,item.amount,item.product]);});data.push(...arr); //将这个二维数组解构为 一维数组放进 定义好的响应数组中renderEcharts();},1500)
});//3. 渲染图表
const renderEcharts = () => {const option = {dataset: {source: data,},grid: { containLabel: true },xAxis: { name: "amount" },yAxis: { type: "category" },visualMap: {orient: "horizontal",left: "center",min: 10,max: 100,text: ["High Score", "Low Score"],// Map the score column to colordimension: 0,inRange: {color: ["#65B581", "#FFCE34", "#FD665F"],},},series: [{type: "bar",encode: {// Map the "amount" column to X axis.x: "amount",// Map the "product" column to Y axisy: "product",},},],};option && myChart.setOption(option,true);
};
</script><template><div id="boxEcharts"></div>
</template><style scoped>
#boxEcharts{width: 40vw;height: 40vh;
}
</style>

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

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

相关文章

DevicData-D-XXXXXXXX勒索病毒数据恢复|金蝶、用友、管家婆、OA、速达、ERP等软件数据库恢复

引言&#xff1a; 在数字时代&#xff0c;数据安全成为一项至关重要的挑战。DevicData-D-XXXXXXXX勒索病毒&#xff08;以下简称DevicData病毒&#xff09;是这场战斗中的新敌人&#xff0c;它能够以毁灭性的方式加密您的数据&#xff0c;迫使您在数据和时间之间做出艰难的选择…

59. 螺旋矩阵 II

题目描述 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]]示例 2&#xff1a; 输入&#xff1a;n …

AcWing 288. 休息时间,《算法竞赛进阶指南》,环形与后效性处理

288. 休息时间 - AcWing题库 在某个星球上&#xff0c;一天由 N 个小时构成&#xff0c;我们称 0 点到 1 点为第 1 个小时、1 点到 2 点为第 2 个小时&#xff0c;以此类推。 在第 i 个小时睡觉能够恢复 Ui 点体力。 在这个星球上住着一头牛&#xff0c;它每天要休息 B 个小…

基于SpringBoot的房屋租赁管理系统的设计与实现

目录 前言 一、技术栈 二、系统功能介绍 屋主管理 房屋信息管理 房屋租赁公告 租用订单管理 房屋信息管理 保洁管理 房屋信息 租用订单管理 取消订单管理 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前言 互联网发展至今&#xff0c;无论是其理论还是…

【面试题精讲】如果一个类没有声明构造方法,该程序能正确执行吗?

“ 有的时候博客内容会有变动&#xff0c;首发博客是最新的&#xff0c;其他博客地址可能会未同步,认准https://blog.zysicyj.top ” 首发博客地址[1] 面试题手册[2] 系列文章地址[3] 1. 什么是构造方法? 构造方法&#xff08;Constructor&#xff09;是一种特殊的方法&#x…

Centos 服务器 MySQL 8.0 快速开启远程访问

环境&#xff1a; MySQL 8.0&#xff08;低版本会有些不同&#xff09;&#xff0c; Rocky Linux 9.0&#xff08;CentOS&#xff09; 直接上干货&#xff0c;相信大家看到这个文章的时候都已经安装完了。 1. 先从服务器上使用 root 进行登录&#xff08;刚安装完默认只能本地…

java Spring Boot在配置文件中关闭热部署

之前更大家一起搭建了一个热部署的开发环境 但是 大家要清楚一个情况 我们线上程序运行突然内部发生变化这是不可能的。 所以 他就只会对我们开发环境有效 是否开启 我们可以通过 application配置文件来完成 我这里是yml格式的 参考代码如下 spring:devtools:restart:enabled…

OpenWrt使用Privoxy插件修改UA

OpenWrt使用privoxy修改UA 1.安装privoxy插件 SSH连接到路由器 更新插件列表 update opkg安装插件 opkg install privoxy luci-app-privoxy luci-i18n-privoxy-zh-cn重启路由器 2.配置privoxy 打开配置页面 文件和目录 访问和控制 转发 杂项 日志 编辑配置 浏览器打开 …

代码随想录算法训练营第五十八天 | 动态规划 part 16 | 583. 两个字符串的删除操作、72. 编辑距离

目录 583. 两个字符串的删除操作思路思路2代码 72. 编辑距离思路代码 583. 两个字符串的删除操作 Leetcode 思路 dp[i][j]&#xff1a;以i-1为结尾的字符串word1&#xff0c;和以j-1位结尾的字符串word2&#xff0c;想要达到相等&#xff0c;所需要删除元素的最少次数。递推公…

云原生Kubernetes:简化K8S应用部署工具Helm

目录 一、理论 1.HELM 2.部署HELM2 3.部署HELM3 二、实验 1.部署 HELM2 2.部署HELM3 三、问题 1.api版本过期 2.helm初始化报错 3.pod状态为ImagePullBackOff 4.helm 命令显示 no repositories to show 的错误 5.Helm安装报错 6.git命令报错 7.CentOS 7 下git c…

volatile关键字使用总结

先说结论 1. volatile关键字可以让编译器层面减少优化&#xff0c;每次使用时必须从内存中取数据&#xff0c;而不是从cpu缓存或寄存器中获取 2. volatile关键字不能完全禁止指令重排&#xff0c;准确地说是两个volatile修饰的变量之间的命令不会进行指令重排 3. 使用volati…

模板方法模式,基于继承实现的简单的设计模式(设计模式与开发实践 P11)

文章目录 实现举例应用钩子 Hook 模板方法模式是一种基于继承的设计模式&#xff0c;由两部分构成&#xff1a; 抽象父类&#xff08;一般封装了子类的算法框架&#xff09;具体的实现子类 实现 简单地通过继承就可以实现 举例 足球赛 和 篮球赛 都有 3 个步骤&#xff0c…

常用Redis界面化软件

对于Redis的操作&#xff0c;前期有过介绍【Centos 下安装 Redis 及命令行操作】。而在Redis的日常开发调试中&#xff0c;可使用可视化软件方便进行操作。 本篇主要介绍Redis可视化的两款工具&#xff1a;Redis Desktop Manager和AnotherRedisDesktopManager。 1、Redis Desk…

C# 图解教程 第5版 —— 第1章 C# 和 .NET 框架

文章目录 1.1 在 .NET 之前1.2 .NET 时代1.2.1 .NET 框架的组成1.2.2 大大改进的编程环境 1.3 编译成 CIL1.4 编译成本机代码并执行1.5 CLR1.6 CLI1.7 各种缩写1.8 C# 的演化1.9 C# 和 Windows 的演化&#xff08;*&#xff09; 1.1 在 .NET 之前 MFC&#xff08;Microsoft Fou…

组合模式,宏指令和普通指令的聚合应用(设计模式与开发实践 P10)

文章目录 定义举例抽象类文件系统常用 程序设计中有一些 事物是由相似的子事物 构成的例子 定义 回顾过去的命令模式&#xff0c;有一些命令里面包含了一个序列的操作&#xff0c;如果你玩魔兽世界或者类似的 MMO 游戏&#xff0c;里面你会用到 宏指令&#xff0c;就是一个指…

[python 刷题] 4 Median of Two Sorted Arrays

[python 刷题] 4 Median of Two Sorted Arrays 题目&#xff1a; Given two sorted arrays nums1 and nums2 of size m and n respectively, return the median of the two sorted arrays. The overall run time complexity should be O ( l o g ( m n ) ) O(log (mn)) O(lo…

设计模式探索:从理论到实践的编码示例 (软件设计师笔记)

&#x1f600;前言 设计模式&#xff0c;作为软件工程领域的核心概念之一&#xff0c;向我们展示了开发过程中面对的典型问题的经典解决方案。这些模式不仅帮助开发者创建更加结构化、模块化和可维护的代码&#xff0c;而且也促进了代码的复用性。通过这篇文章&#xff0c;我们…

Linux目录权限的亿点点细节

在linux系统中用户对于目录的rwx权限意味着什么&#xff1f; 文章目录 rwx r 可以显示目录的内容&#xff0c;比如ls w 可以创建或删除文件&#xff0c;比如touch, rm x 可以进入到目录内&#xff0c;比如cd

Springboot+vue的开放性实验室管理系统(有报告)。Javaee项目,springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的开放性实验室管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的开放性实验室管理系统&#xff0c;采用M&#xff08…

rust流程控制

一、分支 &#xff08;一&#xff09;if 1.if 语法格式 if boolean_expression { }例子 fn main(){let num:i32 5;if num > 0 {println!("正数");} }条件表达式不需要用小括号。 条件表达式必须是bool类型。 2.if else 语法格式 if boolean_expression { } …