当前位置: 首页 > news >正文

echarts中横向柱状图的数字在条纹上方

实现效果: 数字在条纹的上方在这里插入图片描述
实现方法:这些数字是用新添加一个坐标轴来实现的
直接添加坐标轴数字显示是在条纹的正右边
在这里插入图片描述
所以需要配置一下偏移在这里插入图片描述
完整代码

var option = {grid: {left: "3%",right: "4%",bottom: "3%",containLabel: true,},xAxis: {type: "value",boundaryGap: [0, 0.01],axisLine: {show: false,},axisLabel: {show: false,},splitLine: {show: true,lineStyle: {color: "#121f33",},},},yAxis: [{type: "category",data: ["aa", "bb", "cc", "dd"],axisLine: {show: true,lineStyle: {color: "#2a4661",},},axisTick: {show: false,},axisLabel: {color: "#b8babd",},},{type: "category",position: "right",offset: -40,inverse: false,axisTick: "none",axisLine: "none",show: true,axisLabel: {textStyle: {height: 30,width: 30,padding: [0, 0, 10, 0],color: "#03d0d4",fontSize: "16",},},//------------------右侧展示的具体内容----------------------------data: [{value: "89%",textStyle: {color: "#03ced1",verticalAlign: "bottom",},},{value: "58%",textStyle: {color: "#03ced1",verticalAlign: "bottom",},},{value: "66%",textStyle: {color: "#03ced1",verticalAlign: "bottom",},},{value: "74%",textStyle: {color: "#03ced1",verticalAlign: "bottom",},},],},],series: [{type: "bar",showBackground: true,backgroundStyle: {color: "rgba(13, 32, 66, 0.5)",borderRadius: 10,},itemStyle: {color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: "#021a52" },{ offset: 0.5, color: "#019cb5" },{ offset: 1, color: "#00fdfe" },]),borderRadius: 10,},barWidth: "20",data: [89, 58, 66, 74],},],};

放在实例中运行即可
https://echarts.apache.org/examples/zh/editor.html?c=pie-simple

http://www.lryc.cn/news/212090.html

相关文章:

  • 【仙逆】尸阴宗始祖现身,王林修得黄泉生窍诀,阿呆惊险逃生
  • C++二叉树剪枝
  • ZooKeeper中节点的操作命令(查看、创建、删除节点)
  • el-table多选表格 实现默认选中 删除选中列表取消勾选等联动效果
  • 预安装win11的电脑怎么退回正版win10?
  • MATLAB——多层小波的重构
  • 解锁高效创作艺术!AI助力文章生成与精美插图搭配完美融合
  • ✔ ★【备战实习(面经+项目+算法)】 10.29学习
  • 微服务-Ribbon负载均衡
  • UC3845BD1R2G一款专门针对离线和 DC-DC 转换器应用 高性能电流模式PWM控制器
  • vivo自研AI大模型即将问世,智能手机行业加速迈向AI时代
  • 探索JavaScript事件流:DOM中的神奇旅程
  • 听GPT 讲Rust源代码--library/std(8)
  • Hbase基本使用,读写原理,性能优化学习
  • 添加主仓库后报错error: remote upstream already exists.
  • 香港服务器如何做负载均衡?
  • 前端 :用HTML , CSS ,JS 做一个秒表
  • BIOS MBR UEFI GPT详解
  • 2023NOIP A层联测20-点餐
  • 3D LUT 滤镜 shader 源码分析
  • 五分钟理解Java跨平台原理(适合小白)
  • 从初级测试工程师到测试专家,你的晋升路线是什么?
  • 合肥中科深谷嵌入式项目实战——人工智能与机械臂(四)
  • Zynq-Linux移植学习笔记之64- 国产ZYNQ在linux下配置国产5396芯片
  • 系统架构设计师-第19章-大数据架构设计理论与实践-软考学习笔记
  • 论坛搭建.
  • 三种前端埋点方式
  • html获取网络数据,列表展示 第二种
  • 【Python 算法】信号处理通过陷波滤波器准确去除工频干扰
  • Redis(08)| 线程模型