echarts柱形图根据数据排序顺序要求更改颜色

今天写项目的时候遇到一个需求:柱形图根据数据将数据最大的三个柱形颜色改为‘#00CC33’,将数据最小的三个颜色改为‘#D00000’,记录实现方法:

//在柱形图的option中
series: [{
    name: '企业得分率',
    type: 'bar',
    barWidth: 30,
    barGap: '-100%',//重叠效果(可放在任意一个组中)
    data: companyValue, //柱形图数据

    //-------!往下是重点---------柱状图颜色设置----------------

    itemStyle: {
      normal: {
         //参数是一个回调
         color: function (params) {
             var colorList = []  //定义一个存储颜色的数组
            //更改前三位和后三位柱形颜色
            //定义一个变量 保存柱形图数据 因为sort方法排序会改变原数组 使用JSON方法深拷贝 将原数值暂存   
             let companyValue1 = JSON.parse(JSON.stringify(companyValue))
             let arr = companyValue.sort((a, b) => {
                 return b - a
             })
             //将原数组数据赋值回去  保持数据不变
             companyValue = JSON.parse(JSON.stringify(companyValue1))
             //遍历数据 将原数组和排序后的数组比较 
             //如果原数组的值等于排序后的数组的前三位 向颜色存储数组中push一个'#00CC33'
             //如果原数组的值等于排序后的数组的后三位 向颜色存储数组中push一个'#D00000'
             //否则push一个"#3398DB"
             companyValue.map(i => {
                if (i == arr[0] || i == arr[1] || i == arr[2]) {
                    colorList.push('#00CC33')
                } else if (i == arr[arr.length - 1] || i == arr[arr.length-3] || i                         == arr[arr.length - 2]) {
                     colorList.push('#D00000')
                }else{
                     colorList.push('#3398DB')
                }
             })
             //返回一个存储着颜色的数组根据数据index顺序渲染到页面
             return colorList[params.dataIndex]
          }
        },
      },
    }]

此文章主要为了方便自己日后查阅,希望能帮到你,文章中有什么问题还请大家指出 谢谢!

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值