在移动端开发图表,uniapp+echarts,需要特殊处理,使用renderjs
1.首先要创建一个组件warning,用来装图表(我排除绿色那段代码为我的需求,不是必要代码)
<template>
<div class="task_container">
<div class="pop_body">
<div class="footer">
<warningchild ref="childRef" class="jiuming" id="chartwaring" width="100%" height="100%"
:option="option13">
</warningchild>
</div>
</div>
</div>
</template>
<script>
import warningchild from '@/components/echarts/warningchild'
import {
mapGetters
} from 'vuex';
export default {
components: {
warningchild
},
data() {
return {
activeButton: 0,
option13: {},
option131: {},
option132: {},
option133: {},
namearray: [],
valuearray: [],
buttons: ['今日', '昨日', '7天', '30天'],
reslist: [],
reslist1: [],
reslist2: [],
reslist3: [],
datalist: [],
datalist1: [],
datalist2: [],
datalist3: [],
data: [{
value: 20,
// legendname: "种类01",
name: "处理中",
// itemStyle: { color: "#8d7fec" }
itemStyle: {
borderColor: 'rgba(255, 255, 255, 0.1)',
// shadowBlur: 10,
borderRadius: 80,
color: "#4A75FF",
shadowColor: 'rgba(255, 255, 255, 1)'
}
},
{
value: 19,
legendname: "种类03",
name: "待处理",
itemStyle: {
color: "#01B4FF",
borderColor: 'rgba(255, 255, 255, 0.1)',
// shadowBlur: 10,
borderRadius: 80,
shadowColor: 'rgba(142, 152, 241, 1)'
},
},
{
value: 24,
legendname: "",
name: "审核中",
itemStyle: {
color: "#23EABD",
borderColor: 'rgba(255, 255, 255, 0.1)',
// shadowBlur: 10,
borderRadius: 80,
shadowColor: 'rgba(142, 152, 241, 1)'
},
},
{
value: 32,
legendname: "",
name: "已处理",
itemStyle: {
color: "#FF7482",
borderColor: 'rgba(255, 255, 255, 0.1)',
// shadowBlur: 10,
borderRadius: 80,
shadowColor: 'rgba(142, 152, 241, 1)'
},
},
]
}
},
methods: {
getcount() {
console.log('sisisisiis')
this.$http.get(`///`
// {
// params: {
// eventStatus: buttonIndex
// }
// },
).then(res => {
this.reslist = res.data.result
console.log("warning", res.data.result)
this.modifiedCountList()
this.option13 = {
title: [
],
series: [{
// name: "标题",
type: "pie",
center: ["50%", "50%"],
// zuoyou/shangxia
radius: ["60%", "65%"],
width: 'auto',
height: 150,
clockwise: false, //饼图的扇区是否是顺时针排布
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: "outter",
// formatter: function(parms) {
// return parms.datalist.name;
// },
},
},
labelLine: {
normal: {
length: 5,
length2: 3,
smooth: true,
},
},
itemStyle: { // 此配置
normal: {
borderWidth: 3,
borderColor: 'rgba(0, 0, 0, 0.5)',
},
},
data: this.datalist
}, ],
}
this.$refs.childRef.changeonlys(this.option13);
})
},
handleButtonClick(buttonIndex) {
this.activeButton = buttonIndex;
if (this.activeButton == 0) {
this.getcount()
} else if (
this.activeButton == 1
) {
this.getcount1()
} else if (this.activeButton == 2) {
this.getcount2()
} else if (this.activeButton == 3) {
this.getcount3()
}
// this.getcount()
// this.getcount1()
// this.getcount2()
// this.getcount3()
},
modifiedCountList() {
// 定义不同警报级别的 itemStyle 设置
const alertStyles = {
'橙色': {
borderColor: 'rgba(255, 255, 255, 0.1)',
borderRadius: 80,
color: "#FE7B41",
shadowColor: 'rgba(255, 255, 255
相关文章:
在移动端开发图表,uniapp+echarts,需要特殊处理,使用renderjs
1.首先要创建一个组件warning,用来装图表(我排除绿色那段代码为我的需求,不是必要代码) <template> <div class="task_container"> <div class="pop_body"> <div class="footer"> <warning…...
SpringBoot之LazyInitializationBeanFactoryPostProcessor类源码学习
源码分析 /**** author Andy Wilkinson* author Madhura Bhave* author Tyler Van Gorder* author Phillip Webb* since 2.2.0* see LazyInitializationExcludeFilter** 主要用于延迟初始化 Bean 的配置。它通过修改 BeanFactory 的配置来确保某些 Bean 在实际需要时才进行初始…...
United States of America三种表示
"United States of America", "United States", 和 "America" 都表示美国,但它们的使用场景和背景略有不同。以下是关于为什么这些名称可以合在一起表示美国的详细解释: 1. "United States of America" 全称&a…...

OpenCV基于均值漂移算法(pyrMeanShiftFiltering)的水彩画特效
1、均值漂移算法原理 pyrMeanShiftFiltering算法结合了均值迁移(Mean Shift)算法和图像金字塔(Image Pyramid)的概念,用于图像分割和平滑处理。以下是该算法的详细原理: 1.1 、均值迁移(Mean …...

【C++】拷贝构造函数与运算符重载
写在前面 拷贝构造函数、赋值运算符重载、取地址运算符都是属于类的默认成员函数! 默认成员函数是程序猿不显示声明定义,编译器会中生成。 在程序编写中,我们也经常使用拷贝的方式来获取到对应的值,例如整形变量拷贝int a 0; i…...
2024年开发语言热度排名
随着技术的不断发展和变化,编程语言的热度也在不断演变。2024年即将到来,我们有必要回顾和展望当前和未来的开发语言市场。本文将基于多个因素,包括行业需求、社区支持、流行度以及新兴趋势,对2024年的开发语言热度进行排名和分析…...

CryptoMamba:利用状态空间模型实现精确的比特币价格预测
“CryptoMamba: Leveraging State Space Models for Accurate Bitcoin Price Prediction” 论文地址:https://arxiv.org/pdf/2501.01010 Github地址:https://github.com/MShahabSepehri/CryptoMamba 摘要 预测比特币价格由于市场的高波动性和复杂的非线…...

MQTTX客户端使用
一、MQTT服务器( emqx )搭建 (1) 下载服务器MQTT Broker 从https://www.emqx.com/zh/downloads/broker/5.3.0/emqx-5.3.0-windows-amd64.zip下载MQTT Broker。 这里我使用的windows系统,下载对应版本工具:emqx-5.3.0-windows-a…...
网管平台(进阶篇):路由器的管理实践
在当今数字化时代,路由器作为网络连接的核心设备,其管理对于确保网络的稳定、高效和安全至关重要。本文旨在深入探讨路由器管理的重要性、基本设置步骤、高级功能配置以及日常维护,帮助读者构建一个高效且安全的网络环境。 一、路由器管理的…...

基于微信小程序的智能停车场管理系统设计与实现(LW+源码+讲解)
专注于大学生项目实战开发,讲解,毕业答疑辅导,欢迎高校老师/同行前辈交流合作✌。 技术范围:SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容:…...
【Vue】父组件向子组件传递参数;子组件向父组件触发自定义事件
父组件向子组件传递参数 方法一:props 在 Vue 中,父组件向子组件传递数据主要通过props来实现,以下是具体的步骤: 父组件中传递数据 在父组件中,当需要调用子组件 AddSampleDialog 时,通过 v-bind 或其…...

搜广推校招面经七
抖音推荐算法 一、广告系统中的数据流处理方法,怎么避免延迟回流问题 延迟回流问题是指,实时系统(如广告点击预估)中,历史数据未及时更新或发生延迟,导致系统的实时预测偏离实际情况。避免延迟回流的方法有…...

Leetcode 518. 零钱兑换 II 动态规划
原题链接:Leetcode 518. 零钱兑换 II 可参考官解:零钱兑换 II 和这个解答:[Java/Python3/C]动态规划:拆分零钱兑换子问题(嵌套循环的秘密)【图解】 此题需要仔细想象和Leetcode 377. 组合总和 Ⅳ 动态规划…...

【EI 会议征稿】第四届材料工程与应用力学国际学术会议(ICMEAAE 2025)
2025 4th International Conference on Materials Engineering and Applied Mechanics 重要信息 大会官网:www.icmeaae.com 大会时间:2025年3月7-9日 大会地点:中国西安 截稿时间:2025年1月24日23:59 接受/拒稿通知…...
集合的线程安全
在多线程环境中,Java 的集合框架(Collection Framework)面临着线程安全的问题。当多个线程同时访问同一个集合对象时,可能会导致数据不一致、丢失更新或程序崩溃等严重问题。因此,在并发编程中确保集合操作的安全性至关…...

《深入理解Mybatis原理》Mybatis中的缓存实现原理
一级缓存实现 什么是一级缓存? 为什么使用一级缓存? 每当我们使用MyBatis开启一次和数据库的会话,MyBatis会创建出一个SqlSession对象表示一次数据库会话。 在对数据库的一次会话中,我们有可能会反复地执行完全相同的查询语句&…...
C# 数据拟合教程:使用 Math.NET Numerics 的简单实现
C# 数据拟合实战:使用 Math.NET Numerics 快速实现 引言 在科学计算、工程建模或数据分析中,数据拟合是一个非常重要的技术。无论是线性拟合还是非线性拟合,借助适当的工具都可以快速解决问题。本文将向您展示如何使用 C# 和强大的数值计算…...
C# 中对 Task 中的异常进行捕获
以下是在 C# 中对 Task 中的异常进行捕获的几种常见方法: 方法一:使用 try-catch 语句 你可以使用 try-catch 语句来捕获 Task 中的异常,尤其是当你使用 await 关键字等待任务完成时。 using System; using System.Threading.Tasks;class …...

Android车机DIY开发之软件篇(九)默认应用和服务修改
Android车机DIY开发之软件篇(九)默认应用和服务修改 Car默认应用位置 ~/packages/apps/Car 增加APP 1.增加 XXXX.app 和Android.mk 2. 修改~/build/make/target/product/handheld_system_ext.mk Android默认APK位置 ~/packages/apps 1.增加文件夹 app和mk文件 2.build/mak…...

SimpleFOC01|基于STM32F103+CubeMX,移植核心的common代码
导言 如上图所示,进入SimpleFOC官网,点击Github下载源代码。 如上图所示,找到仓库。 comom代码的移植后,simpleFOC的移植算是完成一大半。simpleFOC源码分为如下5个部分,其中communication是跟simpleFOC上位机通讯&a…...

网络编程(Modbus进阶)
思维导图 Modbus RTU(先学一点理论) 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议,由 Modicon 公司(现施耐德电气)于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
设计模式和设计原则回顾
设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。
1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj,再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

GitFlow 工作模式(详解)
今天再学项目的过程中遇到使用gitflow模式管理代码,因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存,无论是github还是gittee,都是一种基于git去保存代码的形式,这样保存代码…...

力扣热题100 k个一组反转链表题解
题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...
多模态图像修复系统:基于深度学习的图片修复实现
多模态图像修复系统:基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型(Stable Diffusion Inpainting)实现图像修复功能,结合文本描述和图片输入,对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...