Vue3+Echarts+饼图环形图

embedded/2024/9/24 7:50:45/

记得给容器宽高 

<div id="leftChartguawang" style="height: 28vh"></div>

 配置函数

javascript">const leftChartguawang = () => {const chartBox = echarts.init(document.getElementById('leftChartguawang'))let datas = [[{ name: '居民节能建筑', value: 20 },{ name: '居民非节能建筑', value: 20 },{ name: '非居民节能建筑', value: 30 },{ name: '非居民非节能建筑', value: 30 }]]const option = {title: {text: '挂网总面积\n \n422.61(万㎡)',left: 'center',top: '40%',textStyle: {color: '#999',fontWeight: 'normal',fontSize: 14}},series: datas.map(function (data, idx) {var top = idx * 50return {type: 'pie',radius: [60, 100],top: top + '%',height: '100%',left: 'center',width: 500,itemStyle: {borderColor: '#fff',borderWidth: 1},label: {alignTo: 'edge',formatter: '{name|{b}}\n{time|{c} %}',minMargin: 5,edgeDistance: 10,lineHeight: 15,rich: {time: {fontSize: 10,color: '#999'}}},labelLine: {length: 15,length2: 0,maxSurfaceAngle: 80},labelLayout: function (params: any) {const isLeft = params.labelRect.x < chartBox.getWidth() / 2const points = params.labelLinePointspoints[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.widthreturn {labelLinePoints: points}},data: data}})}option && chartBox.setOption(option)window.addEventListener('resize', function () {chartBox.resize()})
}leftChartguawang()


http://www.ppmy.cn/embedded/94922.html

相关文章

利用单张/多张图内参数标定 OpenCV Python

E:\OpenCV_py_ws\opencv相机标定\图片\calib-JT.py #!/usr/bin/env python # -*- coding: utf-8 -*- # @Time : 2023/11/21 16:05 # @File : calib.py # @Software: import cv2 import numpy as np import glob from datetime import datetimenp.set_printoptions(supp…

不依靠for循环,Python如何对列表进行去重并保留排列顺序

在python中&#xff0c;我们想要从列表中删除重复元素&#xff0c;并且保留去重之前的先后排列顺序。在这里&#xff0c;我们本文不谈论for循环&#xff0c;我们来谈论其他的更优方法——OrderedDict和set。 要知道&#xff0c;OrderedDict可以通过保留插入顺序来实现元素去重…

系统架构师学习大纲(四)

一、培养沟通和领导技能 1、与团队成员和利益相关者沟通 沟通是一种重要的技能&#xff0c;特别是在领导角色中。一个有效的领导者应能够与团队成员和其他利益相关者进行清晰、明确地沟通&#xff0c;要在沟通方面培养技能。 学习倾听&#xff1a;倾听是沟通的重要组成部分。…

Leetcode每日刷题之 1089. 复写零(C++)

1. 题目解析 由题目可知&#xff0c;我们需要将给定数组中的所有零复写一遍&#xff0c;并且保证不能超出数组长度&#xff0c;还不可以开辟新的数组&#xff0c;要在原数组的位置直接操作 2. 算法原理 1. 由题目我们可以将问题简化为找出最终复写完成数组的最后一个元素&#…

Linux Shell基础常用脚本命令及应用案例

文章目录 常用的 Shell 命令1. 变量2. 注释3. 输出4. 输入5. 条件判断6. 循环7. 函数8. 运算9. 流程控制10. 文件和目录操作11. 错误处理 Shell 脚本应用案例1. Hello World 脚本2. 创建系统账户及设置密码3. 日志文件备份4. 一键部署 LNMP 环境5. 检查磁盘空间6. 自动安装软件…

linux HBA驱动中scsi_host_template .shost_attrs

在Linux内核中&#xff0c;SCSI&#xff08;Small Computer System Interface&#xff09;是一种用于连接计算机和外围设备的接口。scsi_host_template是一个结构体&#xff0c;用于定义SCSI主机&#xff08;host adapter&#xff09;的属性和操作。这个模板用于初始化SCSI主机…

3. MQTT协议的架构

1 MQTT协议的层次结构 MQTT协议的架构设计简洁&#xff0c;主要由三个部分组成&#xff1a;客户端、代理和消息。理解这些组件及其交互是掌握MQTT协议的关键。 1.1 客户端&#xff08;Client&#xff09; 客户端是MQTT协议的核心组成部分&#xff0c;分为发布者和订阅者两种…

【vue3|第20期】vue3中Vue Router路由器工作模式

日期&#xff1a;2024年8月6日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xff…