卡拉云

V1

2022/03/24阅读:81主题:默认主题

如何使 Vue ECharts 柱状图中,每个柱子颜色各不同(随机或指定颜色)

echart
echart

本文首发:《如何使 Vue ECharts 柱状图中,每个柱子颜色各不同(随机或指定颜色)

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

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

我们开始吧。

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

01-vue-different-color-bar-echarts
01-vue-different-color-bar-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 柱状图中,柱子多颜色显示

02-vue-color-bar-echarts
02-vue-color-bar-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 柱状图指定或随机颜色的解决方案,虽然开源库已经帮我们解决了大部分造轮子的事,但总有些细枝末节的问题需要我们自己手动解决。那么有没有一种完全不用会前端,一行代码也不用写的方法,生成图表呢?这里推荐你使用卡拉云,卡拉云内置多种样式的图表,仅需鼠标拖拽即可生成,完全不用懂任何前端。

03-kalacloud-charts
03-kalacloud-charts

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

扩展阅读:

分类:

前端

标签:

Vue.js

作者介绍

卡拉云
V1