我用Trae生成了一个Echarts 3D柱状图的Demo

李剑一2025-11-19 15:59

最近在开发个人的大屏项目，作为简历的一部分找工作的时候拿出来撑撑门面。

对于前端而言，最难的并不是技术部分，而是 UI 部分，毕竟前端大部分时候只是切图仔 ，而不是设计师。

但是我现在找到了一个新的方案，用 AI 工具。比如我现在用的 Trae，大面上的框架还是建议个人写，毕竟AI虽然智能，但个人才是代码的最终把控者。

Echarts官网上找了找关于柱状图的内容，无法达到以下的效果，在网上搜了搜，发现也没有类似的效果。

于是用 Trae 简单写了一个指令：

请帮我生成一个Echarts柱状图组件，内容是一个柱状图，但是柱子显现出一种3D效果。分别由三部分构成，柱子的顶端是一个四边形，左右两侧各是一个渐变的四边形，三个图形组成一个侧视图的3D柱子效果。

Trae表示这种效果在柱状图中不存在，推荐使用Echarts的custom自行开发，并给出了相应的开发逻辑。

js 复制代码 
// 先生成柱子效果
// 绘制左侧面
const barLeft = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c0 = [shape.x + 2, shape.y];
        const c1 = [shape.x - 7, shape.y - 1];
        const c2 = [xAxisPoint[0] - 7, xAxisPoint[1] - 3];
        const c3 = [xAxisPoint[0] + 2, xAxisPoint[1]];
        ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
    },
});
// 绘制右侧面
const barRight = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c1 = [shape.x + 2, shape.y];
        const c2 = [xAxisPoint[0] + 2, xAxisPoint[1]];
        const c3 = [xAxisPoint[0] + 10, xAxisPoint[1] - 5];
        const c4 = [shape.x + 10, shape.y - 5];
        ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
    },
});
// 绘制顶面
const barTop = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const c1 = [shape.x + 2, shape.y + 3];
        const c2 = [shape.x + 10, shape.y - 5]; //右点
        const c3 = [shape.x - 0, shape.y - 7];
        const c4 = [shape.x - 7, shape.y - 1];
        ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
    },
});

将渲染完成的面注册到Echarts中：

js 复制代码 
// 注册三个面图形
echarts.graphic.registerShape("barLeft", barLeft);
echarts.graphic.registerShape("barRight", barRight);
echarts.graphic.registerShape("barTop", barTop);

应用已经注册好的面，生成Echarts柱状图：

js 复制代码 
series: [
    {
        type: "custom",
        renderItem: (params, api) => {
            let barLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: "rgba(27, 126, 242, 0.8)"},
                {offset: 0.5, color: "rgba(27, 126, 242, 0.6)"},
                {offset: 0.8, color: "rgba(27, 126, 242, 0.3)"},
                {offset: 1, color: "rgba(0,0,0,0.2)"},
            ]);
            let barRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: "rgba(23,176,255,1)"},
                {offset: 0.5, color: "rgba(23,176,255, 0.6)"},
                {offset: 0.8, color: "rgba(23,176,255, 0.3)"},
                {offset: 1, color: "rgba(0,0,0,0.2)"},
            ]);
            let barTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: "rgba(27, 126, 242, 1)"},
                {offset: 1, color: "rgba(27, 126, 242, 1)"},
            ]);
    },
],

完整代码

js 复制代码 
const createCharts = (data) => {
    const myChart = echarts.init(document.getElementById('firstCharts'));
    // 绘制左侧面
    const barLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x + 2, shape.y];
            const c1 = [shape.x - 7, shape.y - 1];
            const c2 = [xAxisPoint[0] - 7, xAxisPoint[1] - 3];
            const c3 = [xAxisPoint[0] + 2, xAxisPoint[1]];
            ctx
                .moveTo(c0[0], c0[1])
                .lineTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .closePath();
        },
    });
    // 绘制右侧面
    const barRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x + 2, shape.y];
            const c2 = [xAxisPoint[0] + 2, xAxisPoint[1]];
            const c3 = [xAxisPoint[0] + 10, xAxisPoint[1] - 5];
            const c4 = [shape.x + 10, shape.y - 5];
            ctx
                .moveTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath();
        },
    });
    // 绘制顶面
    const barTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x + 2, shape.y + 3];
            const c2 = [shape.x + 10, shape.y - 5]; //右点
            const c3 = [shape.x - 0, shape.y - 7];
            const c4 = [shape.x - 7, shape.y - 1];
            ctx
                .moveTo(c1[0], c1[1])
                .lineTo(c2[0], c2[1])
                .lineTo(c3[0], c3[1])
                .lineTo(c4[0], c4[1])
                .closePath();
        },
    });
    // 注册三个面图形
    echarts.graphic.registerShape("barLeft", barLeft);
    echarts.graphic.registerShape("barRight", barRight);
    echarts.graphic.registerShape("barTop", barTop);
    let option = {
        tooltip: {
            trigger: "axis",
            formatter: '<b>{b}</b> <br/> 建设完成度: <b style="color: #2AB6FF">{c}%</b>'
        },
        grid: {
            left: 20,
            top: 10,
            bottom: 0,
            right: 20,
            containLabel: true,
        },
        xAxis: {
            type: "category",
            data: data.name,
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(255,255,255,0.5)",
                },
            },
            axisLabel: {
                interval: 0,
                textStyle: {
                    color: "rgba(255,255,255,0.5)",
                },
            },
            axisTick: {
                show: false,
            }
        },
        yAxis: {
            type: "value",
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#7ebaf2",
                },
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            splitNumber: 4,
            axisLabel: {
                fontSize: 12,
                textStyle: {
                    color: "#FFF",
                },
            },
        },
        series: [
            {
                type: "custom",
                renderItem: (params, api) => {
                    let barLeftStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: "rgba(27, 126, 242, 0.8)"},
                        {offset: 0.5, color: "rgba(27, 126, 242, 0.6)"},
                        {offset: 0.8, color: "rgba(27, 126, 242, 0.3)"},
                        {offset: 1, color: "rgba(0,0,0,0.2)"},
                    ]);
                    let barRightStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: "rgba(23,176,255,1)"},
                        {offset: 0.5, color: "rgba(23,176,255, 0.6)"},
                        {offset: 0.8, color: "rgba(23,176,255, 0.3)"},
                        {offset: 1, color: "rgba(0,0,0,0.2)"},
                    ]);
                    let barTopStyle = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {offset: 0, color: "rgba(27, 126, 242, 1)"},
                        {offset: 1, color: "rgba(27, 126, 242, 1)"},
                    ]);
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: "group",
                        children: [
                            {
                                type: "barLeft",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: barLeftStyle,
                                },
                            },
                            {
                                type: "barRight",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: barRightStyle,
                                },
                            },
                            {
                                type: "barTop",
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: barTopStyle,
                                },
                            },
                        ],
                    };
                },
                data: data.value,
            },
        ],
        animation: true,
        animationDuration: 1000
    };
    myChart.setOption(option);
};

Ps: 其他不明之处可以参考 Echarts官方文档 custom 篇

相关推荐
崔庆才丨静觅5 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60616 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了6 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅6 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅6 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅7 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment7 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅7 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊7 小时前
jwt介绍
前端
爱敲代码的小鱼7 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示