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)
            )
          }
        },
相关推荐
肖祥2 小时前
uni-app x封装request,统一API接口请求
vue
阿喵派我来抓鱼6 小时前
深入理解 AI 流式接口:从请求到响应的完整解析
react.js·ai·前端框架·vue
Ciito13 小时前
查看Vue项目当前的Vue CLI版本号
vue
码界筑梦坊13 小时前
267-基于Django的携程酒店数据分析推荐系统
python·数据分析·django·毕业设计·echarts
肖祥19 小时前
uni-app x使用uview-plus
vue
dcloud_jibinbin1 天前
【uniapp】体验优化:开源工具集 uni-toolkit 发布
前端·webpack·性能优化·小程序·uni-app·vue
知识分享小能手1 天前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
HashTang1 天前
2025年10月实时最新获取地图边界数据方法,省市区县街道多级联动【文末附实时geoJson数据下载】
信息可视化·echarts·geojson·乡镇geojson·街道边界·geomap·街道geo
龙仔CLL1 天前
vue3下载图片,pdf,excle,word通用函数
pdf·vue·word
知识分享小能手2 天前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程