解决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…

Ubuntu:解决PyCharm中不能输入中文或者输入一个中文解决方法

1.问题&#xff1a; Ubuntu22.04中&#xff0c;在pycharm里打字输入中文&#xff0c;每次都是只能输入第一个中文&#xff0c;后面输入的都变成了英文字母。。。无论咋调输入法&#xff0c;都没用&#xff0c;反正除了第一个字其他的输进去都是英文&#xff0c;而且汉字下面还…

软考 系统架构设计师系列知识点之设计模式(12)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之设计模式&#xff08;11&#xff09; 所属章节&#xff1a; 老版&#xff08;第一版&#xff09;教材 第7章. 设计模式 第2节. 设计模式实例 11. 某公司开发一个文档编辑器&#xff0c;改变及其允许在文档中直接嵌入…

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

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

Java 线程池规范

目录 1、为什么要使用线程池&#xff1f;2、线程池如何命名3、不要使用 Executors 下自带线程池4、Async 正确用法5、项目中可以定义多个线程池吗&#xff1f; 1、为什么要使用线程池&#xff1f; 在使用多线程时&#xff0c;频繁地创建和销毁线程会带来显著的性能开销。使用线…

论文 辅助笔记: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;、多段宽度…

DQN强化学习

算是自己写的第一个强化学习环境&#xff0c;目前还有很多纰漏&#xff0c;逐步改进ing。 希望能在两周内施工完成。 import numpy as np import torch import torch.nn as nn import torch.optim as optim import random from collections import deque import matplotlib.pyp…

[100天算法】-二叉树剪枝(day 48)

题目描述 给定二叉树根结点 root &#xff0c;此外树的每个结点的值要么是 0&#xff0c;要么是 1。返回移除了所有不包含 1 的子树的原二叉树。( 节点 X 的子树为 X 本身&#xff0c;以及所有 X 的后代。)示例1: 输入: [1,null,0,0,1] 输出: [1,null,0,null,1]示例2: 输入: […

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&…

git init

git init&#xff1a;初始化版本库 比喻&#xff1a;想象你有一块空白的画布&#xff0c;上面什么都没有。你希望开始绘制一幅画&#xff0c;但在开始之前&#xff0c;你需要明确告诉绘图工具你要开始绘制了。这个过程就好比是在画布上执行 git init。它创建了一个空白的版本库…

Xcode15 模拟器 Rosetta 模式

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

java中如何压缩本地pdf文件,最好可以设置压缩率代码类实例编写?

在Java中&#xff0c;你可以使用Apache PDFBox库来压缩PDF文件。下面是一个简单的代码示例&#xff0c;展示如何使用PDFBox库来压缩PDF文件&#xff0c;并可以设置压缩率。 首先&#xff0c;确保你的项目中已经添加了PDFBox依赖。如果你使用Maven&#xff0c;可以在pom.xml文件…

《研发效能(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…

【tio-websocket】15、学习tio的第1步—tio-study

tio-study 工程简介 tio-study 是用于学习 t-io 的示范工程,tio-study 是入门 t-io 最好的方式!tio-study 工程演示的是一个典型的 TCP 长连接应用工程,分为 server(服务端) 和 client(客户端) 工程,server 和 client 共用 common(公共模块) 工程。 关于 tio-study…

黑色星期五来袭,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 …