解决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.hqwc.cn/news/159723.html

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

相关文章

Java Web 学习笔记(二) —— JDBC

目录 1 JDBC 概述2 JDBC 快速入门3 JDBC API 详解3.1 DriverManager3.2 Connection3.3 Statement3.4 ResultSet3.5 PreparedStatement3.5.1 代码模拟 SQL 注入3.5.2 PreparedStatement 的使用3.5.3 PreparedStatement 原理 4 数据库连接池4.1 数据库连接池概述4.2 数据库连接池…

牛客项目(五)-使用kafka实现发送系统通知

kafka入门以及与spring整合 Message.java import java.util.Date;public class Message {private int id;private int fromId;private int toId;private String conversationId;private String content;private int status;private Date createTime;public int getId() {retur…

windows server 2016调优

1. 增加TCP连接的最大数量&#xff1a; 在您当前的注册表路径&#xff08;HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\Tcpip\Parameters&#xff09;中的右侧窗格&#xff0c;右击空白处&#xff0c;选择“新建” -> “DWORD (32位) 值”。为新的值命名为TcpNu…

2015年亚太杯APMCM数学建模大赛C题识别网络中的错误连接求解全过程文档及程序

2015年亚太杯APMCM数学建模大赛 C题 识别网络中的错误连接 原题再现 网络是描述真实系统结构的强大工具——社交网络描述人与人之间的关系&#xff0c;万维网描述网页之间的超链接关系。随着现代技术的发展&#xff0c;我们积累了越来越多的网络数据&#xff0c;但这些数据部…

EthernetIP主站转EtherCAT协议网关采集电力变压器的 Ethernet IP 数据

怎么通过捷米JM-EIPM-ECT网关把ABB电力变压器的 Ethernet IP 数据&#xff0c;连接到欧姆龙PLC上&#xff0c;通过plc去监控电力设备的数据呢&#xff0c;下面是介绍简单的连接方法&#xff0c;采集Ethernet IP从站数据和EtherCAT协议 1 &#xff0c;捷米JM-EIPM-ECT网关连接Et…

C语言实现 1.在一个二维数组中形成 n 阶矩阵,2.去掉靠边元素,生成新的 n-2 阶矩阵;3.求矩阵主对角线下元素之和:4.以方阵形式输出数组。

矩阵形式&#xff1a; 1 1 1 1 1 2 1 1 1 1 3 2 1 1 1 4 3 2 1 1 5 4 3 2 1 完整代码&#xff1a; /*编写以下函数 1&#xff0e;在一个二维数组中形成如以下形式的 n 阶矩阵&#xff1a; 1 1 1 1 1 2 1 1 1 1 3 2 1 1 1 4 3 2 1 1 5 4 3 2 1 2&#xff0e;去掉…

node使用http模块

文章目录 前言一、创建http服务二、设置http的响应报文三、不同请求响应不同数据四、请求响应不同html文件1. 添加www文件夹2. js代码3. 效果 五、get和post请求的区别 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 一、创建http服务 // 1&#xff1a…

abbyy15有哪些新功能更新改进?

可以说优化文档过程&#xff1a;ABBYY在一个工作流中对各种类型的文档进行数字化、检索、编辑、保护、共享和协作。不得不承认FineReader 15最大特色是采用了ABBYY最新推出的基于AI的OCR技术&#xff0c;能够更快速的在同一工作流程中对各种文档进行数字化、检索、编辑、加密、…

Python基础之列表、元组和字典

一文拿捏Python基本数据类型“列表、数组和字典” 引言 Python中的 列表(英文叫list) 、 元组(英文叫tuple)和字典&#xff08;dictionary&#xff09; 也是 序列 特性的&#xff0c;它们也是非常常用的数据类型。 1、列表&#xff08;List&#xff09; 01、概述 列表&#…

海外媒体发稿:如何利用8种出口贸易媒体发稿实现销售突破-华媒舍

出口贸易是许多企业追求业务增长的重要途径。在全球市场上突出自己并吸引潜在客户并非易事。幸运的是&#xff0c;利用出口贸易媒体发稿的机会可以成为推动销售突破的有效策略。本文将介绍8种出口贸易媒体以及如何利用它们发稿推广&#xff0c;从而实现销售突破。 1. 行业媒体…

STM32-LIN总线详解1

.硬件规范&#xff1a; 1.总线形式&#xff1a;一主多从 2.总线通常为12V电压&#xff0c;最高波特率20K&#xff0c;最多容纳16个节点。 也有24V&#xff0c;和其他电平需要共地。 3.总线上波形 4. 单片机STM32与LIN收发器在LIN_CAN开发板上设计。 1K电阻自动控制电路&…

4.网络之TCP

TCP协议(传输层) 文章目录 TCP协议(传输层)1. TCP报文格式2. TCP相关机制2.1 确认应答机制2.2 超时重传机制2.3 连接管理机制&#xff08;重点&#xff09;2.3.1 三次握手2.3.2 四次挥手 2.4 滑动窗口机制2.5 流量控制机制2.6 拥塞控制机制2.7 延迟应答机制2.8 捎带应答机制 3.…