vue3+echarts:Vue中使用echarts从后端获取数据并赋值显示

news2024/11/24 14:55:04
//由于前后端交互,所以使用axios发送请求
const Count = ref(null); //设备种类数值
const Name = ref(null); //设备种类名称
//设备种类 饼图
const pieChart = () => {
  const getpieChart = echarts.init(document.getElementById("deviceKind"));
  // 创建图标
  getpieChart.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "25%",
      right: "right",
      textStyle: {
        color: "rgba(217,215,218,1.000)",
      },
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "40",
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: null,
      },
    ],
  });
  //echarts异步加载,获取后端数据
  CenterOverviewType().then((res) => {
    if (res.status === 200) {
      //将二维数组拆分
      Count.value = res.data.data.deviceTypeCount;
      Name.value = res.data.data.deviceTypeName;
      for (const key in Count.value) {
        deviceChartsData.push({
          name: Name.value[key],
          value: Count.value[key],
        });
      }
      //饼图重新赋值data
      getpieChart.setOption({
        series: [
          {
            data: deviceChartsData, //赋值
          },
        ],
      });
    }
  });
};

上一篇文章,

uniapp踩坑之项目:简易版不同角色显示不一样的tabbar和页面-CSDN博客文章浏览阅读29次。uniapp踩坑之项目:简易版不同角色显示不一样的tabbar和页面。在uni_modules文件夹创建底部导航cc-myTabbar文件夹,在cc-myTabbar文件夹创建components文件夹,在components文件夹创建cc-myTabbar.vue组件。显示第几个tabbar,0是首页 1是财务 2是司机。pages下创建三个不同用户身份的“我的”页面。在utils文件夹创建tabBar.js。pages.json里指定路径。在单页面引入底部导航组件。https://blog.csdn.net/weixin_43928112/article/details/136041617

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

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

相关文章

如何使用Docker部署DashDot服务器仪表盘并结合cpolar实现公网访问

📑前言 本文主要是使用Docker部署DashDot服务器仪表盘并结合cpolar实现公网访问的文章,如果有什么需要改进的地方还请大佬指出⛺️** 🎬作者简介:大家好,我是青衿🥇 ☁️博客首页:CSDN主页放风…

Leetcode—60. 排列序列【困难】

2024每日刷题&#xff08;113&#xff09; Leetcode—60. 排列序列 算法思想 实现代码 class Solution { public:string getPermutation(int n, int k) {vector<int> nums(n);// f[i] i!vector<int> f(n 1, 1); string ans;iota(nums.begin(), nums.end(), 1…

一文带你了解量子计算的力量

作为技术人员&#xff0c;我们知道有有四项技术一直在进行着巨大的进步——区块链、人工智能、物联网和量子计算机。本文中&#xff0c;我们将讨论量子计算机&#xff0c;包括它的含义&#xff0c;如何工作&#xff0c;它们将如何使用等。 什么是量子计算机&#xff1f; 量子计…

蓝桥杯Web应用开发-浮动与定位

浮动与定位 浮动布局比较灵活&#xff0c;不易控制&#xff0c;而定位可以控制元素的过分灵活性&#xff0c;给元素一个具体的空间和精确的位置。 浮动 我们使用 float 属性指定元素沿其容器的左侧或右侧放置&#xff0c;浮动布局常见取值如下&#xff1a; • left&#xff0…

2023:AI疯狂进化年

嘿&#xff0c;大家好&#xff01;让我们一起来回顾一下这疯狂的 2023 年吧&#xff01;记得那个二月初吗&#xff1f;ChatGPT 上线了&#xff0c;然后呢&#xff1f;短短两个月&#xff0c;用户数量就像火箭一样突破了 1 亿&#xff01;这速度&#xff0c;简直比超级赛亚人还快…

谷歌seo搜索引擎优化教程有吗?

教程&#xff0c;教学&#xff0c;指南&#xff0c;这些东西哪里都有&#xff0c;尤其是关于seo相关方面的&#xff0c;这些可以说到处都是&#xff0c;能把谷歌seo这个关键词做上去的&#xff0c;可以说就是实力的证明了&#xff0c;在这里我们说一个无论是老手还是新手都应该…

(五)elasticsearch 源码之查询流程分析

https://www.cnblogs.com/darcy-yuan/p/17039526.html 1.概述 上文我们讨论了es&#xff08;elasticsearch&#xff0c;下同&#xff09;索引流程&#xff0c;本文讨论es查询流程&#xff0c;以下是基本流程图 2.查询流程 为了方便调试代码&#xff0c;笔者在电脑上启动了了…

通义千问上线春节新应用,AI帮你免费拍全家福

2月5日&#xff0c;春节将至年味渐浓&#xff0c;阿里云通义千问APP上线多项免费新应用&#xff0c;涵盖全家福、拜新年、万物成龙等图像生成的新玩法&#xff0c;共提供超300套照片模板&#xff0c;用户上传照片即可生成全家福、团圆照、拜年照、千里江山主题照&#xff1b;此…

引用大佬讲座谈 2100万日活FPS手游怎样做优化?百元机稳定30帧、适配98%机型

大型手机游戏对不同手机机型的适配&#xff0c;始终是贯穿手游发展过程的挑战。尤其在前几年&#xff0c;高配置的智能机还没有普及开的时候&#xff0c;产品优化是研发环节的重中之重。而作为对于网络状况、数据传输和服务器架构等有着极高要求的游戏品类&#xff0c;FPS更是优…

Javaweb之SpringBootWeb案例之 登录功能的详细解析

1. 登录功能 1.1 需求 在登录界面中&#xff0c;我们可以输入用户的用户名以及密码&#xff0c;然后点击 "登录" 按钮就要请求服务器&#xff0c;服务端判断用户输入的用户名或者密码是否正确。如果正确&#xff0c;则返回成功结果&#xff0c;前端跳转至系统首页面…

重学Java 13.面向对象.1

在熟悉的事物中循环 ——24.2.7 一、static关键字 1.static关键字的介绍以及基本使用 1.概述&#xff1a;static是一个静态关键字 2.使用&#xff1a; a.修饰一个成员变量&#xff1a; static 数据类型 变量名 b.修饰一个方法&#xff1a; 修饰符 static 返回值类型 方法名&am…

2024年,前景最被看好的十大行业

哪些行业在未来更具增长潜力&#xff1f;资本市场给出的答案&#xff0c;可以从上市公司的“行业市盈率”看出&#xff0c;但传统的行业市盈率方法需要改造。 “市盈率”简称PE&#xff0c;是股票价格与每股收益之间的比值。比如&#xff0c;某股票价格10元&#xff0c;某年的…

Vue中对虚拟DOM的理解

作为现代前端开发中的主流框架之一&#xff0c;Vue.js是一个非常流行的JavaScript框架&#xff0c;其核心概念之一就是虚拟DOM&#xff08;Virtual DOM&#xff09;。在本篇文章中&#xff0c;我们将深入探讨Vue中虚拟DOM的概念&#xff0c;并讨论为什么它在前端开发中如此重要…

小白水平理解面试经典题目_二维数组类LeetCode 2966 Divide Array【排序算法实现】

2966 将数组划分为具有最大差值的数组 小白渣翻译&#xff1a; 给定一个大小为 n 的整数数组 nums 和一个正整数 k 。 将数组分成一个或多个大小为 3 的数组&#xff0c;满足以下条件&#xff1a; nums 的每个元素都应该位于一个数组中。一个数组中任意两个元素之间的差异小…

读分布式稳定性建设指南文档

最近还是在做一些和稳定性建设相关的事情&#xff0c;找到一份《分布式稳定性建设指南》文档&#xff0c;摘抄了其中的重点&#xff0c;以便后续回顾方便&#xff0c;一直没上传好资源&#xff0c;我之后再试试&#xff0c;原文内容质量非常高。 大家可以先看一级目录即可&…

c#cad 创建-圆(二)

运行环境 vs2022 c# cad2016 调试成功 一、代码说明 这段代码是一个AutoCAD插件&#xff0c;用于在模型空间中创建一个圆形。 首先&#xff0c;我们需要定义一个命令类CreateCircleCommand&#xff0c;并在命名空间CreateCircleInCad中声明。 在CreateCircleCommand类中&a…

闲聊电脑(6)装个 Windows(二)

闲聊电脑&#xff08;6&#xff09;装个 Windows&#xff08;二&#xff09; 夜深人静&#xff0c;万籁俱寂&#xff0c;老郭趴在电脑桌上打盹&#xff0c;桌子上的小黄鸭和桌子旁的冰箱又开始窃窃私语…… 小黄鸭&#xff1a;冰箱大哥&#xff0c;上次说的镜像文件到底长啥样…

【Ftp客户端】FTPBox starter

Github&#xff1a; https://github.com/lihewei7/ftpbox-spring-boot-starterGitee&#xff1a; https://gitee.com/lihewei7/ftpbox-spring-boot-starter 文章目录 FTPBox是什么&#xff1f;Maven依赖使用APIuploaddownloadexistslistexecuteexecuteWithoutResult 配置单主机…

【C++】类与对象(四)——初始化列表|explicit关键字|static成员|友元|匿名对象

前言&#xff1a; 初始化列表&#xff0c;explicit关键字&#xff0c;static成员&#xff0c;友元&#xff0c;匿名对象 文章目录 一、构造函数的初始化列表1.1 构造函数体内赋值1.2 初始化列表 二、explicit关键字三、static成员四、友元4.1 友元函数4.2 友元类 五、内部类六、…

生成树技术华为ICT网络赛道

9.生成树 目录 9.生成树 9.1.生成树技术概述 9.2.STP的基本概念及工作原理 9.3.STP的基础配置 9.4.RSTP对STP的改进 9.5.生成树技术进阶 9.1.生成树技术概述 技术背景&#xff1a;二层交换机网络的冗余性与环路 典型问题1&#xff1a;广播风暴 典型问题2&#xff1a;MA…