解决ECharts柱形图自定义单个柱子颜色图例无法显示

  • legend里data和series里的name需要对应
  • series里对象需要设置stack属性,属性值都一样即可
  • 显示单柱重点在于series里对象data属性设置,必须使用'',否则影响柱体上数值显示
  • tooltip的值需要自定义,否则会显示堆叠柱状图的tooltip格式,非图中所示
drawSingleBarChart() {let me = this// 基于准备好的dom,初始化echarts实例  这个和上面的main对应let myChart = echarts.init(document.getElementById('singleBar'))let color = ['#879EF9', '#00B050', '#FEBC66', '#FF0000', '#7F7F7F']let data = ['总项数', '绿灯项', '黄灯项', '红灯项']// 指定图表的配置项和数据let option = {color: color,legend: {x: 'center',y: 'bottom',itemWidth: 10,itemHeight: 10,data: data,},tooltip: {enabled: true,trigger: 'axis',formatter: '{a}&nbsp;&nbsp;&nbsp;{c}<br />',axisPointer: {type: 'shadow'}},grid: {top: '10%',left: '0',right: '0',bottom: '15%',containLabel: true},xAxis: {type: 'category',axisTick: {show: false},data: data},yAxis: {type: 'value',show: false,},series: [{name: '总项数',stack: '设备',type: 'bar',label: {normal: {show: true,position: 'top'}},barWidth: 30,data: [2]},{name: '绿灯项',type: 'bar',label: {normal: {show: true,position: 'top'}},barWidth: 30,stack: '设备',data: ['', 2]},{name: '黄灯项',type: 'bar',label: {normal: {show: true,position: 'top'}},barWidth: 30,stack: '设备',data: ['', '', 0]},{name: '红灯项',type: 'bar',label: {normal: {show: true,position: 'top'}},barWidth: 30,stack: '设备',data: ['', '', '', 0]}]}// 使用刚指定的配置项和数据显示图表。myChart.setOption(option)
},

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

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

相关文章

Linux解决nvcc -V出现的-bash: nvcc command not found问题

两种解决办法&#xff1a; 1、第一种直接在bashrc文件中添加本地cuda路径&#xff1a; vim ~/.bashrc 定位到内容末尾&#xff0c;最末尾 添加命令&#xff1a; export LD_LIBRARY_PATH/usr/local/cuda/lib export PATH$PATH:/usr/local/cuda/bin添加后激活 source ~/.bashrc…

2023年【R1快开门式压力容器操作】试题及解析及R1快开门式压力容器操作模拟试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年【R1快开门式压力容器操作】试题及解析及R1快开门式压力容器操作模拟试题&#xff0c;包含R1快开门式压力容器操作试题及解析答案和解析及R1快开门式压力容器操作模拟试题练习。安全生产模拟考试一点通结合国家…

论文 辅助笔记:t2vec train.py

1 train 1.1 加载training和validation数据 def train(args):logging.basicConfig(filenameos.path.join(args.data, "training.log"), levellogging.INFO)设置了日志的基本配置。将日志信息保存到名为 "training.log" 的文件中日志的级别被设置为 INFO&…

iZotope Ozone 11 Advanced for mac(臭氧11)11.0.0激活版

iZotope Ozone 11是一款功能丰富的母带处理工具&#xff0c;也是混音师和母带工程师工作中必备的工具之一。它能够满足母带的全部流程&#xff0c;包括均衡器&#xff08;EQ&#xff09;、压缩器&#xff08;Comp&#xff09;、限制器&#xff08;Limiter&#xff09;、多段宽度…

Vue3 实现 clipboard 复制功能

一个很小的交互功能&#xff0c;网上搜了一下有一个 vue3-clipboard 直接支持vue3&#xff0c;到github仓库看了下&#xff0c;原作者已经不维护这个项目了&#xff1a; 推荐使用 vueuse 自带的 useclipboard 功能&#xff0c;由 vue 团队维护&#xff0c;稳定性基本没问题 官…

十六章反射与注解总结

16.1 反射 反射&#xff08;Reflection&#xff09;是指在运行时获取类的信息&#xff0c;并可以动态调用类的方法、访问或修改类的属性&#xff0c;以及构造对象的能力。 Java的反射提供了一套API&#xff0c;允许你在运行时检查类的结构、调用类的方法、获取和设置类的属性&…

学习笔记三十三:准入控制

ResourceQuota准入控制器 ResourceQuota准入控制器限制cpu、内存、pod、deployment数量限制存储空间大小 LimitRanger准入控制器在limit名称空间创建pod&#xff0c;不指定资源&#xff0c;看看是否会被limitrange规则自动附加其资源限制创建pod&#xff0c;指定cpu请求是100m&…

Xcode15 模拟器 Rosetta 模式

打开Xcode15的方式其实没有Rosetta 选项了&#xff0c;但是可以跑Xcode默认Rosetta 模拟器。在xcode中如下方式打开&#xff1a; Product -> Destination -> Destination Architectures -> 打开Show Rosetta Destinations 然后用这些带Rosetta的模拟器运行&#xff1…

《研发效能(DevOps)工程师》课程简介(二)丨IDCF

为贯彻落实《关于深化人才发展体制机制改革的意见》&#xff0c;推动实施人才强国战略&#xff0c;促进专业技术人员提升职业素养、补充新知识新技能&#xff0c;实现人力资源深度开发&#xff0c;推动经济社会全面发展&#xff0c;根据《中华人民共和国劳动法》有关规定&#…

vivado 报错之procedural assignment to a non-register result is not permitted“

文章目录 这个错误通常是由于尝试在非寄存器类型的对象上进行过程赋值所引起的。在 Verilog 中&#xff0c;当使用 always 块时&#xff0c;其中的赋值操作应该只用于寄存器类型的变量&#xff0c;比如 reg 类型。非寄存器类型的信号&#xff08;比如 wire&#xff09;不能在 a…

黑色星期五来袭,Ozon为你提供丰富的推广工具和资源,助你实现销售突破!

Ozon的“黑色星期五”促销活动为卖家们提供了丰富的推广工具和资源&#xff0c;以确保他们的商品在促销期间获得最大的曝光度和销售额。卖家们应该充分利用这些机会&#xff0c;制定合适的折扣策略&#xff0c;并确保他们的商品在Ozon平台上脱颖而出。 为了推广Ozon黑色星期五促…

C++归并排序算法的应用:计算右侧小于当前元素的个数

题目 给你一个整数数组 nums &#xff0c;按要求返回一个新数组 counts 。数组 counts 有该性质&#xff1a; counts[i] 的值是 nums[i] 右侧小于 nums[i] 的元素的数量。 示例 1&#xff1a; 输入&#xff1a;nums [5,2,6,1] 输出&#xff1a;[2,1,1,0] 解释&#xff1a; 5 …

深入理解TCP协议

深入理解TCP 1.TCP基础概念了解 1.1简介 TCP&#xff08;Transmission Control Protocol&#xff09;是一种计算机网络协议&#xff0c;用于在网络上可靠地传输数据。它确保数据的完整性、顺序性和可靠性&#xff0c;通过建立连接、数据分段、错误检测和恢复机制&#xff0c…

【数据结构】二叉树结构

二叉树 前言引入二叉树——二叉树的独特之处一、二叉树的结构 的 核心思想二、二叉树的代码实现>binary tree.h> binary tree.c&#xff08;一&#xff09;手动构建二叉树 <测试用>&#xff08;二&#xff09;二叉树销毁&#xff08;三&#xff09;节点个数&#x…

OSPF高级特性1(重发布,虚链路)

目录 OSPF高级特性(1) 一、OSPF不规则区域类型 二、解决方案 1、使用虚连接 演示一&#xff1a;非骨干区域无法和骨干区域保持连通 演示二&#xff1a;骨干区域被分割 2、使用多进程双向重发布 OSPF高级特性(1) 一、OSPF不规则区域类型 产生原因&#xff1a;区…

界面组件DevExtreme v23.1 —— UI模板库更新新功能

在DevExtreme在v22.2版本中附带了针对Angular、React和Vue的新UI模板库&#xff0c;这个新的UI模板库包含多个响应式UI模板&#xff0c;您可以将其用作业务应用程序的起点&#xff0c;模板包括类似CRM的布局、仪表盘、身份验证表单等。在这篇文章中&#xff0c;我们将看看在v23…

如何让企业配件管理高效又智能!仓库配件出入库管理系统哪家的好用?

在当今快速发展的商业环境中&#xff0c;企业运营的效率和管理的重要性日益凸显。对于许多企业来说&#xff0c;仓库配件管理是一个关键的环节&#xff0c;它不仅涉及到物品的存储和分发&#xff0c;还与企业的成本控制和运营流程紧密相关。然而&#xff0c;管理仓库配件是一项…

[概述] 获取点云数据的仪器

这里所说的获取点云的仪器指的是可以获取场景中物体距离信息的相关设备&#xff0c;下面分别从测距原理以及适用场景来进行介绍。 一、三角测距法 三角测距原理 就是利用三角形的几何关系来测量物体的距离。想象一下&#xff0c;你站在一个地方&#xff0c;你的朋友站在另一…

Redis 分片集群

目录 ​编辑一、搭建分片集群 1、集群结构 ​编辑 2、准备实例和配置 3、启动 4、创建集群 二、散列插槽 三、集群伸缩 四、故障转移 1、自动故障转移 2、手动故障转移 五、RedisTemplate 访问分片集群 一、搭建分片集群 1、集群结构 主从和哨兵可以解决高可用、高…

如何将苹果手机照片导出?教你3个导出照片的必备技巧!

照片是我们记录生活&#xff0c;以及留下美好瞬间的最佳方式之一。通过手机照片&#xff0c;我们可以随时随地回忆过去的点点滴滴&#xff0c;还能将其分享给朋友和家人。因此&#xff0c;照片对于大家来说具有不可替代的价值与意义。 为了防止手机照片丢失&#xff0c;部分小…