echarts实现柱状图不同颜色 && 柱状图横向纵向展示

柴火棒_

已于 2025-03-25 15:00:08 修改

阅读量2.3k

点赞数

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2020-07-22 18:52:07 首次发布

本文链接：https://blog.youkuaiyun.com/qq_35283993/article/details/107482828

版权

echarts 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用Echarts实现柱状图的柱体颜色差异，并展示了柱状图横向和纵向展示的切换方法。

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

柱状图不同颜色实现

series: [
                    {
                        name: '',
                        type: 'bar',
//                      color:'#50cfe4',
                        //data: [987342,524214,504344,325424,245324,242102]
                        itemStyle: {
	                    normal: {
	                        color: function(params) {//柱状图不同颜色实现
	                            // build a color map as your need.
	                            let colorList = [
	                                '#ed6974',
	                                '#efa832',
	                                '#3398dc',
	                                '#36d497',
	                                '#50cfed',
	                                "#8181ff"
	                            ];
	                            return colorList[params.dataIndex]
	                        },

	                    }
	                },
                        data:['1','3','3','5','9']
                    }
                ]

下列代码为柱状图横向展示内容，将xAxis与yAxis里面的内容互换，则为纵向轴展示

xAxis: {//将xAxis与yAxis里面的内容互换，则为纵向轴展示
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: [24210,32524,50434,52421,98742]
                },

效果图

在这里插入图片描述