当前位置: 首页 > 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…...

FCEUX终极指南:从怀旧游戏到专业调试的完整NES模拟器教程

FCEUX终极指南&#xff1a;从怀旧游戏到专业调试的完整NES模拟器教程 【免费下载链接】fceux FCEUX, a NES Emulator 项目地址: https://gitcode.com/gh_mirrors/fc/fceux FCEUX是一款功能强大的开源NES模拟器&#xff0c;让你在现代电脑上完美重温经典红白机游戏。无论…...

Unity安卓打包实战指南:从环境配置到APK生成全链路排错

1. 这不是“入门教程”&#xff0c;而是一份写给真实开发现场的生存指南你打开Unity&#xff0c;新建一个3D项目&#xff0c;拖进一个Cube&#xff0c;点击Play——它动了。你松了口气&#xff0c;觉得“Unity好像也没那么难”。但当你把APK打包发给测试同事&#xff0c;对方回…...

半导体元件(二极管/三极管/MOS管/IC)损坏诊断全解

半导体元件&#xff08;二极管、三极管、MOS 管、集成电路&#xff09;是 PCB 的核心功能单元&#xff0c;对过压、过流、ESD、高温极度敏感&#xff0c;损坏后直接导致电路功能失效、短路烧板。很多工程师维修时盲目更换芯片&#xff0c;不仅成本高&#xff0c;还易误判。​一…...

配置OpenClaw Agent使用Taotoken作为后端模型提供商

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 配置OpenClaw Agent使用Taotoken作为后端模型提供商 基础教程类&#xff0c;指导希望使用OpenClaw等Agent工具的开发者&#xff0c…...

taotoken如何帮助ubuntu开发者应对大模型api的频繁更新与版本迭代

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken如何帮助Ubuntu开发者应对大模型API的频繁更新与版本迭代 对于在Ubuntu环境下进行开发的工程师而言&#xff0c;大模型API…...

Claude SWOT分析(内部风控文档流出版):3类高危使用场景+2个监管红线预警

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;Claude SWOT分析&#xff08;内部风控文档流出版&#xff09;&#xff1a;3类高危使用场景2个监管红线预警 高危使用场景识别 在企业级AI应用中&#xff0c;Claude模型若未经严格风控适配&#xff0c;…...

Qri高级功能:如何使用JSON Schema验证和描述数据集结构

Qri高级功能&#xff1a;如何使用JSON Schema验证和描述数据集结构 【免费下载链接】qri youre invited to a data party! 项目地址: https://gitcode.com/gh_mirrors/qr/qri Qri是一个强大的开源数据协作工具&#xff0c;它提供了丰富的功能来帮助用户管理、共享和验证…...

深度解析HS2-HF Patch:从技术框架到创作工具链的完整升级方案

深度解析HS2-HF Patch&#xff1a;从技术框架到创作工具链的完整升级方案 【免费下载链接】HS2-HF_Patch Automatically translate, uncensor and update HoneySelect2! 项目地址: https://gitcode.com/gh_mirrors/hs/HS2-HF_Patch 你是否曾因Honey Select 2的原版体验受…...

网飞成立 AI 动画工作室,开启流媒体“原生 AI 制片时代”,中外布局逻辑有何不同?

1. Netflix“偷跑”在影视巨头关于 AIGC 的军备竞赛中&#xff0c;Netflix 再次加速。据外媒 TheVerge 报道&#xff0c;网飞于今年 3 月成立了名为 "INKubator" 的工作室&#xff0c;这是全球流媒体巨头中首个以生成式人工智能为核心的动画制作部门。此动作引发全球…...

3步快速解密中兴光猫配置:ZET工具终极实战指南

3步快速解密中兴光猫配置&#xff1a;ZET工具终极实战指南 【免费下载链接】ZET-Optical-Network-Terminal-Decoder 项目地址: https://gitcode.com/gh_mirrors/ze/ZET-Optical-Network-Terminal-Decoder 中兴光猫配置解密工具是每个网络管理员必备的神器&#xff01;Z…...