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

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

使用Matplotlib创建炫酷的3D散点图:数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例(带样式)应用场景在数据科学和可视化领域,三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...