echarts 立体柱状图(多个柱状图)

1.引入echarts.min.js(版本过低会出现一些让人头疼的报错)

https://cdn.bootcss.com/echarts/5.3.0/echarts.min.js

附上效果图及代码:

getEchart() {
            var chartDom = document.getElementById('echartsBox');
            var myChart = echarts.init(chartDom);
            var option;
            const sideData = [220, 182, 191, 234, 290, 330]
            const sideData1 = [100, 110, 120, 134, 190, 230]

            option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: [
                        {
                            name: "去年人数",
                            textStyle: {
                                color: 'white'
                            }
                        },
                        {
                            name: "今年人数",
                            textStyle: {
                                color: 'white'
                            }
                        }
                    ]
                },
                grid: {
                    top: '10%',
                    bottom: '62%',
                    right: '15%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        splitLine: {
                            show: false
                        },
                        data: ['三月', '四月', '五月', '六月', '七月', '八月'],
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff" //X轴文字颜色
                            },
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: "#fff" //X轴文字颜色
                            },
                        },
                    }
                ],
                series: [
                    {
                        name: '去年人数',
                        tooltip: {
                            show: false
                        },
                        type: 'bar',
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#2d8cf0" // 0% 处的颜色
                                }, {
                                    offset: 0.6,
                                    color: "#2d8cf0" // 60% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#2d8cf0" // 100% 处的颜色
                                }], false)
                            }
                        },
                        data: sideData,
                        barGap: 0,
                    }, {
                        name: '去年人数',
                        type: 'bar',
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#09337C" // 0% 处的颜色
                                }, {
                                    offset: 0.6,
                                    color: "#0761C0" // 60% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#0575DE" // 100% 处的颜色
                                }], false)
                            }
                        },
                        barGap: 0,
                        data: sideData,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: 'white',
                                fontSize: 10
                            }
                        }
                    }, {
                        name: '去年人数',
                        tooltip: {
                            show: false
                        },
                        type: 'pictorialBar',
                        itemStyle: {
                            borderWidth: 1,
                            borderColor: '#0571D5',
                            color: '#288ef3' // 控制顶部方形的颜色
                        },
                        symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
                        symbolSize: ['20', '7'], // 第一个值控制顶部方形大小
                        symbolOffset: ['-10', '-4'], // 控制顶部放行 左右和上下
                        symbolRotate: -16,
                        symbolPosition: 'end',
                        data: sideData,
                        z: 3,
                    },
                    {
                        name: '今年人数',
                        tooltip: {
                            show: false
                        },
                        type: 'bar',
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#15a00f" // 0% 处的颜色
                                }, {
                                    offset: 0.6,
                                    color: "#11ad0a" // 60% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#19c213" // 100% 处的颜色
                                }], false)
                            }
                        },
                        data: sideData1,
                        barGap: 0,

                    }, {
                        name: '今年人数',
                        type: 'bar',
                        barWidth: 10,
                        itemStyle: {
                            normal: {
                                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                    offset: 0,
                                    color: "#26ec10" // 0% 处的颜色
                                }, {
                                    offset: 0.6,
                                    color: "#26ec10" // 60% 处的颜色
                                }, {
                                    offset: 1,
                                    color: "#26ec10" // 100% 处的颜色
                                }], false)
                            }
                        },
                        barGap: 0,
                        data: sideData1,
                        label: {
                            show: true,
                            position: 'top',
                            textStyle: {
                                color: 'white',
                                fontSize: 10
                            }
                        }
                    }, {
                        name: '今年人数',
                        tooltip: {
                            show: false
                        },
                        type: 'pictorialBar',
                        itemStyle: {
                            borderWidth: 1,
                            borderColor: '#fff',
                            color: '#26ec10' // 顶部方块的颜色
                        },
                        symbol: 'path://M 0,0 l 90,0 l -60,60 l -90,0 z',
                        symbolSize: ['20', '7'], // 第一个值控制顶部方形大小
                        symbolOffset: ['10', '-4'], // 控制顶部放行 左右和上下
                        symbolRotate: -16,
                        symbolPosition: 'end',
                        data: sideData1,
                        z: 3,

                    }]
            };

            myChart.setOption(option, true);
        },

  • 4
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
ECharts是一个用于数据可视化的JavaScript库,它提供了丰富的图表类型和交互功能。立体柱状图ECharts中的一种图表类型,用于展示数据的柱状分布,并通过立体效果增加图表的立体感。在ECharts中,可以通过自定义形状和注册形状来实现立体柱状图的效果。 首先,需要创建三个形状的空壳子,并注册它们。这可以通过使用ECharts提供的`echarts.graphic.extendShape`和`echarts.graphic.registerShape`方法来实现。具体的代码可以参考引用\[2\]中的示例。 接下来,需要使用ECharts的series属性来组合两种不同类型的图表,以实现立体柱状图的效果。立体柱状图主要由三块组成:底部、主体和顶部。底部和顶部可以使用普通的柱状图来表示,而主体则需要使用自定义的形状来实现立体效果。具体的实现方法可以参考引用\[3\]中的说明。 总结起来,要实现ECharts立体柱状图,需要创建自定义形状并注册,然后使用series属性组合不同类型的图表来呈现立体效果。具体的代码和实现细节可以参考引用\[2\]和引用\[3\]中的内容。 #### 引用[.reference_title] - *1* [echarts 柱状图](https://blog.csdn.net/weixin_43957384/article/details/124411688)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [echarts - 自定义形状 - 实现立体柱状图](https://blog.csdn.net/qq_35432583/article/details/130658850)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [ECharts: 绘制立体柱状图【圆柱体】](https://blog.csdn.net/m0_58293192/article/details/128624972)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值