echarts-进度条

echarts-进度条


在这里插入图片描述

  option = {
       title: {
           text:"xxxx统计",
           left: '1%',
           top: '0%',
           textStyle: {
               color: "#2E3033",
               fontSize:18,
           },
       },
       tooltip: {
           axisPointer: {
               type: "shadow",
           },
       },
       grid: {
           top: '9%',
           left: "12%",
           right:"22%",
           bottom:"0%",
       },
       xAxis: {
           type: 'value',
           splitLine: {
               show: false //去掉辅助线
           },
           axisLine: {
               show: false,
           },
           axisLabel: {
               show: false,
           }

       },
       yAxis: {
           type: 'category',
           data: ['栋','xx','xx','xx','xx','xx','xx'],//y轴数据
           splitLine: {
               show: false //去掉辅助线
           },
           axisLine: {
               show: false,
           },
           axisTick: {
               show: false
           },
           axisLabel: {
               color: '#2E3033',
               fontSize:14,
           }
       },
       series: [{
           data: [566228.07,877228.07,955228.07,436228.07,498228.07,326228.07,854228.07],
           type: 'bar',
           showBackground: true,
           backgroundStyle: {
               color: '#BDE2EF',
               borderRadius:5,
           },
           barWidth: 10,
           itemStyle: {
               normal: {
                   color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                           offset: 0,
                           color: '#25B9EB'
                       },
                       {
                           offset: 1,
                           color: '#25B9EB'
                       }
                   ], false),
                   barBorderRadius: [5, 5, 5, 5],
               }
           },
           label: {
               normal: {
                   show: true,
                   position: [270, 0],   //value的位置
                   color: '#8E949D', //值的颜色
                   fontSize: 14,
               }
           }
       }]
   };


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/103429.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

基于springboot实现企业客户信息反馈平台管理系统项目【项目源码+论文说明】

基于springboot实现企业客户信息反馈平台管理系统演示 摘要 网络的广泛应用给生活带来了十分的便利。所以把企业客户信息反馈管理与现在网络相结合,利用java技术建设企业客户信息反馈平台,实现企业客户信息反馈的信息化。则对于进一步提高企业客户信息反…

6.6 Elasticsearch(六)京淘项目改造

文章目录 1.项目准备2.基础配置2.1 添加pom.xml依赖2.2 yml配置es服务器地址列表 3.具体实现3.1 item实体类封装3.2 添加接口3.3 SearchController 4.search.jsp界面4.1 搜索内容展示4.2 高亮内容样式设置4.3 搜索框内容回填4.4 添加上下页按钮 1.项目准备 我们切换回到此前的…

基于ElasticSearch+Vue实现简易搜索

基于ElasticSearchVue实现简易搜索 一、模拟数据 产品名称描述价格库存数量品牌名称智能手表智能手表,具有健康跟踪和通知功能。199.991000TechWatch4K智能电视4K分辨率智能电视,提供出色的画质。699.99500VisionTech无线耳机降噪无线耳机,…

ChineseChess2

中国象棋:黑将,红帅双炮,只要红帅中间露头怎么走怎么赢 卡主黑将的走位,控制住就好了 ChineseChess-CSDN博客

17 结构型模式-享元模式

1 享元模式介绍 2 享元模式原理 3 享元模式实现 抽象享元类可以是一个接口也可以是一个抽象类,作为所有享元类的公共父类, 主要作用是提高系统的可扩展性. //* 抽象享元类 public abstract class Flyweight {public abstract void operation(String extrinsicState); }具体享…

2023了,是时候使用pnpm了!

2023了,是时候使用pnpm了! Excerpt 2023了,是时候使用pnpm了! 什么是pnpm pnpm代表performant npm(高性能的npm),同npm和Yarn,都属于Javascript包管理安装工具,它较npm和…

智慧垃圾站:AI视频智能识别技术助力智慧环保项目,以“智”替人强监管

一、背景分析 建设“技术先进、架构合理、开放智能、安全可靠”的智慧环保平台,整合环境相关的数据,对接已建业务系统,将环境相关数据进行统一管理,结合GIS技术进行监测、监控信息的展现和挖掘分析,实现业务数据的快速…

php 数组基础/练习

数组 练习在最后 数组概述 概述与定义 数组中存储键值对 数组实际上是一个有序映射 key-value,可将其当成真正的数组、列表(向量)、散列表、字典、集合、栈、队列等 数组中的元素可以是任意类型的数据对象(可以嵌套数组&#…

视频号视频提取工具,操作简单!一键搞定

在当下信息爆炸的时代,视频成为了人们获取信息、娱乐和交流的重要方式。而随着视频创作的普及,越来越多的人希望能够从各类视频中提取出有价值的素材和片段,以便用于自己的创作需求。然而,对于大多数人来说,费时费力地…

模拟线程死锁现象:两个线程同时抢两个互斥锁

下面业务逻辑的分析 1.如果 flag 为 T,线程 A 就会先得到 / 持有 o1 对象锁,然后尝试去获取 o2 对象锁 2.如果线程 A 得不到 o2 对象锁,就会 Blocked 3.如果 flag 为 F ,线程 B 就会先得到 / 持有 o2 对象锁,然后尝试去…

Mac M1下使用Colima替代docker desktop搭建云原生环境

文章目录 为什么不使用docker desktop1.docker desktop卸载2.docker、docker compose安装3.colima安装3.1获取镜像地址3.2将下载好的iso文件放到colima指定路径3.3重新执行colima start 4.minikukekubernetes安装5.关闭minikube Mac M1下使用Colima替代docker desktop搭建云原生…

SOFAStack软件供应链安全产品解析——SCA软件成分分析

近年来,软件供应链安全相关攻击事件呈快速增长态势,造成的危害也越来越严重,为了保障软件供应链安全,各行业主管单位也出台了诸多政策及技术标准。基于内部多年的实践,蚂蚁数科金融级云原生PaaS平台SOFAStack发布完整的…

保护云数据安全的关键环节是什么?

云数据安全是维护数据隐私和保护关键信息的关键一环。在云中存储和处理数据提供了巨大的便利性和效率,但同时也伴随着风险。本文将介绍保护云数据的关键环节是什么! 1、数据加密:在传输和存储数据时使用强加密是保护数据的基本步骤。确保数据在云中存储时…

Iterator迭代器

一、基本概念 Iterator迭代器是一种接口,为不同的数据结构提供一种访问机制,即for … of 循环。当使用for…of循环遍历某种数据结构时,该循环会自动去寻找 Iterator 接口。任何数据结构只要部署Iterator接口,就可以完成遍历操作(…

SpringBoot中对Spring AOP的实现

文章目录 SpringBoot中对Spring AOP的实现AOP简介引入依赖AOP体系与概念编写AOP切面类启动SpringBoot项目然后访问controller控制器对环绕通知放行execution表达式的含义通过注解方式定义切点 SpringBoot中对Spring AOP的实现 AOP简介 AOP (Aspect Oriented Programming), 面…

智能视频监控平台EasyCVR接口调用注意事项汇总!

TSINGSEE青犀视频监控汇聚平台EasyCVR可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安防视频监控的能力&…

前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)

首先看效果! 比如轮播图时红色,那么背景的底色也是红色,轮播图时黄色,背景的底色也是黄色,这就是根据轮播图的图片切换,而改变背景颜色随轮播图颜色一致 话不多说,直接上代码!非常简…

Python使用psycopg2读取PostgreSQL的geometry字段出现二进制乱码

1、问题 读取geometry字段出现二进制乱码 查询语句: sql "select * from public"Note: 这种写法在PostgreSQL中直接查询, 没有问题,不会报错。 但是在Python中查询,如果导出的geom还是一长串的geometry 格式的话, …

【计网 EMail】计算机网络 EMail协议详解:中科大郑烇老师笔记 (五)

目录 0 引言1 电子邮件EMail1.1 组成1.2 SMTP协议1.3 案例:Alice给Bob发送报文1.4 SMTP总结1.5 邮件报文格式1.6 POP3协议和IMAP协议 🙋‍♂️ 作者:海码007📜 专栏:计算机四大基础专栏📜 其他章节&#xf…

计算机网络(谢希仁)第八版课后题答案(第一章)

1.计算机网络可以向用户提供哪些服务 连通性:计算机网络使上网用户之间可以交换信息,好像这些用户的计算机都可以彼此直接连通一样。 共享:指资源共享。可以是信息、软件,也可以是硬件共享。 2.试简述分组交换的要点 采用了存储转发技术。把报文(要发…