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)
            )
          }
        },
相关推荐
百锦再32 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
一笑code6 小时前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
eric*16886 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹
喜欢敲代码的程序员18 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
DataGear18 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
海的诗篇_20 小时前
前端开发面试题总结-原生小程序部分
前端·javascript·面试·小程序·vue·html
sunbyte1 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
Endeavour_T1 天前
ECharts图表怎么做自适应?
前端·echarts
skyymrj11 天前
Vue3 + Tailwind CSS 后台管理系统教程
前端·css·vue
程序猿小D11 天前
[附源码+数据库+毕业论文]基于Spring+MyBatis+MySQL+Maven+Vue实现的校园二手交易平台管理系统,推荐!
java·数据库·mysql·spring·vue·毕业设计·校园二手交易平台