
卡拉云
2022/03/24阅读:169主题:默认主题
如何使 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 小时,欢迎免费试用卡拉云。
扩展阅读:
作者介绍
