echarts 3d柱状图

已于 2024-04-17 14:57:08 修改
阅读量400 收藏 1
点赞数
文章标签： echarts 3d 前端
于 2023-06-02 14:29:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43086723/article/details/131006265
版权

单柱状图

在这里插入图片描述


        chart3() {
            let chart = this.$echarts.init(document.getElementById("block2-chart3"));
            const offsetX = 10;
            const offsetY = 6;
            const primaryColor = "41, 190, 255"
            const isMaxShow = true;
            // 绘制左侧面
            const CubeLeft = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    // 会canvas的应该都能看得懂，shape是从custom传入的
                    const xAxisPoint = shape.xAxisPoint;
                    // console.log(shape);
                    const c0 = [shape.x, shape.y];
                    const c1 = [shape.x - offsetX, shape.y - offsetY];
                    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                    const c3 = [xAxisPoint[0], 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 = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint;
                    const c1 = [shape.x, shape.y];
                    const c2 = [xAxisPoint[0], xAxisPoint[1]];
                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                    const c4 = [shape.x + offsetX, shape.y - offsetY];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });
            // 绘制顶面
            const CubeTop = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const c1 = [shape.x, shape.y];
                    const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
                    const c3 = [shape.x, shape.y - offsetX];
                    const c4 = [shape.x - offsetX, shape.y - offsetY];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });
            // 注册三个面图形
            this.$echarts.graphic.registerShape('CubeLeft', CubeLeft);
            this.$echarts.graphic.registerShape('CubeRight', CubeRight);
            this.$echarts.graphic.registerShape('CubeTop', CubeTop);

            const MAX = [800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800]
            const VALUE = [100, 200, 300, 400, 300, 200, 100, 300, 400, 300, 200, 100];

            var option = {
                grid: {
                    containLabel: true,
                    left: 5,
                    right: 5,
                    bottom: 10,
                    top: '30%',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                // dataZoom: [
                //     {
                //         type: 'inside',
                //         startValue: 0,
                //         endValue: 6
                //     },
                //     {
                //         startValue: 0,
                //         endValue: 6,
                //         height: 7,
                //         bottom: 0,
                //         showDetail: false
                //     }
                // ],
                legend: {
                    data: ['金额', '占比'],
                    textStyle: {
                        color: '#939AC4',
                        fontSize: 11,
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    icon: "circle",
                    left: 10,
                    top: 10,
                },
                xAxis: [
                    {
                        type: 'category',
                        // prettier-ignore
                        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)'
                            },
                        },
                        axisLabel: {
                            show: true,
                            fontSize: 11,
                            color: 'rgba(123, 129, 166, 1)'
                        },
                    }
                ],
                yAxis: [
                    {
                        name: '单位:万人',
                        nameTextStyle: {
                            fontSize: '10',
                            color: 'rgba(123, 129, 166, 1)'
                        },
                        type: 'value',
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)'
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            fontSize: 11,
                            color: 'rgba(123, 129, 166, 1)'
                        },
                        // axisLine: {
                        //     show: false,
                        // },
                    }
                ],
                series: [
                    {
                        // 最大高度
                        type: 'custom',
                        tooltip: {
                            show: false
                        },
                        renderItem: function (params, api) {
                            const location = api.coord([api.value(0), api.value(1)])
                            return {
                                type: 'group',
                                children: [{
                                    type: 'CubeLeft',
                                    shape: {
                                        api,
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0])
                                    },
                                    style: {
                                        fill: `rgba(${primaryColor}, .1)`
                                    }
                                }, {
                                    type: 'CubeRight',
                                    shape: {
                                        api,
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0])
                                    },
                                    style: {
                                        fill: `rgba(${primaryColor}, .3)`
                                    }
                                }, {
                                    type: 'CubeTop',
                                    shape: {
                                        api,
                                        x: location[0],
                                        y: location[1],
                                        xAxisPoint: api.coord([api.value(0), 0])
                                    },
                                    style: {
                                        fill: `rgba(${primaryColor}, .4)`
                                    }
                                }]
                            }
                        },
                        data: MAX
                    },
                    {
                        // 实际高度
                        type: 'custom',
                        // name: '金额',
                        itemStyle: {
                            color: 'rgba(41, 190, 255, 1)'
                        },
                        renderItem: (params, api) => {
                            const location = api.coord([api.value(0), api.value(1)]);
                            return {
                                type: 'group',
                                children: [{
                                    type: 'CubeLeft',
                                    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: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: `rgba(${primaryColor}, 1)`, // 0% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: `rgba(${primaryColor}, 0.2)`, // 100% 处的颜色
                                                },
                                            ],
                                            globalCoord: false, // 缺省为 false
                                        },
                                    },
                                },
                                {
                                    type: 'CubeRight',
                                    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: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: `rgba(${primaryColor}, 1)`, // 0% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: `rgba(${primaryColor}, 0.2)`, // 100% 处的颜色
                                                },
                                            ],
                                            globalCoord: false, // 缺省为 false
                                        },
                                    },
                                },
                                {
                                    type: 'CubeTop',
                                    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: `rgba(${primaryColor},1)`
                                    },
                                },
                                ],
                            };
                        },
                        data: VALUE,
                    },
                ]
            };

            chart.setOption(option);
            window.addEventListener("resize", function () {
                chart.resize();
            });
        }

双柱状图+折线

在这里插入图片描述


        chart1() {
            let chart = this.$echarts.init(document.getElementById("block4-chart1"));
            const offsetX = 10;
            const offsetY = 6;
            const primaryColor = "0, 108, 255"
            const primaryColor2 = "251, 101, 48"
            const isMaxShow = true;
            // 绘制左侧面
            const CubeLeft = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    // 会canvas的应该都能看得懂，shape是从custom传入的
                    const xAxisPoint = shape.xAxisPoint;
                    // console.log(shape);
                    const c0 = [shape.x, shape.y];
                    const c1 = [shape.x - offsetX, shape.y - offsetY];
                    const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
                    const c3 = [xAxisPoint[0], 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 = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const xAxisPoint = shape.xAxisPoint;
                    const c1 = [shape.x, shape.y];
                    const c2 = [xAxisPoint[0], xAxisPoint[1]];
                    const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
                    const c4 = [shape.x + offsetX, shape.y - offsetY];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });
            // 绘制顶面
            const CubeTop = this.$echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                },
                buildPath: function (ctx, shape) {
                    const c1 = [shape.x, shape.y];
                    const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
                    const c3 = [shape.x, shape.y - offsetX];
                    const c4 = [shape.x - offsetX, shape.y - offsetY];
                    ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
                },
            });
            // 注册三个面图形
            this.$echarts.graphic.registerShape('CubeLeft', CubeLeft);
            this.$echarts.graphic.registerShape('CubeRight', CubeRight);
            this.$echarts.graphic.registerShape('CubeTop', CubeTop);

            const MAX = [800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800]
            const VALUE = [100, 200, 300, 400, 300, 200, 100,300, 400, 300, 200, 100];

            var option = {
                grid: {
                    containLabel: true,
                    left: 5,
                    right: 5,
                    bottom: 10,
                    top: '30%',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                // dataZoom: [
                //     {
                //         type: 'inside',
                //         startValue: 0,
                //         endValue: 6
                //     },
                //     {
                //         startValue: 0,
                //         endValue: 6,
                //         height: 7,
                //         bottom: 0,
                //         showDetail: false
                //     }
                // ],
                legend: {
                    data: ['办理套餐量', '退订量', '退订率'],
                    textStyle: {
                        color: '#939AC4',
                        fontSize: 11,
                    },
                    itemWidth: 10,
                    itemHeight: 10,
                    icon: "circle",
                    left: 10,
                    top: 10,
                },
                xAxis: [
                    {
                        type: 'category',
                        // prettier-ignore
                        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],

                        axisTick: {
                            show: false,
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)'
                            },
                        },
                        axisLabel: {
                            show: true,
                            fontSize: 11,
                            color: 'rgba(123, 129, 166, 1)'
                        },
                    }
                ],
                yAxis: [
                    {
                        name: '单位：万元',
                        nameTextStyle: {
                            fontSize: '10',
                            color: 'rgba(123, 129, 166, 1)'
                        },
                        type: 'value',
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(255,255,255,0.1)'
                            },
                        },
                        splitLine: {
                            show: false,
                        },
                        axisLabel: {
                            show: true,
                            fontSize: 11,
                            color: 'rgba(123, 129, 166, 1)'
                        },
                        // axisLine: {
                        //     show: false,
                        // },
                    },
                    {
                        name: '%：单位',
                        nameTextStyle: {
                            fontSize: '10',
                            color: 'rgba(123, 129, 166, 1)'
                        },
                        type: 'value',
                        axisTick: {
                            show: false,
                        },
                        axisLabel: {
                            formatter: "{value}%",
                            fontSize: 11,
                            color: 'rgba(123, 129, 166, 1)'
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: "dashed",
                                color: "rgba(255,255,255,.1)",
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                    }
                ],
                series: [
                    {
                        // 最大高度
                        type: 'custom',
                        tooltip: {
                            show: false
                        },
                        renderItem: function (params, api) {
                            const location = api.coord([api.value(0), api.value(1)])
                            return {
                                type: 'group',
                                x: -10,
                                children: [
                                    {
                                        type: 'CubeLeft',
                                        shape: {
                                            api,
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0])
                                        },
                                        style: {
                                            fill: `rgba(${primaryColor}, .1)`
                                        }
                                    }, {
                                        type: 'CubeRight',
                                        shape: {
                                            api,
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0])
                                        },
                                        style: {
                                            fill: `rgba(${primaryColor}, .3)`
                                        }
                                    }, {
                                        type: 'CubeTop',
                                        shape: {
                                            api,
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0])
                                        },
                                        style: {
                                            fill: `rgba(${primaryColor}, .4)`
                                        }
                                    }]
                            }
                        },
                        data: MAX
                    },
                    {
                        // 最大高度
                        type: 'custom',
                        
                        itemStyle: {
                            color: 'rgba(0, 108, 255, 1)'
                        },
                        name: '办理套餐量',
                        renderItem: function (params, api) {
                            const location = api.coord([api.value(0), api.value(1)])
                            return {
                                type: 'group',
                                x: -10,
                                children: [
                                    {
                                        type: 'CubeLeft',
                                        shape: {
                                            api,
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0])
                                        },
                                        style: {
                                            fill: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: `rgba(${primaryColor}, 1)`, // 0% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: `rgba(${primaryColor}, 0.2)`, // 100% 处的颜色
                                                },
                                            ],
                                            globalCoord: false, // 缺省为 false
                                        },
                                        }
                                    }, {
                                        type: 'CubeRight',
                                        shape: {
                                            api,
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0])
                                        },
                                        style: {
                                            fill: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: `rgba(${primaryColor}, 1)`, // 0% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: `rgba(${primaryColor}, 0.2)`, // 100% 处的颜色
                                                },
                                            ],
                                            globalCoord: false, // 缺省为 false
                                        },
                                        }
                                    }, {
                                        type: 'CubeTop',
                                        shape: {
                                            api,
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0])
                                        },
                                        style: {
                                            fill: `rgba(${primaryColor}, 1)`
                                        }
                                    }]
                            }
                        },
                        data: VALUE
                    },
                    {
                        // 最大高度
                        type: 'custom',
                        tooltip: {
                            show: false
                        },
                        renderItem: function (params, api) {
                            const location = api.coord([api.value(0), api.value(1)])
                            return {
                                type: 'group',
                                x: 12,
                                children: [
                                    {
                                        type: 'CubeLeft',
                                        shape: {
                                            api,
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0])
                                        },
                                        style: {
                                            fill: `rgba(${primaryColor2}, .1)`
                                        }
                                    }, {
                                        type: 'CubeRight',
                                        shape: {
                                            api,
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0])
                                        },
                                        style: {
                                            fill: `rgba(${primaryColor2}, .3)`
                                        }
                                    }, {
                                        type: 'CubeTop',
                                        shape: {
                                            api,
                                            x: location[0],
                                            y: location[1],
                                            xAxisPoint: api.coord([api.value(0), 0])
                                        },
                                        style: {
                                            fill: `rgba(${primaryColor2}, .4)`
                                        }
                                    }]
                            }
                        },
                        data: MAX
                    },
                    {
                        // 实际高度
                        type: 'custom',
                        name: '退订量',
                        // tooltip: {
                        //     show: false
                        // },
                        renderItem: (params, api) => {
                            const location = api.coord([api.value(0), api.value(1)]);
                            return {
                                type: 'group',
                                x: 12,
                                children: [{
                                    type: 'CubeLeft',
                                    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: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: `rgba(${primaryColor2}, 1)`, // 0% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: `rgba(${primaryColor2}, 0.2)`, // 100% 处的颜色
                                                },
                                            ],
                                            globalCoord: false, // 缺省为 false
                                        },
                                    },
                                },
                                {
                                    type: 'CubeRight',
                                    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: {
                                            type: 'linear',
                                            x: 0,
                                            y: 0,
                                            x2: 0,
                                            y2: 1,
                                            colorStops: [
                                                {
                                                    offset: 0,
                                                    color: `rgba(${primaryColor2}, 1)`, // 0% 处的颜色
                                                },
                                                {
                                                    offset: 1,
                                                    color: `rgba(${primaryColor2}, 0.2)`, // 100% 处的颜色
                                                },
                                            ],
                                            globalCoord: false, // 缺省为 false
                                        },
                                    },
                                },
                                {
                                    type: 'CubeTop',
                                    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: `rgba(${primaryColor2},1)`
                                    },
                                },
                                ],
                            };
                        },
                        data: VALUE,
                    },
                    {
                        name: '退订率',
                        yAxisIndex: 1,
                        type: 'line',
                        // smooth: true, //是否平滑
                        showAllSymbol: true,
                        // symbol: 'image://./static/images/guang-circle.png',
                        symbol: 'circle',
                        symbolSize: 10,
                        lineStyle: {
                            normal: {
                                color: 'rgba(37, 241, 181, 1)',
                                type: 'dashed'
                            },
                        },
                        itemStyle: {
                            color: "rgba(37, 241, 181, 1)",
                            borderColor: "#fff",
                            borderWidth: 3,
                        },
                        data: VALUE
                    },

                ]
            };

            chart.setOption(option);
            window.addEventListener("resize", function () {
                chart.resize();
            });
        },
Mr.LiLong
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
echart实现3D柱状图效果
01-31
echart.js实现动态3D效果，酷炫的效果，值得研究看看哈
echarts的柱状图立体效果解决方案
08-26
echarts的柱状图立体效果解决方案 echarts.graphic.LinearGradient https://blog.csdn.net/qiaoshuai0920/article/details/99844771
echarts绘制三维柱状图
最新发布
pengbr的博客
06-02 1186
echarts ECharts 是一个使用 JavaScript 实现的开源可视化库，主要用于数据的可视化展示。ECharts 支持丰富的图表类型，如折线图、柱状图、饼图、地图、K线图等，可以满足不同类型数据的展示需求。 文档地址：echarts 本次所绘制三维柱状图主要使用的是示例源代码，在此基础上做了些修改。 引入CDN 使用echarts需要导入echarts和echarts-gl。 免费的CDN服务可访问网址：Staticfile CDN <!-- 引入 ECharts 文件 --> &
echarts--3D效果柱状图
生命不息，学习不止
07-05 1365
柱状图实现3D效果
Echarts实现3D柱状图
qq_45787691的博客
04-22 1081
echarts实现3D柱状图。
echarts实现3D柱状图（视觉层面）和3D饼图
热门推荐
布克吉的博客
06-06 1万+
立体图形从一个方向只能看到三个面，于是我们通过echarts图表实现 顶部，明面，和暗面。更多参数配置，前往echarts官网查询，
echarts 实现 3d 柱状图
weixin_38992765的博客
07-28 5322
echart+vue3 实现 3d 柱状图
Echarts 3D柱形图和3D堆叠柱形图实现
z1076233241的博客
05-28 3859
这个图本身组成部分多样，一组双柱图（蓝绿柱子），由10个部分构成，解释其中一个（蓝色），一个由3个菱形，2个直边构成。3个菱形为上、中、底部，2个直边为背景虚化的柱子，和蓝颜色柱子，绿色柱子同理。其中，直边的图形利用两种颜色，深浅不一进行渲染，出现了类似于直边的效果。最后吐槽，我原本想实现的柱形图，是上方为平行四边形的类型的柱形图，但发现，Echarts自带的图形中，没有平行四边形，得自己画或者去官方那里放入图片进行代码的生成导出，于是放弃，使用这种网上查找的大多数人使用的菱形进行操作。
echarts3d柱状图
qq_51389137的博客
08-10 1281
【代码】echarts3d柱状图。
echarts的图表立体感——实现立体柱状图和立体饼图的详细教程
杜永康的博客
11-01 1万+
准备HTML结构和容器，用于容纳图表的展示。初始化Echarts实例，并将之前创建的容器关联起来。配置图表所需的数据，包括x轴和对应的柱状图的高度值（对于立体柱状图）或每个扇区的名称和对应的数值（对于立体饼图）。配置图表的选项，包括样式、颜色和其他属性。渲染图表并呈现在页面中，通过调用Echarts实例的setOption方法将之前配置好的选项应用到图表中，并通过调用Echarts实例的render方法将图表渲染出来。
echarts 3D柱图
qq_34169240的博客
02-08 605
getEcharts3DBar (xAxisData, data, colorType) { var colorArr = []; if (colorType == '01') { colorArr = ["#2886c6", "#50bfda", "#89e3ec"]; } else if (colorType == '02') { colorArr = ["#28c1c6", "#50dac0", "#87e8c7"];...
c#绘制3D柱状图
05-14
C#生成3D柱状图，同时可修改柱状图的参数以调整柱状图的显示。此项目可运行
echarts柱状图
11-11
**ECharts柱状图详解** ECharts是一款由百度开源的，基于JavaScript的数据可视化库，它提供了丰富的图表类型，包括柱状图、饼图等，能够满足各种数据分析和展示的需求。在本篇中，我们将深入探讨ECharts中的柱状图...
3D柱状图 给每根柱子设置不同的颜色.zip
12-21
在数据分析和可视化领域，ECharts是一个非常流行的JavaScript库，它提供了丰富的图表类型，包括2D和3D柱状图。本教程将详细讲解如何在ECharts中创建3D柱状图，并为每根柱子设置不同的颜色，以增强数据的表现力和视觉...
echarts堆叠柱状图(顶端圆角）.rar
07-30
echarts实现堆叠柱状图(顶端圆角），并统计总数，自定义柱体颜色
【Echarts系列】—— 实现电池图、3D立体圆形柱状图
Hannah_wy的博客
05-16 1177
【代码】【Echarts系列】—— 实现电池图、3D立体圆形柱状图。
极致呈现系列之：ECharts3D柱状图的维度穿梭
九仞山的专栏
06-30 1166
ECharts3D柱状图的使用
记录下echarts立体柱形图实现的几种方式
qq_35438952的博客
03-24 2557
ecarts立体柱形图实现方法
Vue+Echarts实现3D效果柱状图（仅使用Echarts实现）
书山有路勤为径，学海无涯苦作舟
04-23 1331
实现这种效果主要是: ECharts中的 series 属性,通过两种不同类型的图表组合而成. 其中里面的柱体渐变色是通过。ECharts中内置的渐变色生成器 echarts.graphic.LinearGradient。type: “pictorialBar”, // pictorialBar(象形柱图)echarts使用的版本： “vue-echarts”: “^6.2.3”,type: “bar”, // bar(柱状图)可以用来设置渐变色.
echarts3D柱状图
09-14
ECharts 是一个由百度开发的数据可视化库，它提供了丰富而强大的图表功能，包括 3D 柱状图。要绘制一个 ECharts 3D 柱状图，你可以按照以下步骤进行操作： 1. 首先，确保你已经引入了 ECharts 库。你可以在 HTML ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值