echarts自定义图表--柱状图-横向

区别于纵向表格

xAxis和yAxis对调

要将label全部固定到最右侧: 隐藏一个柱形 为每个label设置固定的偏移距离 offset: [300 - 80, 0]

在data中加入label的配置 根据现在的值生成距离右侧的偏移

更新方法

javascript 复制代码
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,
          },
      ],
  })
javascript 复制代码
 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],
        },
    })),
javascript 复制代码
<!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>
    <body
        style="background: #000; height: 100vh; overflow: hidden; padding: 200px">
        <div
            id="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时 如下 增加 下方空隙 + 上方label
            const 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>
相关推荐
SYKMI2 小时前
@JsonFormat时区问题
java·前端·数据库
海盐泡泡龟4 小时前
web常见的攻击方式有哪些?如何防御?
前端·vue.js·webpack
EndingCoder5 小时前
React从基础入门到高级实战:React 基础入门 - React Hooks 入门
前端·javascript·react.js·前端框架
EndingCoder5 小时前
React从基础入门到高级实战:React 基础入门 - JSX与组件基础
前端·javascript·react.js·前端框架
Space Chars6 小时前
【大前端】使用NodeJs HTTP模块创建web服务器、SSE通讯
服务器·前端·http
Quke陆吾6 小时前
Vue框架1(vue搭建方式1,vue指令,vue实例生命周期)
前端·javascript·vue.js
Oscar_02087 小时前
uniapp+ts 多环境编译
前端·vue.js·typescript·uni-app
shmily麻瓜小菜鸡7 小时前
前端项目中实现页面看起来像是浏览器缩放到了80%的效果
前端
EndingCoder7 小时前
从零基础到最佳实践:Vue.js 系列(9/10):《单元测试与端到端测试》
前端·javascript·vue.js·性能优化·单元测试·vue3
How_doyou_do7 小时前
Vue-创建应用/挂载应用/根组件模版-.vue单文件/应用配置
前端·javascript·vue.js