echarts 设置柱状图边框颜色

代码如下:

this.options = {tooltip: {trigger: "axis",textStyle: {align: "left",},className: "custom-tooltip-box",formatter: function (params) {return `<div class='custom-tooltip-style'><div class='title'><span>${params[0].name}年</span></div><div class="span"><div class="content"><span>合同金额:</span><span>${params[0].value}万元</span></div></div></div>`;},},color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "rgba(4,180,53,0)", // 0% 处的颜色},{offset: 1,color: "#3CD783", // 100% 处的颜色},]),grid: {top: "26%",bottom: "0%",right: "8%",left: "8%",containLabel: true,},xAxis: [{type: "category",data: this.xAxisData,axisLabel: {show: true,margin: 14,fontSize: 12,textStyle: {color: "#ffffffcc"}},axisLine: {show: true,lineStyle: {color: "#355d8d",},},axisTick: {show: false,},},],yAxis: [{type: "value",name: '单位:万元',nameTextStyle: {fontSize: this.handleWidth(12),color: "#FFFFFF99",padding: [0, 18, 10, 0]},axisLine: {onZero: false,lineStyle: {color: "#87C2FF",width: 1, //这里是为了突出显示加上的},},axisLabel: {formatter: function (val) {return val + "";},show: true,margin: 8,fontSize: 12,textStyle: {color: "#FFFFFF99", //字体颜色},},splitLine: {show: true,lineStyle: {color: "#87C2FF66",width: 0.7,type: "dashed",},},},],series: [{type: "bar",// name: this.legendData[0],barWidth: 20,itemStyle: {borderWidth: 2,borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#3FFF8C", // 0% 处的颜色},{offset: 1,color: "#FBFFFA", // 100% 处的颜色},])},areaStyle: {normal: {//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: "#3CD783", // 0% 处的颜色},{offset: 1,color: "rgba(4,180,53,0)", // 100% 处的颜色},])}},data: this.echartData}]
};

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

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

相关文章

教学方法创新措施有哪些内容

在教育的世界里&#xff0c;每一位老师都是一位探索者&#xff0c;他们肩负着在知识的海洋中为学生引路的重任。然而&#xff0c;面对日新月异的知识更新和技术发展&#xff0c;传统的教学方法是否还能满足学生的需求&#xff1f; 看看老师们是如何将课堂变成一场场知识与智慧的…

navicat连接云服务器(宝塔)

下面介绍两种navicat连接云服务器&#xff08;宝塔&#xff09;的方法 一、通过ssh配置&#xff08;安全&#xff09; 打开navicat&#xff0c;配置新链接的SSH&#xff08;主机&#xff1a;填写公网IP&#xff0c;用户名和密码是服务器的账号密码&#xff09; 在常规填写数据…

服务器运维小技巧(三)——如何进行服务器批量管理

运维工程师在进行服务器运维时&#xff0c;往往一个人要同时监控几十甚至成百上千的机器&#xff0c;当机器数量增加时&#xff0c;服务器管理的难度将会大大增加。很多工程师在工作中会使用一些运维面板&#xff0c;比如bt&#xff0c;1panel等&#xff0c;但是这些工具往往一…

BLUEZ学习笔记_GATT_server_client_简单解析

文章参考了以下内容 蓝牙bluez5的开发方法及入门教程_bluez蓝牙配网demo-CSDN博客文章浏览阅读1w次&#xff0c;点赞15次&#xff0c;收藏99次。1 摘要这篇文章的主要目的是告诉大家应该如何使用bluez进行开发&#xff0c;由于bluez的文档实在太少了&#xff0c;入门门槛实在太…

微服务篇之分布式系统理论

一、CAP定理 1.什么是CAP 1998年&#xff0c;加州大学的计算机科学家 Eric Brewer 提出&#xff0c;分布式系统有三个指标&#xff1a; 1. Consistency&#xff08;一致性&#xff09;。 2. Availability&#xff08;可用性&#xff09;。 3. Partition tolerance &#xff0…

我是这样通过CATTI考试的,没办法,必须考!原创首发

2023年“侥幸”通过CATTI英语二级笔译。11月初考试&#xff0c;按官方原计划应该是2024年1月初公布考试成绩&#xff0c;但12月底就突然出分了。当时正好在上班&#xff0c;忙里偷闲登录网址、查分&#xff0c;没有想象中的那么激动&#xff0c;一切平淡如水。随后&#xff0c;…

智慧交通系统的开发流程

智慧交通是以互联网、物联网等网络组合为基础&#xff0c;以智慧路网、智慧装备、智慧出行、智慧管理为重要内容的交通发展新模式&#xff0c;具有信息联通、实时监控、管理协同、人物合一的基本特征。智慧交通系统的开发流程可以按以下步骤进行&#xff0c;希望对大家有所帮助…

OpenCV人脸检测案例实战

人脸检测是一种计算机视觉技术&#xff0c;旨在识别图像或视频中的人脸。这项技术的基本内容包括使用特定的算法和模型来定位和识别人脸&#xff0c;通常涉及在图像中寻找面部特征&#xff0c;如眼睛、鼻子、嘴巴等&#xff0c;以便准确地确定人脸的位置和边界。人脸检测技术的…

Kotlin 进阶版 协程

kotlin是协程的一种实现 Dispatchers.IO&#xff1a;适用于执行磁盘或网络 I/O 操作的调度器&#xff0c;例如文件读写、网络请求等。在 Android 中&#xff0c;Dispatchers.IO 会使用一个专门的线程池来处理这些操作&#xff0c;以防止阻塞主线程。 Dispatchers.Main&#xf…

ALINX黑金AXU3EGB 开发板用户手册 CAN接口信号方向标识错误说明

如上篇文章 CAN收发器 SN65HVD232 的D R引脚方向是 D是输入&#xff0c;R是输出。 https://blog.csdn.net/zhengwenbang/article/details/136151668?spm1001.2014.3001.5501 因此 ALINX黑金AXU3EGB 用户手册 Page 43页 图 3-10-1 PS 端 CAN 收发芯片的连接示意图&#xff0c;…

刚开的抖店怎样推广?找主播带货,积累资源/渠道,拉动自然流量成交

我是王路飞。 2024年&#xff0c;依旧有很多人想入局抖音小店。 刚复工没几天&#xff0c;我就已经收到好多粉丝朋友的私信了&#xff0c;纷纷表示自己已经开通了抖店了&#xff0c;但是不会运营&#xff0c;现在新店应该怎样进行推广呢&#xff1f; 这篇内容就给你们详细说…

玩转网络抓包利器:Wireshark常用协议分析讲解

Wireshark是一个开源的网络协议分析工具&#xff0c;它能够捕获和分析网络数据包&#xff0c;并以用户友好的方式呈现这些数据包的内容。Wireshark 被广泛应用于网络故障排查、安全审计、教育及软件开发等领域。关于该工具的安装请参考之前的文章&#xff1a;地址 &#xff0c;…

CVE-2024-0918 TEW-800MB RCE漏洞分析

漏洞描述 固件版本为1.0.1.0的TEW-800MB路由器存在命令注入漏洞。如果攻击者获得了web管理权限&#xff0c;他们可以将命令注入到httpd未知函数中的post请求参数DeviceURL中&#xff0c;从而获得shell权限。。 参考链接 TEW-800MB (notion.site)https://warp-desk-89d.notio…

【嵌入式学习】QT-Day2-Qt基础

1> 思维导图 https://lingjun.life/wiki/EmbeddedNote/20QT 2>登录界面优化 使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff…

LWM(LargeWorldModel)大世界模型-可文字可图片可视频-多模态LargeWorld-详细安装记录

说明 Large World Model&#xff08;LWM&#xff09;是一个通用的大环境多模态自回归模型&#xff0c;它利用了一个技术名为RingAttention&#xff0c;通过在大型的多样化视频和图书数据集上的训练&#xff0c;实现了对语言、图像和视频的理解与生成能力。 在github上已有4.2k…

Spring Boot与Netty:构建高性能的网络应用

点击下载《Spring Boot与Netty&#xff1a;构建高性能的网络应用》 1. 前言 本文将详细探讨如何在Spring Boot应用中集成Netty&#xff0c;以构建高性能的网络应用。我们将首先了解Netty的原理和优势&#xff0c;然后介绍如何在Spring Boot项目中集成Netty&#xff0c;包括详…

JAVA高并发——单例模式和不变模式

文章目录 1、探讨单例模式2、不变模式 由于并行程序设计比串行程序设计复杂得多&#xff0c;因此我强烈建议大家了解一些常见的设计方法。就好像练习武术&#xff0c;一招一式都是要经过学习的。如果自己胡乱打&#xff0c;效果不见得好。前人会总结一些武术套路&#xff0c;对…

体验LobeChat搭建私人聊天应用

LobeChat是什么 LobeChat 是开源的高性能聊天机器人框架&#xff0c;支持语音合成、多模态、可扩展的&#xff08;Function Call&#xff09;插件系统。支持一键免费部署私人 ChatGPT/LLM 网页应用程序。 地址&#xff1a;https://github.com/lobehub/lobe-chat 为什么要用Lobe…

OpenAI Sora引领AI跳舞视频新浪潮:字节跳动发布创新舞蹈视频生成框架

OpenAI的Sora已经引起广泛关注&#xff0c;预计今年AI跳舞视频将在抖音平台上大放异彩。下面将为您详细介绍一款字节跳动发布的AI视频动画框架。 技术定位&#xff1a;这款框架采用先进的diffusion技术&#xff0c;专注于生成人类舞蹈视频。它不仅能够实现人体动作和表情的迁移…

2.21学习总结

1.【模板】ST 表 2.Balanced Lineup G 3.景区导游 4.最近公共祖先&#xff08;LCA&#xff09; 倍增思想&#xff1a;主要用于LCA问题&#xff0c;RMQ问题。在进行 递推 时&#xff0c;如果 状态空间很大&#xff0c;通常的 线性递推 无法满足 时间 与 空间复杂度 的要求&…