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

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

Rust 异步编程

Rust 异步编程 引言 Rust 是一种系统编程语言,以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天,异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

基于Java+MySQL实现(GUI)客户管理系统

客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息&#xff0c;对客户进行统一管理&#xff0c;可以把所有客户信息录入系统&#xff0c;进行维护和统计功能。可通过文件的方式保存相关录入数据&#xff0c;对…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

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

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