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]
          }
        },
      },
    }]

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