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

相关文章

盘点.软件测试模型

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

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

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

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

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

docker笔记7-dockerfile

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

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

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

为什么要做边界值测试?

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

React 学习——Context机制层级组件通信

核心思路&#xff1a;&#xff08;适用于所有层级&#xff0c;不仅仅是爷孙 父子&#xff09; createContext方法创建一个上下文对象在顶层组件 通过Provider组件提供数据在底层组件&#xff0c;通过useContext钩子函数使用数据 import { createContext, useContext } from …

R语言 爬取数据+简单清洗

小小练习。见代码注释 # 加载必要的包 library(rvest) library(dplyr) library(tidyr)# 指定网页URL url <- "https://research.un.org/en/unmembers/scmembers"# 读取网页内容 webpage <- read_html(url)# 提取所有表格节点 table_nodes <- html_nodes(web…

基于人工智能及大数据的综合智能交通管理平台(可编辑30页PPT)

引言&#xff1a;随着城市化进程的加速和汽车保有量的快速增长&#xff0c;交通拥堵、交通事故频发以及交通资源分配不均等问题日益突出&#xff0c;成为制约城市发展的重要因素。为了应对这些挑战&#xff0c;基于人工智能&#xff08;AI&#xff09;及大数据技术的综合智能交…

【React】详解自定义 Hook

文章目录 一、自定义 Hook 的基本用法1. 什么是自定义 Hook&#xff1f;2. 创建自定义 Hook3. 使用自定义 Hook 二、自定义 Hook 的进阶应用1. 处理副作用2. 组合多个 Hook3. 参数化 Hook4. 条件逻辑 三、自定义 Hook 的实际应用案例1. 实现用户身份验证2. 实现媒体查询 四、最…

民大食堂用餐小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;商家管理&#xff0c;档口号管理&#xff0c;商家餐品管理&#xff0c;餐品种类管理&#xff0c;购物车管理&#xff0c;订单信息管理 微信端账号功能包括&#xff1a;系统首页&a…

angular入门基础教程(七)系统路由

路由的实现 当我们系统越来复杂&#xff0c;功能越来越多&#xff0c;路由也就是必须的了。在 ng 中如何实现路由呢&#xff1f; 启用路由 在 app 目录下&#xff0c;新建一个 router 目录&#xff0c;把 app.routers.ts 文件拷贝过来&#xff0c;并修改一下。 import { Ro…

C语言程序设计16

程序设计16 问题16_1代码16_1结果16_1 问题16_2代码16_2结果16_2 问题16_3代码16_3结果16_3 问题16_1 函数 f u n fun fun 的功能是&#xff1a;逆置数组元素中的值。 例如&#xff0c;若形参 a a a 所指数组中的数据最初排列为 &#xff1a; 1 , 2 , 3 , 4 , 5 , 6 …

高职院校大数据人才培养成果导向系统构建、实施要点与评量方法

一、引言 在当今信息化快速发展的背景下&#xff0c;大数据已成为推动社会进步和产业升级的重要力量。为满足社会对大数据人才的需求&#xff0c;高职院校纷纷开设大数据相关专业&#xff0c;并致力于探索科学有效的人才培养模式。本文立足于我国信息化与智能化发展趋势&#…

【初阶数据结构】10.排序(1)

文章目录 1.排序概念及运用1.1 概念1.2 运用1.3 常见排序算法 2. 实现常见排序算法2.1 插入排序2.1.1 直接插入排序2.1.2 希尔排序2.1.2.1 希尔排序的时间复杂度计算 2.2 选择排序2.2.1 直接选择排序2.2.2 堆排序 1.排序概念及运用 1.1 概念 排序&#xff1a;所谓排序&#x…

如何用PostMan按照规律进行循环访问接口

①设置动态变量 步骤一: 设置环境变量 1. 创建环境变量集合 在 Postman 左上角选择 "环境"&#xff0c;然后点击 "添加" 来创建一个新的环境变量集合。给它起一个名称&#xff0c;比如 "uploadDemo". 2. 添加初始变量 在新创建的环境变量集…

基于python的百度迁徙迁入、迁出数据分析(三)

百度迁徙定义 百度迁徙释义&#xff1a; 百度迁徙以用户常住地所在地市或停留超过一天的非常住地定义为出发城市&#xff0c;以用户离开出发城市&#xff0c;并在非出发城市停留超过4 h以上定义为到达城市。采用4h阈值&#xff0c;排除了城际出行中的途经地。 定义参考来源…

filament 初使用记录

安装初始化 一、环境准备 官网要的 我安装的 二、下载安装 安装laravel composer create-project --prefer-dist laravel/laravel 项目名称 10.*导入 filament composer require filament/filament注册 filament 管理面板 php artisan filament:install --panels初始化…

freertos-HAL库-STM32Cubemax生成

打开cubemax选好型号配置RCC&#xff08;外部高速时钟&#xff09;这里查看原理图&#xff0c;我们把按键设为输入&#xff0c;led设为输出创建两个新任务&#xff08;default是系统创建的&#xff09;配置时钟&#xff0c;这里HSE是外部高速时钟&#xff0c;HSI是内部的&#…

axure10的安装与使用教程,问题整理

前言&#xff1a; axure10的安装与激活使用教程。 1、百度网盘下载相关资料 链接&#xff1a;https://pan.baidu.com/s/1OSD9J1wVuIptGxeRzwjlpA?pwddkbj 提取码&#xff1a;dkbj 2、开始安装&#xff0c;点击setup的安装包 除了更改地址外&#xff0c;其他的默认就行&…