如何使 Vue ECharts 柱状图中，每个柱子颜色各不同（随机或指定颜色）

本文首发：《如何使 Vue ECharts 柱状图中，每个柱子颜色各不同（随机或指定颜色）》

Vue ECharts 柱状图中的每根柱子颜色其实都可以自定义或者随机显示颜色。比如 X 轴是各团队名，那么你可以根据各团队独有的识别色，指定柱子的颜色显示。又或者我们需要柱状图中，不论 X 轴数据有多少组，每组的柱子颜色都不一样（颜色无限随机）。本文讲解两种配置修改 ECharts 柱子颜色的方法。

另外，这个世界已经悄然发生变化，现在根本无需写任何前端代码，直接使用卡拉云 —— 新一代低代码开发工具帮你搭建后台工具，卡拉云可一键接入常见数据库及 API ，无需懂前端，内置完善的各类前端组件，无需调试，拖拽即用。原来三天的工作量，现在 1 小时搞定，谁用谁知道，用上早下班，详见本文文末。

我们开始吧。

Vue ECharts 柱状图中，柱子颜色随机显示

这种 ECharts 颜色随机的配置方法特别适合 X 坐标上的点数量不一定一致的情况，不论 X 轴有多少数据点，每一个柱子的颜色都是不一样的。

myChart.setOption({
            title: { text: '卡拉云 - 销售团队情况汇总' },
            tooltip: {},

            xAxis: {
              data: ["蒋铁柱团队","谢国庆团队","卡拉云小火箭","木棉花团队","橘子可乐团队","太阳花团队","蒸汽火车团队","金元宝团队","龙猫煤球团队","森林小仙团队","竹竹高团队","黑猫黑猫团队"],
              name:"团队名",  // X 坐标轴名称
              nameLocation:'end',    // 名称显示在 X 坐标轴的位置
              axisLabel : {    //  X 坐标轴标签相关设置
              interval:0,
              rotate:"45"
                }
            },

            yAxis: {},

            series: [{
                    name: '销量',
                    type: 'bar',
                    data: [51.09,38.63,48.28,38.84,38.36,61.78,99.33,76.27,35.66,96.82,49.97,64.00],
                    itemStyle: {
                        normal: {
                            color:function(){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
                        },
                    },
                  }],
      });

扩展阅读：《顶级好用的 8 款 Vue 弹窗组件测评与推荐》

Vue ECharts 柱状图中，柱子多颜色显示

我们也可以指定每一个柱子的颜色，可以根据你数据需要的颜色配置相应的颜色显示。这种适合图例类的场景，数据与颜色一一对应，让读者能直观的从颜色上快速区分数据。

myChart.setOption({
            title: { text: '卡拉云 - 销售团队情况汇总' },
            xAxis: {
              data: ["蒋铁柱团队","谢国庆团队","卡拉云小火箭","木棉花团队","橘子可乐团队","太阳花团队","蒸汽火车团队","金元宝团队","龙猫煤球团队","森林小仙团队","竹竹高团队","黑猫黑猫团队"],
              name:"团队名",  // X 坐标轴名称
              nameLocation:'end',    // 名称显示在 X 坐标轴的位置
              axisLabel : {    //  X 坐标轴标签相关设置
              interval:0,
              rotate:"45"
                }
            },

            yAxis: {},
            series: [{
                    name: '销量',
                    type: 'bar',
                    data: [51.09,38.63,48.28,38.84,38.36,61.78,99.33,76.27,35.66,96.82,49.97,64.00],
                    itemStyle: {
                      "color":function(params){
                          var colorarrays = ["#5119e4","#fd6975","#dbdaad","#7f99ea","#3c05fa","#9c65f4","#32a78e","#3ad94d","#748259","#b629e0","#abde87","#6edaf4"];
                          return colorarrays[params.dataIndex];
                        }
                    },
                  }],
      });

特别提示： 如果 X 轴上的 data 过长，会导致所有文字重叠在一起，你可以将文字扭转 45 度，即可完美错开，就像我上面的图示一样。如何旋转 ECharts X 轴文字可看这篇文字《ECharts X 轴标签过长导致文字重叠的 4 种解决方案》

使用「卡拉云」直接生成柱状图

本文介绍了如何解决在 Vue 中 ECharts 柱状图指定或随机颜色的解决方案，虽然开源库已经帮我们解决了大部分造轮子的事，但总有些细枝末节的问题需要我们自己手动解决。那么有没有一种完全不用会前端，一行代码也不用写的方法，生成图表呢？这里推荐你使用卡拉云，卡拉云内置多种样式的图表，仅需鼠标拖拽即可生成，完全不用懂任何前端。

卡拉云是新一代低代码开发工具，免安装部署，可一键接入包括 MySQL 在内的常见数据库及 API。可根据自己的工作流，定制开发。无需繁琐的前端开发，只需要简单拖拽，即可快速搭建企业内部工具。原来三天的开发工作量，使用卡拉云后可缩减至 1 小时，欢迎免费试用卡拉云。

扩展阅读：

分类：

前端

标签：

Vue.js

作者介绍