echarts制作两个柱状图

let colorList=['#02ce8b','#ffbe62','#f17373'];
let data1 = [90,80,70,50]
option = {
title:[{ // 第一个标题text: '环保检测', // 主标题textStyle: { // 主标题样式color: '#333',fontWeight: 'bold',fontSize: 16},left: '20%', // 定位到适合的位置top: '10%', // 定位到适合的位置},{ // 第一个标题text: '水保三色评价得分表', // 主标题textStyle: { // 主标题样式color: '#333',fontWeight: 'bold',fontSize: 16},left: '70%', // 定位到适合的位置top: '10%', // 定位到适合的位置},],legend: [{show:true,x:'20%',y:'20%',},],tooltip: {},grid: [{ left: '5%', top: '25%', width: '40%', height: '50%' },{ right: '5%', top: '25%', width: '40%', height: '50%' },],xAxis: [{ gridIndex: 0,type: 'category',data: ['第一季度', '第二季度', '第三季度', '第四季度']},{ gridIndex: 1,type: 'category',data: ['第一季度', '第二季度', '第三季度', '第四季度']},],yAxis: [{ gridIndex: 0,  type: 'value'},{gridIndex: 1, type: 'value' },],// Declare several bar series, each will be mapped// to a column of dataset.source by default.series: [{name: '合格',type: 'bar',barWidth:20,xAxisIndex: 0,yAxisIndex: 0,stack: 'Ad',color:'#02ce8b',label: {normal: {show: true,position: 'inside',color:'#000000'}},emphasis: {focus: 'series'},data: [11, 9, 7, 6]},{name: '不合格',type: 'bar',barWidth:20,xAxisIndex: 0,yAxisIndex: 0,stack: 'Ad',color:'#f17373',label: {normal: {show: true,position: 'top',color:'#000000'}},emphasis: {focus: 'series'},data: [4, 0, 2, 2]},{data: data1,type: 'bar',xAxisIndex: 1,yAxisIndex: 1,name:'',barWidth:20,label: {normal: {show: true,position: 'top',color:'#000000'},show: true,formatter: function(params) {if (params.data < 20) {return '低';} else if (params.data < 40) {return '中';} else {return '高';}}},itemStyle: {    color: (param) => {    let num = param.data; if (num >= 80) {return colorList[0];}else if(num > 60 && num < 80){return colorList[1];}else if(num < 60){return colorList[2];}}}}]
};

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Springboot的新能源充电系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的新能源充电系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&a…

IO 作业 24/2/18

1> 使用fgets统计给定文件的行数 #include <stdio.h> #include <stdlib.h> #include <string.h> int main(int argc, const char *argv[]) {//定义文件指针FILE *fpNULL;//打开文件&#xff08;只读&#xff09;if((fpfopen("./test.txt",&quo…

300分钟吃透分布式缓存-01讲:业务数据访问性能太低怎么办?

这节课主要讲缓存的基本思想、缓存的优点、缓存的代价三个部分。 缓存的定义 先来看下缓存的定义。 & 缓存最初的含义&#xff0c;是指用于加速 CPU 数据交换的 RAM&#xff0c;即随机存取存储器&#xff0c;通常这种存储器使用更昂贵但快速的静态 RAM&#xff08;SRAM&…

Airtest-Selenium实操小课:爬取新榜数据

1. 前言 最近看到群里很多小伙伴都在用Airtest-Selenium做一些web自动化的尝试&#xff0c;正好趁此机会&#xff0c;我们也出几个关于web自动化的实操小课&#xff0c;仅供大家参考~ 今天跟大家分享的是一个非常简单的爬取网页信息的小练习&#xff0c;在百度找到新榜网页&a…

【精选】Java面向对象进阶——接口细节:成员特点和接口的各种关系

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏 …

鸿蒙生态来了 ,60k 高薪向你招手

最近&#xff0c;各大平台都被华为鸿蒙不断刷屏。原因是在华为秋季发布会上&#xff0c;华为宣布启动鸿蒙原生应用&#xff0c;不再兼容安卓应用。一石激起千层浪&#xff0c;这无疑是IT界的一颗核弹&#xff0c;各大企业和开发者都纷纷开始加入“鸿蒙朋友圈”。 鸿蒙原生应用…

【机构vip教程】Requests(1):Requests模块简介与安装

Requests模块简介 在python的标准库中&#xff0c;虽然提供了urllib,utllib2,httplib&#xff0c;但是做接口测试&#xff0c;requests使用更加方便快捷&#xff0c;正如官方说的&#xff0c;“让HTTP服务人类”。 Requests是用python语言基于urllib编写的&#xff0c;采用的是…

利用 pt-archiver 实现数据库归档功能

文章目录 一、前言关于Percona 二、Percona Toolkit安装 percona-toolkit&#xff1a;pt-archiver 归档命令的使用格式&#xff1a;示例&#xff1a; 三、归档步骤&#xff1a;1&#xff09;、创建归档数据库和归档表方式一(推荐)&#xff1a;这种方式的优缺点&#xff1a; 方式…

【Java】图解 JVM 垃圾回收(一):GC 判断策略、引用类型、垃圾回收算法

图解 JVM 垃圾回收&#xff08;一&#xff09; 1.前言1.1 什么是垃圾1.2 内存溢出和内存泄漏 2.垃圾回收的定义与重要性3.GC 判断策略3.1 引用计数算法3.2 可达性分析算法 4.引用类型5.垃圾回收算法5.1 标记-复制&#xff08;Copying&#xff09;5.2 标记-清除&#xff08;Mark…

Android 基础技术——HashMap

笔者希望做一个系列&#xff0c;整理 Android 基础技术&#xff0c;本章是关于HashMap HaspMap的默认初始长度是16&#xff0c;并且每次扩展长度或者手动初始化时&#xff0c;长度必须是2的次幂。 为什么长度是2的x次幂和每次扩容都是2倍?? 1&#xff09;当一个key被放进到数…

Python实现时间序列分析使用LOESS(STL)模型进行季节性趋势分解(STL算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 时间序列分析中&#xff0c;LOESS&#xff08;局部加权回归平滑&#xff09;和STL&#xff08;Seasona…

轨道交通信号增强与覆盖解决方案——经济高效,灵活应用于各类轨道交通场景!

方案背景 我国是世界上轨道交通里程最长的国家&#xff0c;轨道交通也为我们的日常出行带来极大的便利。伴随着无线通信技术的快速发展将我们带入电子时代&#xff0c;出行的过程中对无线通信的依赖程度越来越高&#xff0c;无论是车站还是车内都需要强大、高质量的解决方案以…

全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[搭建篇]

全网最详细的从0到1的turbo pnpm monorepo的前端工程化项目[搭建篇] 引言相关环境技术栈初始化工程安装turbo配置pnpm-workspace安装husky安装lint-staged安装eslint安装prettier配置 .editorconfig配置 .gitignore初步项目结构结语 引言 最近各种原因&#xff0c;生活上的&am…

SSTI模板注入漏洞(vulhub 复现)

首先了解模板引擎&#xff1a; 模板引擎&#xff08;这里特指用于Web开发的模板引擎&#xff09;是为了使用户界面与业务数据&#xff08;内容&#xff09;分离而产生的&#xff0c;它可以生成特定格式的文档&#xff0c;利用模板引擎来生成前端的html代码&#xff0c;模板引擎…

网络原理 - HTTP/HTTPS(1)

HTTP HTTP是什么 HTTP("全程超文本协议")是一种应用非常广泛的应用层协议. 文本:字符串(能在utf8/gbk)码表上找到合法字符. 超文本:不仅是字符串,还能携带图片啥的(HTML). 富文本:类似于word文档这种. HTTP诞生于1991年.目前已经发展为最主流使用的一种应用层协议.…

如何使用python 挑战将ai生成的概念图制作成2d游戏

要使用Python将AI生成的概念图制作成2D游戏&#xff0c;你可以遵循以下步骤&#xff1a; 生成概念图&#xff1a; 使用AI图像生成工具&#xff08;如DALL-E、DeepArt等&#xff09;来创建你的游戏概念图。保存生成的图像文件&#xff0c;通常为PNG或JPEG格式。 选择游戏引擎&a…

防火墙 iptables(二)-------------SNAT与DNAT

一、SNAT ①SNAT 应用环境: 局域网主机共享单个公网IP地址接入Internet (私有IP不能在Internet中正常路由) ②SNAT原理: 源地址转换&#xff0c;根据指定条件修改数据包的源IP地址&#xff0c;通常被叫做源映射 数据包从内网发送到公网时&#xff0c;SNAT会把数据包的源IP由…

【Java EE初阶十九】网络原理(四)

4. 数据链路层 数据链路层也有很多种协议&#xff0c;其中一个比较常见常用的,就是“以太网协议”&#xff08;通过网线/光纤, 来通信所使用的协议叫做以太网协议&#xff0c;以太网是横跨数据链路层 物理层&#xff09;&#xff1b; 4.1 以太网数据帧格式 帧头 载荷(IP 数据…

从一到无穷大 #24 LogReducer:讨论日志中热点的影响,识别及在线解决方法

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 文章目录 引言LogReducer系统性分析日志影响&#xff0c;原因在线日志缩减框架 反省总结 引言 …

提升起重机效率与降低维修成本:PreMaint预测性维护系统的应用

随着科技的不断发展&#xff0c;人工智能技术在各行各业都展现出了强大的应用潜力。在港口起重机设备的维护管理中&#xff0c;预测性维护系统是一项革命性的技术&#xff0c;为提升设备效率、降低维修成本提供了全新的解决方案。本文将深入探讨起重机预测性维护系统的原理、应…