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,一经查实,立即删除!

相关文章

通过ffmpeg实现rtsp rtmp rtmps 推流

安卓端推流直接引用 implementation com.arthenica:mobile-ffmpeg-full:4.4 包 记得添加网络权限 <uses-permission android:name"android.permission.INTERNET" /> 基本方法&#xff1a; public static long executionId; Override protected void onCr…

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

在教育的世界里&#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; 这篇内容就给你们详细说…

docker常用命令network篇-docker网络和局域网冲突查找

目录 一、route -n查看 服务器 网络情况二、docker network ls查看 docker 网络情况三、客户使用网络为192.168.5.** 一、route -n查看 服务器 网络情况 [rootstdev-server ~]# route -n Kernel IP routing table Destination Gateway Genmask Flags Metr…

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

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

vue2中几种组件传值方法

1.父子组件传值 父组件在子组件标签中传入fatherMess,在子组件使用$emit,约定子传父事件名,将子组件的数据传递到父组件.通过按钮修改,可以发现,这里的传值是响应式的 步骤: ​ 1.在父组件中给子组件标签添加属性 ​ 2.在子组件中使用props接受数据 ​ 3.子组件中使用数据,…

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不规则可移动窗体的实现

实现: 可以借助不规则的位图来实现不规则窗体,并支持拖动和移动。下面分别是头文件和源文件 #ifndef SHAPEWIDGET_H #define SHAPEWIDGET_H#include <QWidget>class ShapeWidget : public QWidget {Q_OBJECTpublic:ShapeWidget(QWidget *parent = 0);~ShapeWidget(); …

【嵌入式学习】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…

c++文件的打开、读写和关闭。缓冲区的使用和控制。

在C中&#xff0c;文件的打开、读写和关闭通常使用标准库中的文件流对象&#xff08;如std::ifstream用于输入文件&#xff0c;std::ofstream用于输出文件&#xff09;来完成。这些对象封装了与操作系统交互的底层细节&#xff0c;使得文件操作更为简单和安全。 以下是文件打开…