echarts 立体柱状图

最新推荐文章于 2024-12-05 16:58:20 发布

蓝胖子Lcl

最新推荐文章于 2024-12-05 16:58:20 发布

阅读量235

点赞数

文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_43483746/article/details/130572266

版权

这段代码展示了如何在Echarts中扩展图形形状，用于绘制立方体的左侧面、右侧面和顶面。通过`extendShape`方法创建新的图形类型，并在`buildPath`函数中定义路径绘制逻辑，然后注册这三个图形到Echarts的graphic库中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// 绘制左侧面
const CubeLeft = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        // 会canvas的应该都能看得懂，shape是从custom传入的
        const xAxisPoint = shape.xAxisPoint;
        const c0 = [shape.x + 7, shape.y - 3]; // 右上
        const c1 = [shape.x - 23, shape.y - 3]; // 左上
        const c2 = [xAxisPoint[0] - 23, xAxisPoint[1]]; // 左下
        const c3 = [xAxisPoint[0] + 7, 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 CubeRight = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint;
        const c1 = [shape.x + 7, shape.y - 3]; // 左上
        const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]]; // 左下
        const c3 = [xAxisPoint[0] + 25, xAxisPoint[1] - 12]; // 右下
        const c4 = [shape.x + 25, shape.y - 15]; // 右上
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
    },
});
// 绘制顶面
const CubeTop = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
    },
    buildPath: function (ctx, shape) {
        const c1 = [shape.x + 7, shape.y - 3]; // 下
        const c2 = [shape.x + 25, shape.y - 15]; // 右
        const c3 = [shape.x - 5, shape.y - 15]; // 上
        const c4 = [shape.x - 23, shape.y - 3]; // 左
        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('CubeLeft', CubeLeft);
echarts.graphic.registerShape('CubeRight', CubeRight);
echarts.graphic.registerShape('CubeTop', CubeTop);