立体柱状图ECharts Gallery

20:11:45图表已生成
代码
// 立体柱状图

const colors = [{
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#8331D9"
            },
            {
                offset: 0.5,
                color: "#720DFF"
            },
            {
                offset: 0.5,
                color: "#B635FC"
            },
            {
                offset: 1,
                color: "#7F2CF1"
            }
        ]
    },
    {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#F27921"
            },
            {
                offset: 0.5,
                color: "#EE3E70"
            },
            {
                offset: 0.5,
                color: "#F48D35"
            },
            {
                offset: 1,
                color: "#C82957"
            }
        ]
    },
    {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#F17620"
            },
            {
                offset: 0.5,
                color: "#F5D01C"
            },
            {
                offset: 0.5,
                color: "#EF8E08"
            },
            {
                offset: 1,
                color: "#FEDC44"
            }
        ]
    },
    {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#4D34FF"
            },
            {
                offset: 0.5,
                color: "#244EFB"
            },
            {
                offset: 0.5,
                color: "#5034D9"
            },
            {
                offset: 1,
                color: "#316CE8"
            }
        ]
    },
    {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#20AAF8"
            },
            {
                offset: 0.5,
                color: "#2C74FF"
            },
            {
                offset: 0.5,
                color: "#27AEFA"
            },
            {
                offset: 1,
                color: "#4D8AFF"
            }
        ]
    },
    {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#289DF5"
            },
            {
                offset: 0.5,
                color: "#0DE8FF"
            },
            {
                offset: 0.5,
                color: "#49B1FB"
            },
            {
                offset: 1,
                color: "#17E9FD"
            }
        ]
    },
    {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#4FC3B2"
            },
            {
                offset: 0.5,
                color: "#49B5A3"
            },
            {
                offset: 0.5,
                color: "#57D1BF"
            },
            {
                offset: 1,
                color: "#5AD1BD"
            }
        ]
    }
];
const barWidth = 30;

option = {
    backgroundColor: '##182037',
    tooltip: {
        trigger: "item"
    },
    xAxis: {
        data: ["本科", "大专", "硕士", "MBA", "其他"],
        axisTick: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisLabel: {
            color: "#A1B5EB",
            fontSize: 12
        }
    },
    yAxis: {
        show: false
    },
    grid: {
        left: 0,
        right: 0
    },
    series: [{
            z: 1,
            type: "bar",
            barWidth: barWidth,
            data: [{
                    value: 220,
                    itemStyle: {
                        normal: {
                            color: colors[1]
                        }
                    }
                },
                {
                    value: 182,
                    itemStyle: {
                        normal: {
                            color: colors[2]
                        }
                    }
                },
                {
                    value: 191,
                    itemStyle: {
                        normal: {
                            color: colors[3]
                        }
                    }
                },
                {
                    value: 234,
                    itemStyle: {
                        normal: {
                            color: colors[4]
                        }
                    }
                },
                {
                    value: 290,
                    itemStyle: {
                        normal: {
                            color: colors[5]
                        }
                    }
                }
            ]
        },
        {
            z: 2,
            name: "底部",
            type: "pictorialBar",
            data: [{
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: colors[1]
                        }
                    }
                },
                {
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: colors[2]
                        }
                    }
                },
                {
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: colors[3]
                        }
                    }
                },
                {
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: colors[4]
                        }
                    }
                },
                {
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: colors[5]
                        }
                    }
                }
            ],
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [barWidth, 10]
        },
        {
            z: 3,
            name: "上部1",
            type: "pictorialBar",
            symbolPosition: "end",
            data: [{
                    value: 220,
                    itemStyle: {
                        normal: {
                            borderColor: colors[1],
                            borderWidth: 2,
                            color: colors[1]
                        }
                    }
                },
                {
                    value: 182,
                    itemStyle: {
                        normal: {
                            borderColor: colors[2],
                            borderWidth: 2,
                            color: colors[2]
                        }
                    }
                },
                {
                    value: 191,
                    itemStyle: {
                        normal: {
                            borderColor: colors[3],
                            borderWidth: 2,
                            color: colors[3]
                        }
                    }
                },
                {
                    value: 234,
                    itemStyle: {
                        normal: {
                            borderColor: colors[4],
                            borderWidth: 2,
                            color: colors[4]
                        }
                    }
                },
                {
                    value: 290,
                    itemStyle: {
                        normal: {
                            borderColor: colors[5],
                            borderWidth: 2,
                            color: colors[5]
                        }
                    }
                }
            ],
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth]
        }
    ]
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
