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

OpenClaw安全实验室:SecGPT-14B+Metasploit自动化漏洞验证环境

OpenClaw安全实验室&#xff1a;SecGPT-14BMetasploit自动化漏洞验证环境 1. 为什么需要自动化漏洞验证环境 作为安全研究员&#xff0c;我每天要处理大量漏洞扫描报告。最头疼的不是发现漏洞&#xff0c;而是验证这些漏洞的真实性——手动复现每个漏洞需要反复切换工具、整理…...

Thorium浏览器深度解析:如何打造比Chromium快30%的高性能浏览器?

Thorium浏览器深度解析&#xff1a;如何打造比Chromium快30%的高性能浏览器&#xff1f; 【免费下载链接】thorium Chromium fork named after radioactive element No. 90. Source code and Linux releases. Windows/MacOS/ARM builds served in different repos, links are t…...

从分子动力学模拟到结合自由能分析:gmx_MMPBSA实战指南

从分子动力学模拟到结合自由能分析&#xff1a;gmx_MMPBSA实战指南 【免费下载链接】gmx_MMPBSA gmx_MMPBSA is a new tool based on AMBERs MMPBSA.py aiming to perform end-state free energy calculations with GROMACS files. 项目地址: https://gitcode.com/gh_mirrors…...

2026年亲测有效:合肥无人机培训案例分享

行业痛点分析随着无人机技术的飞速发展&#xff0c;其在各个领域的应用越来越广泛。然而&#xff0c;无人机行业也面临着一些核心技术挑战。首先&#xff0c;无人机的操作和维护需要专业的知识和技能&#xff0c;而市场上缺乏足够的专业人才。根据行业数据显示&#xff0c;目前…...

终极指南:Android AdvancedRecyclerView 低版本兼容处理与 API 14+适配方案

终极指南&#xff1a;Android AdvancedRecyclerView 低版本兼容处理与 API 14适配方案 【免费下载链接】android-advancedrecyclerview RecyclerView extension library which provides advanced features. (ex. Googles Inbox app like swiping, Play Music app like drag and…...

Wan2.2-I2V-A14B开源镜像实测:xFormers+FlashAttention-2加速推理35%+

Wan2.2-I2V-A14B开源镜像实测&#xff1a;xFormersFlashAttention-2加速推理35% 1. 镜像概述与核心价值 Wan2.2-I2V-A14B是一款专为文生视频任务优化的私有部署镜像&#xff0c;它让高质量视频生成变得触手可及。这个镜像最吸引人的地方在于&#xff0c;它已经为你准备好了所…...

Windows下用CMake和VS编译gRPC 1.72.0,我踩过的那些坑(附完整依赖库列表)

Windows平台下gRPC 1.72.0编译实战&#xff1a;从CMake配置到VS链接错误的系统化解法 最近在Windows平台上手动编译gRPC 1.72.0的经历可谓是一波三折。作为一个长期在Linux环境下工作的开发者&#xff0c;这次回到Windows平台进行gRPC编译&#xff0c;遇到了不少特有的挑战。本…...

Ostrakon-VL-8B多模态能力解析:图文联合理解在零售场景的体现

Ostrakon-VL-8B多模态能力解析&#xff1a;图文联合理解在零售场景的体现 1. 零售场景中的多模态挑战 现代零售行业面临着复杂的视觉理解需求。传统计算机视觉系统通常只能完成单一任务&#xff0c;比如商品识别或文字提取&#xff0c;而无法同时理解图像中的多种元素及其相互…...

PowerPaint-V1 Gradio场景应用:从家庭照片修复到工作素材处理

PowerPaint-V1 Gradio场景应用&#xff1a;从家庭照片修复到工作素材处理 1. 引言&#xff1a;图像修复的日常革命 周末整理老照片时&#xff0c;发现珍贵的全家福上有几处划痕&#xff1b;准备工作报告时&#xff0c;急需一张专业配图却找不到合适素材&#xff1b;电商运营需…...

【Guava】并发编程ListenableFutureService

在技术领域&#xff0c;我们常常被那些闪耀的、可见的成果所吸引。今天&#xff0c;这个焦点无疑是大语言模型技术。它们的流畅对话、惊人的创造力&#xff0c;让我们得以一窥未来的轮廓。然而&#xff0c;作为在企业一线构建、部署和维护复杂系统的实践者&#xff0c;我们深知…...