当前位置: 首页 > news >正文

在移动端开发图表,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" 都表示美国&#xff0c;但它们的使用场景和背景略有不同。以下是关于为什么这些名称可以合在一起表示美国的详细解释&#xff1a; 1. "United States of America" 全称&a…...

OpenCV基于均值漂移算法(pyrMeanShiftFiltering)的水彩画特效

1、均值漂移算法原理 pyrMeanShiftFiltering算法结合了均值迁移&#xff08;Mean Shift&#xff09;算法和图像金字塔&#xff08;Image Pyramid&#xff09;的概念&#xff0c;用于图像分割和平滑处理。以下是该算法的详细原理&#xff1a; 1.1 、均值迁移&#xff08;Mean …...

【C++】拷贝构造函数与运算符重载

写在前面 拷贝构造函数、赋值运算符重载、取地址运算符都是属于类的默认成员函数&#xff01; 默认成员函数是程序猿不显示声明定义&#xff0c;编译器会中生成。 在程序编写中&#xff0c;我们也经常使用拷贝的方式来获取到对应的值&#xff0c;例如整形变量拷贝int a 0; i…...

2024年开发语言热度排名

随着技术的不断发展和变化&#xff0c;编程语言的热度也在不断演变。2024年即将到来&#xff0c;我们有必要回顾和展望当前和未来的开发语言市场。本文将基于多个因素&#xff0c;包括行业需求、社区支持、流行度以及新兴趋势&#xff0c;对2024年的开发语言热度进行排名和分析…...

CryptoMamba:利用状态空间模型实现精确的比特币价格预测

“CryptoMamba: Leveraging State Space Models for Accurate Bitcoin Price Prediction” 论文地址&#xff1a;https://arxiv.org/pdf/2501.01010 Github地址&#xff1a;https://github.com/MShahabSepehri/CryptoMamba 摘要 预测比特币价格由于市场的高波动性和复杂的非线…...

MQTTX客户端使用

一、MQTT服务器&#xff08; emqx &#xff09;搭建 (1) 下载服务器MQTT Broker 从https://www.emqx.com/zh/downloads/broker/5.3.0/emqx-5.3.0-windows-amd64.zip下载MQTT Broker。 这里我使用的windows系统&#xff0c;下载对应版本工具&#xff1a;emqx-5.3.0-windows-a…...

网管平台(进阶篇):路由器的管理实践

在当今数字化时代&#xff0c;路由器作为网络连接的核心设备&#xff0c;其管理对于确保网络的稳定、高效和安全至关重要。本文旨在深入探讨路由器管理的重要性、基本设置步骤、高级功能配置以及日常维护&#xff0c;帮助读者构建一个高效且安全的网络环境。 一、路由器管理的…...

基于微信小程序的智能停车场管理系统设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…...

【Vue】父组件向子组件传递参数;子组件向父组件触发自定义事件

父组件向子组件传递参数 方法一&#xff1a;props 在 Vue 中&#xff0c;父组件向子组件传递数据主要通过props来实现&#xff0c;以下是具体的步骤&#xff1a; 父组件中传递数据 在父组件中&#xff0c;当需要调用子组件 AddSampleDialog 时&#xff0c;通过 v-bind 或其…...

搜广推校招面经七

抖音推荐算法 一、广告系统中的数据流处理方法&#xff0c;怎么避免延迟回流问题 延迟回流问题是指&#xff0c;实时系统&#xff08;如广告点击预估&#xff09;中&#xff0c;历史数据未及时更新或发生延迟&#xff0c;导致系统的实时预测偏离实际情况。避免延迟回流的方法有…...

Leetcode 518. 零钱兑换 II 动态规划

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

【EI 会议征稿】第四届材料工程与应用力学国际学术会议(ICMEAAE 2025)

2025 4th International Conference on Materials Engineering and Applied Mechanics 重要信息 大会官网&#xff1a;www.icmeaae.com 大会时间&#xff1a;2025年3月7-9日 大会地点&#xff1a;中国西安 截稿时间&#xff1a;2025年1月24日23:59 接受/拒稿通知&#xf…...

集合的线程安全

在多线程环境中&#xff0c;Java 的集合框架&#xff08;Collection Framework&#xff09;面临着线程安全的问题。当多个线程同时访问同一个集合对象时&#xff0c;可能会导致数据不一致、丢失更新或程序崩溃等严重问题。因此&#xff0c;在并发编程中确保集合操作的安全性至关…...

《深入理解Mybatis原理》Mybatis中的缓存实现原理

一级缓存实现 什么是一级缓存&#xff1f; 为什么使用一级缓存&#xff1f; 每当我们使用MyBatis开启一次和数据库的会话&#xff0c;MyBatis会创建出一个SqlSession对象表示一次数据库会话。 在对数据库的一次会话中&#xff0c;我们有可能会反复地执行完全相同的查询语句&…...

C# 数据拟合教程:使用 Math.NET Numerics 的简单实现

C# 数据拟合实战&#xff1a;使用 Math.NET Numerics 快速实现 引言 在科学计算、工程建模或数据分析中&#xff0c;数据拟合是一个非常重要的技术。无论是线性拟合还是非线性拟合&#xff0c;借助适当的工具都可以快速解决问题。本文将向您展示如何使用 C# 和强大的数值计算…...

C# 中对 Task 中的异常进行捕获

以下是在 C# 中对 Task 中的异常进行捕获的几种常见方法&#xff1a; 方法一&#xff1a;使用 try-catch 语句 你可以使用 try-catch 语句来捕获 Task 中的异常&#xff0c;尤其是当你使用 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代码

导言 如上图所示&#xff0c;进入SimpleFOC官网&#xff0c;点击Github下载源代码。 如上图所示&#xff0c;找到仓库。 comom代码的移植后&#xff0c;simpleFOC的移植算是完成一大半。simpleFOC源码分为如下5个部分&#xff0c;其中communication是跟simpleFOC上位机通讯&a…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

AI Agent与Agentic AI:原理、应用、挑战与未来展望

文章目录 一、引言二、AI Agent与Agentic AI的兴起2.1 技术契机与生态成熟2.2 Agent的定义与特征2.3 Agent的发展历程 三、AI Agent的核心技术栈解密3.1 感知模块代码示例&#xff1a;使用Python和OpenCV进行图像识别 3.2 认知与决策模块代码示例&#xff1a;使用OpenAI GPT-3进…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

Android第十三次面试总结(四大 组件基础)

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

【JVM】Java虚拟机(二)——垃圾回收

目录 一、如何判断对象可以回收 &#xff08;一&#xff09;引用计数法 &#xff08;二&#xff09;可达性分析算法 二、垃圾回收算法 &#xff08;一&#xff09;标记清除 &#xff08;二&#xff09;标记整理 &#xff08;三&#xff09;复制 &#xff08;四&#xff…...