echarts饼图封装
1. 组件
<template>
<div
:id="id"
class="main"
:style="{ width: width, height: height }"
:ref="id"
></div>
</template>
<script>
import * as echarts from "echarts";
export default {
name: "roseChart",
data() {
return {
myEchart: null,
};
},
props: {
width: {
type: String,
default: "100%",
},
height: {
type: String,
default: "100%",
},
// 数据（数组）
typeAnalysisData: {
type: Array,
default: () => [],
},
id: {
type: String,
default: "roseChart",
},
// 是否显示提示（方框）
legendShow: {
type: Boolean,
default: true,
},
// 上面距离
legendTop: {
type: String,
default: "auto",
},
// 左面距离
legendLeft: {
type: String,
default: "auto",
},
// 排列方式
legendOrient: {
type: String,
default: "vertical",
},
// 字体颜色（方框）
legendColor: {
type: String,
default: "#8493c3",
},
// 字体大小（方框）
legendFontSize: {
type: String,
default: "16px",
},
titleFontSize: {
type: Number,
default: 34,
},
titleColor: {
type: String,
default: "#8493c3",
},
// 饼图的半径
radius: {
type: Array,
default: () => [],
},
// 文本标签
labelShow: {
type: Boolean,
default: true,
},
labelPosition: {
type: String,
default: "center",
},
// 文本字体大小
labelFontSize: {
type: Number,
default: 14,
},
// 文本字体行高
lineHeight: {
type: Number,
default: 15,
},
// 文本字体颜色
labelColor: {
type: String,
default: "#8493c3",
},
activeFontSize: {
type: Number,
default: 15,
},
activeColor: {
type: String,
default: "#8493c3",
},
// 中心
center: {
type: Array,
default: () => [],
},
// 标题
titleShow: {
type: Boolean,
default: true,
},
// 主标题
text: {
type: String,
default: "主标题",
},
// 副标题
subtext: {
type: String,
default: "副标题",
},
// 标题位置（上下）
titleTop: {
type: String,
default: "center",
},
// 标题位置（左右）
titleLeft: {
type: String,
default: "center",
},
},
methods: {
drawChart() {
let timer = null;
timer = setTimeout(() => {
if (
this.myEchart != null &&
this.myEchart != "" &&
this.myEchart != undefined
) {
this.myEchart.dispose(); //销毁
}
if (!this.$refs[this.id]) return;
this.myEchart = echarts.init(this.$refs[this.id]);
let option = {
title: {
show: this.titleShow,
// x: "44%", //X坐标
// y: "35%", //Y坐标
top: this.titleTop,
left: this.titleLeft,
text: this.text, //主标题
subtext: this.subtext, //副标题
textStyle: {
//标题样式
fontSize: 20,
fontWeight: "bolder",
color: "rgb(113, 116, 123)",
// formatter: "",
// marginTop: this.marginTop,
// marginLeft: this.marginLeft,
// transfrom: "translate(-50%,-50%)",
},
subtextStyle: {
//副标题样式
fontSize: 14,
fontWeight: "bolder",
color: "rgb(113, 116, 123)",
// transform: "translate(-50%,-50%)",
// marginTop: this.marginTop,
// marginLeft: this.marginLeft,
},
},
legend: {
show: this.legendShow,
orient: this.legendOrient,
top: this.legendTop,
left: this.legendLeft,
textStyle: {
color: this.legendColor,
fontSize: this.legendFontSize,
},
},
series: [
{
name: "Nightingale Chart",
type: "pie",
radius: this.radius,
center: this.center,
// roseType: "area",
itemStyle: {
normal: {
color: function (colors) {
var colorList = [
"rgb(250, 133, 133)",
"rgb(108, 200, 121)",
];
return colorList[colors.dataIndex];
},
borderRadius: 0,
},
},
label: {
show: this.labelShow,
alignTo: "edge",
formatter: "{name|{b}}\n{time|{d} %}",
minMargin: 5,
edgeDistance: 10,
lineHeight: this.lineHeight,
rich: {
time: {
fontSize: this.labelFontSize,
color: this.labelColor,
},
name: {
fontSize: this.labelFontSize,
color: this.labelColor,
},
},
},
labelLine: {
length: 15,
length2: 0,
maxSurfaceAngle: 80,
},
// label: {
// normal: {
// show: true,
// textStyle: {
// color: this.labelColor,
// fontSize: this.labelFontSize,
// },
// formatter: "{per|{d}%}",
// rich: {
// }
// },
// },
data: this.typeAnalysisData,
},
],
};
this.myEchart.setOption(option);
}, 500);
},
},
mounted() {
this.drawChart();
},
watch: {
typeAnalysisData: {
handler(newName, oldName) {
this.$nextTick(() => {
this.drawChart();
window.addEventListener("resize", this.drawChart);
});
},
deep: true,
},
},
destroyed() {
window.removeEventListener("resize", this.drawChart);
},
};
</script>
<style lang="scss" scoped>
</style>
2.内容
（1）标签
<rose-chart
:typeAnalysisData="dataList"
:color="color"
:labelShow="false"
:radius="radius"
:center="center"
legendLeft="right"
legendTop="middle"
></rose-chart>
（2）数据
// 饼状图
dataList: [
{ value: 1048, name: "异常设备" },
{ value: 735, name: "正常设备" },
],
color: ["#3c4a73", "#00a0e9", "#090", "#f00", "#f00"],
radius: ["50%", "60%"],
center: ["50%", "50%"],
相关文章：
echarts饼图封装
1. 组件 <template> <div :id"id" class"main" :style"{ width: width, height: height }" :ref"id" ></div> </template> <script> import * as echarts from "echarts"; export default { …...
Web3.0 教学基础一
目录 什么是web3.0 Web 1.0 概念 Web 2.0 概念 Web 3.0 概念 Web 3.0 的优势 什么是DAPP 什么是web3.0 在了解web3.0之前我们需要了解下前面的web1.0与web2.0。 Web 1.0 概念 Web1.0是万维网最初的版本，而静态网站则被认为是全网Web 1.0的起源，用…...
body使用渐变色无效的原因之一：html没有设置高度
直接在css文件中对body设置渐变色： body {height: 100%;background: -webkit-linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);background: -moz-linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);background: -o-linear-gradient(120deg, #a1c4fd 0%, #c2e…...
Python3 函数实例及演示
函数是组织好的，可重复使用的，用来实现单一，或相关联功能的代码段。 函数能提高应用的模块性，和代码的重复利用率。我们已经知道Python提供了许多内建函数，比如print()。但也可以自己创建函数，这被叫做用户…...
HTB打靶(Active Directory 101 Multimaster)
Nmap扫描 Starting Nmap 7.93 ( https://nmap.org ) at 2023-02-08 02:52 EST Stats: 0:00:51 elapsed; 0 hosts completed (1 up), 1 undergoing SYN Stealth Scan SYN Stealth Scan Timing: About 55.85% done; ETC: 02:54 (0:00:40 remaining) Nmap scan report for 10.129…...
漏洞预警|Apache Sling JCR Base 存在JNDI注入漏洞
棱镜七彩安全预警 近日网上有关于开源项目Apache Sling JCR Base 存在JNDI注入漏洞，棱镜七彩威胁情报团队第一时间探测到，经分析研判，向全社会发起开源漏洞预警公告，提醒相关安全团队及时响应。 项目介绍 Apache Sling是一个基于…...
【学习笔记】DFA的构造
虽然平时做过但是考场上肯定还是不会，不过没事干还是写一下吧 Myhill-Nerode\text{Myhill-Nerode}Myhill-Nerode 定理：给定一个语言LLL，定义在字符串上一个关系为，若对于所有的zzz，xzxzxz在LLL中当且仅当yzyzyz在LLL中…...
MyBatis 之二（增、删、改操作）
文章目录1. 修改操作1.1 在 mapper（interface）里面添加修改方法的声明1.2 在 XMl 中添加 <update> 标签和修改的 sql 代码1.3 在 UserMapper 中右键 Generate 点击 Test 生成 update 测试类2. 删除操作2.1 在 mapper （interface&#x…...
28k入职腾讯测试岗那天，我哭了，这5个月付出的一切总算没有白费~
先说一下自己的个人情况，计算机专业，16年普通二本学校毕业，经历过一些失败的工作经历后，经推荐就进入了华为的测试岗，进去才知道是接了个外包项目，不太稳定的样子，可是刚毕业谁知道什么外包不外…...
【surfaceflinger源码分析】surfaceflinger进程的消息驱动模型
概述 对于surfaceflinger大多数人都知道它的功能是做图形合成的，用英语表示就是指composite。其大致框图如下: 各个Android app将自己的图形画面通过surface为载体通过AIDL接口(Binder IPC)传递到surfaceflinger进程surfaceflinger进程中的composition engine与HW…...
「架构师」001计算机组成与体系结构
文章目录 前言一、计算机结构1.1 计算机组成结构1.2 CPU组成1.3 冯诺依曼结构与哈佛结构二、存储结构2.1 层次化存储结构2.2 Cache三、数据传输控制方式四、总线五、CISC与RISC六、流水线七、校验码八、嵌入式前言 本文主要介绍计算机组成与体系结构。 一、计算机结构 1.1 计…...
既然有HTTP协议，为什么还要有RPC
既然有HTTP协议，为什么还要有RPC？ 从TCP聊起 作为一个程序员，假设我们需要在A电脑的进程发一段数据到B电脑的进程，我们一般会在代码里使用socket进行编程。 这时候，我们可选项一般也就TCP和UDP二选一。TCP可靠&…...
【新2023】华为OD机试 - 选座位（Python）
华为 OD 清单查看地址：blog.csdn.net/hihell/category_12199275.html 选座位 题目 疫情期间需要大家保证一定的社交距离 公司组织开交流会议，座位有一排共N个座位 编号分别为[0...n-1] 要求员工一个接着一个进入会议室 并且还可以在任何时候离开会议室 每当一个员工进入时…...
数据分析与SAS学习笔记4
INPUT语句：格式修饰符： “:” 修饰符。表示从下一个非空格列读入数据，直到:1 遇到再下一个空格列； 2 读到预先定义的变量长度； 3 数据行结束。哪个先出现就在哪儿结束。 “&” 修饰符。表示从下一个非空格列读入…...
Xepor：一款针对逆向工程和安全分析的Web路由框架
关于Xepor Xepor是一款专为逆向分析工程师和安全研究专家设计的Web路由框架，该工具可以为研究人员提供类似Flask API的功能，支持以人类友好的方式拦截和修改HTTP请求或HTTP响应信息。 该项目需要与mitmproxy一起结合使用，用户可以使用Xepor…...
Hadoop核心组成和生态系统简介
一、Hadoop的概念 Hadoop是一个由Apache基金会所开发的分布式系统基础架构。用户可以在不了解分布式底层细节的情况下，开发分布式程序。充分利用集群的威力进行高速运算和存储。Hadoop实现了一个分布式文件系统（ Distributed File System）&am…...
Flutter-Charts_painter大数据量绘制性能优化-数据收敛
Flutter-Charts_painter大数据量绘制性能优化-数据收敛 1、背景介绍 HRV测量仪器上传的数据，每秒有250个数据，业务上需要测量180秒，预计有3w-5w个数据点需要绘制到折线图上去。Charts_painter绘制这么大的数据是时候会有些卡顿，…...
使用 GeForce Experience 更新 NVIDIA GPU 显卡驱动
使用 GeForce Experience 更新 NVIDIA GPU 显卡驱动1. NVIDIA GeForce Experience 2. 驱动程序 -> 检查更新文件 3. 下载 如果有可用的新版驱动的话，点击后方的 [下载] 按钮即可。 4. 安装 [快速安装] 按照默认设置安装驱动，[自定义安装] 可以自行…...
Java泛型的＜? super T＞,＜? extend T＞的区别
？ extends T ? extends T 描述了通配符上界, 即具体的泛型参数需要满足条件: 泛型参数必须是 T 类型或它的子类, 例如: List<? extends Number> numberArray new ArrayList<Number>(); // Number 是 Number 类型的 List<? extends Number>…...
如何做出好看的Excel可视化图表？
可视化死磕excel是不行的，作为数据分析行业的偷懒大户，分享一些我在可视化工具上的使用心得，总结了三大类：快速出图类、专业图表类、高端大屏类。个人经验，大家按需采纳： 一、快速出图类 如果你只是因为偶…...
智能吸吹一体式方案设计特点
一、家用吸吹一体吸尘器方案研发设计要素： 1.小巧的机身设计，一手掌握，无论是床底、沙发下还是家具缝隙之中都能够使用。 2.无线，插电两用，在家方便可插电使用。内置可充电锂电池，充满电也可无线使用。 3.采…...
CSDN 编辑器 Marddown 语法备忘
原文链接：https://blog.csdn.net/blogdevteam/article/details/103478461 本文对其二次加工，增加渲染样式、补充例程、添加未收录的常用语法。 CSDN Markdown 编辑器遵循 CommonMark spec 语法规范。 快捷键 撤销：Ctrl/Command Z 重做&…...
回归预测 | MATLAB实现NGO-BiLSTM北方苍鹰算法优化双向长短期记忆网络多输入单输出回归预测
回归预测 | MATLAB实现NGO-BiLSTM北方苍鹰算法优化双向长短期记忆网络多输入单输出回归预测 目录回归预测 | MATLAB实现NGO-BiLSTM北方苍鹰算法优化双向长短期记忆网络多输入单输出回归预测预测效果基本介绍程序设计参考资料预测效果 基本介绍 Matlab实现NGO-BiLSTM北方苍鹰算法…...
Linux——操作系统安装
个人简介：云计算网络运维专业人员，了解运维知识，掌握TCP/IP协议，每天分享网络运维知识与技能。个人爱好: 编程，打篮球，计算机知识个人名言：海不辞水，故能成其大；山不辞石…...
AFLNET lightftp项目报错解决方法
在学习AFLNET的时候，本人尝试对示例项目中的lightftp进行fuzz,而后出现如下报错： AFLNet - the states hashtable should always contain an entry of the initial state 在github项目issue里看到了有人的问题和我一摸一样，Stack Overflow里…...
av 146 003
121. 团队章程的目标是什么? A. 使团队正规化，以便能够清楚地了解资源分配和参与情况 B. 创造一个团队可以自我管理和自我指导的环境 C. 创造一个环境，使团队成员能够尽其所能地工作 D. 创造一种团队归属感，促进包容性和协作性的行为 12…...
干了1年“点点点”，自己辞职了，下一步是继续干测试还是转开发？
最后后台有个粉丝向我吐槽，不知道怎么选择了....下面就他的情况说说怎么选择？ 目前已经提桶跑路，在大工厂里混了半年初级低级功能测试经验，并没有什么用。测试培训班来的。从破山村贫困户贫困专项出去的，学校上海的。…...
国产技术迎来突破，14nm芯片横空出世，低代码也有好消息
芯片，被称为工业时代的“粮食”，小到手机手环，大到飞机轮船，几乎各个行业都不离开芯片的支持，其重要性不言而喻。而我国在这一领域一直较为薄弱。 一、“芯片之路坎坷” 由于国内半导体芯片市场底子薄弱、没有主动权…...
使用clickhouse-backup工具备份clickhouse数据库
工具官网：https://github.com/AlexAkulov/clickhouse-backup/dockerhub工具官网：https://hub.docker.com/r/alexakulov/clickhouse-backup注意：这个工具只支持MergeTree 系列表引擎一、clickhouse在容器外的备份和恢复若clickhouse装在容器外…...
python cartopy绘制扇形区域图/cartopy绘制北极部分区域
问题 当绘图时，往往并不需要绘制整块区域，而是想聚焦于局部地区，此时我们需要绘制扇形图。 在cartopy中，只提供普通正方形的框架，如果我们需要其他，边界，需要自己去绘制，最常见的是…...
手机网站设计思路/chatgpt网址
Ceph-dash是一款图形化展现Ceph状态的工具，并且部署起来非常简单（在monitor节点上进行部署），操作如下：# mkdir -p /ceph-dash # cd /ceph-dash/ # ls app config.influxdb.json Dockerfile s…...
dw中旅游网站怎么做/网站制作大概多少钱
看到oracle官方文档说oracle 11g dataguard在物理standby机器上出于open状态也可以应用redo,所以就在本地试验了下,确实如此,这样既可以应用redo也可以进行数据查询和数据库的备份.既解决了数据的容灾也解决了主数据库的压力.Oracle dataguard 简介 Dataguard分为2类:物理stan…...
银川网站建设价格/百度推广关键词和创意
1. 支持手机、pad等移动设备远程控制功能。2、支持DLNA、Airplay、QPaly等协议。3、Cortex-A9四核，7寸电容触摸屏，1024*600高清分辨屏，标配通用的网络接口，内置wifi无线连接。4、功率：35W*45、4声道输出，支…...
独立站怎么推广/百度页面
本文作者陈恒捷是TesterHome社区主编，第十届MTSC大会上海站-开源专场出品人。先后在PP助手、PPmoney、荔枝等公司从事测试效能提升相关工作，在测试技术及效率提升方面有丰富的经验积累。 背景 流量录制回放近几年已经越来越火。如阿里开放的 doom 、滴滴…...
西青网站文化建设/福建百度推广开户
2019独角兽企业重金招聘Python工程师标准>>> set uid 这个权限是二进制可执行文件的，它使文件在可执行阶段具有文件所有者的权限。比如 passwd命令，它是用来修改密码的，使用命令 ls -l /usr/bin/passwd查看passwd命令的权限&#…...
男女做爰高清免费视频网站/网络营销的方式与手段
上次看到按键精灵，更新了支持socket通讯的插件，于是兴冲冲的去看了下，结果有点失望。然后学了2天的lua脚本，自己开发了一个socket的插件。下面把完整代码贴上来--设置消息内容function QMPlugin.SendMsg(msg)contentMsg msgend--…...