【echarts】 柱状图,最后带“竖线”

在这里插入图片描述

在这里插入图片描述

具体:

https://echarts.zhangmuchen.top/#/detail?cid=28ea6-0601-e9f5-9cc29-c022b758

let data = [{value: 0,name: '数据格式一'},{value: 55,name: '数据格式二'},{value: 66,name: '数据格式三'},{value: 75,name: '数据格式四'},{value: 20,name: '数据格式五'}];getArrByKey = (data, k) => {let key = k || 'value';let res = [];if (data) {data.forEach(function (t) {res.push(t[key]);});}return res;};getSymbolData = (data) => {let arr = [];for (var i = 0; i < data.length; i++) {arr.push({value: data[i].value,symbolPosition: 'end',});}return arr;};option = {backgroundColor:"",grid: {top:'2%',bottom:'2%',right:'2%',left:'2%',containLabel: true,},xAxis: {show: false,},yAxis: [{triggerEvent: true,show: true,inverse: true,data: getArrByKey(data, 'name'),axisLine: {show: false,},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {interval: 0,inside: true,color: '#000',margin:0,padding: [0, 0, 15, 0],align: 'left',verticalAlign:'bottom',formatter: function (value, index) {return '{title|' + value + '}';},rich: {title: {width: 50,fontSize: 14,},},},},{triggerEvent: true,show: true,inverse: true,data: getArrByKey(data, 'name'),axisLine: {show: false,},splitLine: {show: false,},axisTick: {show: false,},axisLabel: {margin: 0,interval: 0,inside: true,padding: [0, 0, 15, 0],color: '#000',fontSize: 14,align: 'right',verticalAlign: 'bottom',formatter: function (value, index) {return data[index].value+"个";},},},],series: [{type: 'bar',showBackground: true,barMinWidth:'10',backgroundStyle: {opacity: 1,color: '#1f4365',},yAxisIndex: 0,data: data,barWidth: 20,// align: left,stack: "2",itemStyle: {normal: {//颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{offset: 0,color: "#00d5fc",},{offset: 1,color:  "#1280eb",},]),},}},{type: 'pictorialBar',symbol: 'rect',symbolSize: [4, 30],symbolOffset: [3, 0],zlevel: 13,barMinHeight:1,symbolPosition: 'end',itemStyle: {normal: {color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0,color: '#FBDD9E'}, {offset: 1,color: '#FFFFFF'}]),shadowBlur: 5,shadowOffsetY: 2,shadowColor: 'rgba(0, 0, 0, 0.72)'}},data: data,},],};

参考:
https://echarts.zhangmuchen.top/#/detail?cid=28ea6-0601-e9f5-9cc29-c022b758

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

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

相关文章

2、Flink 在 DataStream 和 Table 之间进行转换

1.概述 Table API 和 DataStream API 都可以处理有界流和无界流。 DataStream API 提供了流处理的基础(时间、状态和数据流管理);Table API 抽象了许多内部内容,并提供了一个结构化和声明性的 API;在处理历史数据时,需要管理有边界的流;无边界流出现在实时处理场景中,…

wordpress调用栏目最新内容、调用栏目推荐内容、调用栏目随机内容

想要在首页调用wordpress某个栏目的内容&#xff0c;可以按照分类ID来调用&#xff0c;调用出来的内容一般有&#xff1a;调用栏目最新内容、调用栏目推荐内容、调用栏目随机内容这三种形式。简站wordpress小编在此为大家放出三种不同方式调用的代码如下&#xff1a; 通过指定…

盘点.软件测试模型

软件开发模型   软件开发模型(Software Development Model)是指软件开发全部过程、活动和任务的结构框架。软件开发包括需求、设计、编码和测试等阶段&#xff0c;有时也包括维护阶段。 软件开发模型能清晰、直观地表达软件开发全过程&#xff0c;明确规定了要完成的主要活动…

云计算day15

⼀、web基本概念和常识 Web&#xff1a;为⽤户提供的⼀种在互联⽹上浏览信息的服务&#xff0c;Web 服 务是动态的、可交 互的、跨平台的和图形化的。 Web 服务为⽤户提供各种互联⽹服务&#xff0c;这些服务包括信息浏览 服务&#xff0c;以及各种交互式服务&#xff0c;…

C++类与对象-六大成员函数

默认成员函数就是用户没有显式实现&#xff0c;编译器会⾃动⽣成的成员函数称为默认成员函数。⼀个空类编译器会默认⽣成8个默认成员函数。本文只介绍其中6个&#xff0c;C11增加两个函数见后续博客。 目录 一、构造函数 1.1 概念 1.2 特性 1.3 使用举例 1.4 初始化列表 1…

探索LLM编程新纪元:AI赋能的编程之旅

探索LLM编程新纪元&#xff1a;AI赋能的编程之旅 引言 在人工智能&#xff08;AI&#xff09;的浪潮中&#xff0c;大型语言模型&#xff08;LLM&#xff09;作为自然语言处理&#xff08;NLP&#xff09;领域的璀璨明珠&#xff0c;正逐步渗透到编程的每一个角落。从代码自动…

【C#】文件流和文本处理

1. 文件流的基本概念 文件流是C#中处理文件读写的抽象&#xff0c;它提供了对文件内容进行顺序访问的能力。在文件流中&#xff0c;数据按照字节或块的方式传输&#xff0c;而不受文件中数据的格式影响。文件流通常与System.IO命名空间中的类一起使用&#xff0c;包括FileStrea…

如何通过前端表格控件实现自动化报表?

背景 最近伙伴客户的项目经理遇见一个问题&#xff0c;他们在给甲方做自动化报表工具&#xff0c;项目已经基本做好了&#xff0c;但拿给最终甲方&#xff0c;业务人员不太买账&#xff0c;项目经理为此也是天天抓狂&#xff0c;没有想到合适的应对方案。 现阶段主要面临的问…

geotools 读取shape文件

对于GIS开发者而言&#xff0c;矢量数据是我们经常要用到的&#xff0c;而shape数据是矢量数据中最常用的格式&#xff0c;因此解析shape数据也是作为GIS软件开发人员必备的基础技能&#xff0c;而GeoTools无疑是Java最好用来处理GIS数据的三方库&#xff0c;下面例子是简单的g…

算法训练(leetcode)第三十四天 | 56. 携带矿石资源(第八期模拟笔试)、198. 打家劫舍、213. 打家劫舍 II、337. 打家劫舍 III

刷题记录 *56. 携带矿石资源&#xff08;第八期模拟笔试&#xff09;198. 打家劫舍213. 打家劫舍 II*337. 打家劫舍 III解法一 &#xff08;记忆化递推&#xff09;*解法二 &#xff08;动态规划&#xff09; *56. 携带矿石资源&#xff08;第八期模拟笔试&#xff09; leetco…

防火墙USG2000USG5000配置nat server 时 no-reverse的含义

防火墙USG2000&USG5000配置nat server 时 no-reverse的含义 https://forum.huawei.com/enterprise/zh/thread/580888066099396608?page2 多次执行带参数no-reverse的nat server命令&#xff0c;可以为该内部服务器配置多个公网地址&#xff1b;未配置参数no-reverse则表…

实现代码灵活性:用Roslyn动态编译和执行存储在数据库中的C#代码

在许多现代应用程序中&#xff0c;动态编译和执行代码是提升灵活性和功能的一种强大技术。本文将介绍如何使用Roslyn编译器平台动态编译和执行存储在数据库中的C#代码&#xff0c;并结合实际公司案例来说明这些技术的应用场景。 1. 引言 在很多应用场景中&#xff0c;我们可能…

牛客周赛53---DEF

D.小红组比赛 题目描述 \,\,\,\,\,\,\,\,\,\,小红希望出一场题目&#xff0c;但是他的实力又不够&#xff0c;所以他想到可以从以前的比赛中各抽一题&#xff0c;来组成一场比赛。不过一场比赛的难度应该是有限制的&#xff0c;所以所以这一场比赛会给一个目标难度分数 target…

docker笔记7-dockerfile

docker笔记7-dockerfile 一、dockerfile介绍二、dockerfile指令三、构建自己的镜像 一、dockerfile介绍 Dockerfile是用来构建Docker镜像的构建文件&#xff0c;是由一系列命令和参数构成的脚本。 以下是常用的 Dockerfile 关键字的完整列表和说明&#xff1a; 二、docker…

Vue3自研开源Tree组件 - Vitepress文档功能演示

基于自己学习的一点Vue3和ts的知识&#xff0c;写的一个企业级的开源Tree组件&#xff0c;给大伙儿演示下组件功能和API的使用&#xff0c;如果您喜欢&#xff0c;不妨点赞和关注下&#xff0c;后续会继续分享源码教程&#xff0c;感谢支持&#xff01; 演示视频地址&#xff…

【计算机毕业设计】838装修公司CRM系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

基于微信小程序的高校大学生信息服务平台设计与实现

基于微信小程序的高校大学生信息服务平台设计与实现 Design and Implementation of a College Student Information Service Platform based on WeChat Mini Program 完整下载链接:基于微信小程序的高校大学生信息服务平台设计与实现 文章目录 基于微信小程序的高校大学生信息…

【Python】基础学习技能提升代码样例7:代码测试

1. doctest doctest用于测试 # 文件外命令测试 # file name: foo.py """ My square function. Usage: >>> a my_square(4) >>> b my_square(3) >>> a b 25 """ def my_square(num):return num * num > pytho…

为什么要做边界值测试?

边界值测试的理解 边界值测试&#xff08;Boundary Value Testing&#xff09;是一种常用的软件测试方法&#xff0c;它侧重于测试输入值的边缘或临界条件。这些边缘条件通常包括最小值、最大值以及接近这些最小值和最大值的值。边界值测试的基本思想是&#xff0c;许多软件错…