echarts自定義圖表--柱狀圖-橫向

在這里插入圖片描述

區別于縱向表格
xAxis和yAxis對調
要將label全部固定到最右側：隱藏一個柱形為每個label設置固定的偏移距離 offset: [300 - 80, 0]
在data中加入label的配置根據現在的值生成距離右側的偏移

更新方法

chart.setOption({series: [{},{data: data.map(v => ({value: offset,label: {show: true,position: "right",color: "#00D753",fontWeight: "bold",fontSize: fontSize,formatter: `${v}`,fontFamily: "MyCustomFont",fontStyle: "italic",distance: 0,offset: [300 - 80, 0],},})),},{data,},],})

 data: data.map(v => ({value: offset,label: {show: true,position: "right",color: "#00D753",fontWeight: "bold",fontSize: fontSize,formatter: `${v}`,fontFamily: "MyCustomFont",fontStyle: "italic",distance: 0,offset: [300 - 80, 0],},})),

<!DOCTYPE html>
<html style="height: 100%; background: #000"><head><meta charset="utf-8" /><title>發光柱狀圖</title><script src="https://cdn.jsdelivr.net/npm/echarts@5"></script><style>/* 在 CSS 文件中定義自定義字體 */@font-face {font-family: "MyCustomFont"; /* 自定義字體名稱 */src: url("public/只含數字.ttf");font-weight: normal;font-style: normal;}</style></head><bodystyle="background: #000; height: 100vh; overflow: hidden; padding: 200px"><divid="main"style="height: 200px; width: 300px"></div><script>const chart = echarts.init(document.getElementById("main"));const data = [38, 10, 40, 54, 35, 20, 41];const categories = ["A", "B", "C", "D", "E", "F", "G"];const redBarOffset = 2;// 最大值為100時 如下 增加 下方空隙 + 上方labelconst maxBarValue = 100 + redBarOffset + 10;const fontSize = 12;const option = {backgroundColor: "transparent",yAxis: {type: "category",data: categories,axisLine: { lineStyle: { color: "transparent" } },axisLabel: {color: "#666",fontSize: fontSize,},},xAxis: {show: false,max: maxBarValue + redBarOffset + 10,},grid: {left: "12%",right: "5%",bottom: "5%",top: "5%",},series: [// 金色背景柱{type: "bar",data: Array(data.length).fill(maxBarValue),barWidth: "60%",itemStyle: {color: "#453B4C22",borderColor: "#453B4C",borderWidth: 1,},z: 1,},// 占位透明柱（用于懸空紅柱）{type: "bar",data: data.map(v => ({value: redBarOffset,label: {show: true,position: "right",color: "#00D753",fontWeight: "bold",fontSize: fontSize,formatter: `${v}`,fontFamily: "MyCustomFont",fontStyle: "italic",distance: 0,offset: [300 - 80, 0],},})),stack: "data",barWidth: "30%",itemStyle: {color: "transparent",},z: 2,},// 紅色柱子（真實數據）{type: "bar",animationDuration: 1500,animationEasing: "elasticOut",data: data,stack: "data",barGap: "-75%",itemStyle: {color: "#F7225D",shadowColor: "#F7225D",shadowBlur: 10,borderRadius: [2, 2, 2, 2],},z: 3,}],};chart.setOption(option);</script></body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/81326.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/81326.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/81326.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！