echars柱状图怎么每个柱子设置不同颜色

需求引出

在有的时候,我们需要给柱状图的每根柱子设置不同的颜色,或者是每几个柱子设置不同的颜色,如下图所示:

方法一

在 series 下 data 同级别中,增加一个 itemStyle 对象的属性,给color 返回一个数组

如下代码所示:

javascript 复制代码
    series: [
      {
        data: [10, 30, 20, 14, 23, 32, 34],
        //设置每个柱子不同的颜色
        itemStyle: {
          color: function (params) {
            // 根据params的
            const colorsMap = [
              '#4FE773',
              'red',
              'blue',
              '#CAC8CA',
              'yellow',
              'pink',
              'rgb(10,58,6)'
            ]
            //返回对应的颜色
            return colorsMap[params.dataIndex]
          }
        },
        type: 'bar',
        showBackground: true,
        color: '#4FE773',
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]

方法二

给 itemStyle 设置 normal 对象,每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组

代码如下:

javascript 复制代码
        itemStyle: {
          normal: {
            //每个柱子的颜色即为colorList数组里的每一项,如果柱子数目多于colorList的长度,则柱子颜色循环使用该数组
            color: function (params) {
              var colorList = [
                'rgb(164,205,238)',
                'rgb(42,170,227)',
                'rgb(25,46,94)',
                'rgb(195,229,235)'
              ]
              return colorList[params.dataIndex]
            }
          }
        },

每根柱子随机颜色

我们可以使用 Math.random() 根 rgb 的模式随机生成颜色给每一个柱子

代码如下:

javascript 复制代码
        itemStyle: {
          color: function () {
            return (
              '#' +
              Math.floor(Math.random() * (256 * 256 * 256 - 1)).toString(16)
            )
          }
        },
相关推荐
计算机-秋大田1 小时前
基于Spring Boot的船舶监造系统的设计与实现,LW+源码+讲解
java·论文阅读·spring boot·后端·vue
Yaml412 小时前
Spring Boot 与 Vue 共筑二手书籍交易卓越平台
java·spring boot·后端·mysql·spring·vue·二手书籍
清灵xmf15 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
AIoT科技物语2 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
橙某人2 天前
📊基于Vue对Echarts5进行基础封装-按需引入
前端·vue.js·echarts
琴~~2 天前
前端根据后端返回的文本流逐个展示文本内容
前端·javascript·vue
摇头的金丝猴2 天前
uniapp vue3 使用echarts-gl 绘画3d图表
前端·uni-app·echarts
程序员徐师兄2 天前
基于 JavaWeb 的宠物商城系统(附源码,文档)
java·vue·springboot·宠物·宠物商城
shareloke2 天前
让Erupt框架支持.vue文件做自定义页面模版
vue
暴富的im3 天前
Vue中使用echarts生成地图步骤详解
javascript·vue.js·echarts