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.hqwc.cn/news/473092.html

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

相关文章

CSS之margin塌陷

margin塌陷 CSS中的外边距塌陷&#xff08;Margin Collapse&#xff09;问题是指在垂直方向上&#xff0c;当两个或多个块级元素的边距相遇时&#xff0c;它们之间的距离不是它们各自边距的总和&#xff0c;而是其中的最大值。这种现象主要出现在块级元素的上下外边距之间。 &…

一些配置问题记录

真的很感慨 为什么一开始的下载的软件还能用 卸载或重装后的软件总是存在各种各样的错误 真令人心烦 GNURADIO运行简单的采集信号程序报错&#xff0c; 其实不太理解为什么会出现这类错误&#xff0c;解决方法为 安装 jackd2 软件包&#xff0c;然后尝试手动启动 Jack 服务器…

【学网攻】 第(29)节 -- 综合实验二

系列文章目录 目录 系列文章目录 文章目录 前言 一、综合实验 二、实验 1.引入 实验目标 实验设备 实验拓扑图 实验配置 实验验证 文章目录 【学网攻】 第(1)节 -- 认识网络【学网攻】 第(2)节 -- 交换机认识及使用【学网攻】 第(3)节 -- 交换机配置聚合端口【学网攻…

【开源】JAVA+Vue.js实现大学计算机课程管理平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2.3 学生实验模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 实验课程档案表3.2.2 实验资源表3.2.3 学生实验表 四、系统展示五、核心代码5.1 一键生成实验5.2 提交实验5.3 批阅实…

钡铼技术的LoRa网关实现智能电网监测与控制

钡铼技术的LoRa网关在智能电网监测与控制方面发挥着关键作用&#xff0c;为电力系统的安全运行和高效管理提供了重要支持。下面将详细介绍钡铼技术的LoRa网关如何实现智能电网监测与控制。 首先&#xff0c;钡铼技术的LoRa网关通过接入各类传感器和监测设备&#xff0c;实现对…

谷歌新动作:双子模型大放送,开发者福音来了!

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

书生谱语-基于 InternLM 和 LangChain 搭建知识库

大语言模型与外挂知识库&#xff08;RAG&#xff09;的优缺点 RAG方案构建与优化 作业 在创建web_demo时&#xff0c;需要根据教程将服务器端口映射到本地端口&#xff0c;另外需要将链接的demo从服务器中复制出来&#xff0c;不要直接从服务器打开demo页面&#xff0c;不然会…

人工智能专题:2024亚太地区生成式人工智能应用与监管报告

今天分享的是人工智能系列深度研究报告&#xff1a;《人工智能专题&#xff1a;2024亚太地区生成式人工智能应用与监管报告》。 &#xff08;报告出品方&#xff1a;德勤&#xff09; 报告共计&#xff1a;20页 来源&#xff1a;人工智能学派 知识更新&#xff1a;了解传统…

学习笔记20:牛客周赛32

D 统计子节点中1的个数即可&#xff08;类似树形dp&#xff1f;&#xff09; #include<iostream> #include<cstring> #include<cmath> #include<algorithm> #include<queue> #include<vector> #include<set> #include<map>u…

17.3.1.3 灰度

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 灰度的算法主要有以下三种&#xff1a; 1、最大值法: 原图像&#xff1a;颜色值color&#xff08;R&#xff0c;G&#xff0c;B&a…

.NET Core WebAPI中使用Log4net记录日志

一、安装NuGet包 二、添加配置 // log4net日志builder.Logging.AddLog4Net("CfgFile/log4net.config");三、配置log4net.config文件 <?xml version"1.0" encoding"utf-8"?> <log4net><!-- Define some output appenders -->…

【点云】生成有凹凸的平面

文章目录 前言高斯函数原理代码保存 测试测试1 &#xff1a;领域曲率代码测试2&#xff1a;高斯曲率代码 加上噪点测试1测试2 总结 前言 尝试用一些数据生成有凹凸面的点云。 我们姑且把z轴当成有凹凸的缺陷&#xff0c;x轴和y轴共同组成一个平面。 高斯函数 原理 高斯函数w…