echarts实现柱状图超过平均值红色，未超过平均值部分灰色

效果如图

代码实现，就是计算差值，再利用service-type.bar.stack来叠加柱子

     let chartsBar = echarts.init(this.$refs.chart_bar);

        let barLegend = [
          {
            name: "预警发布",
            color: "#FF5B5B",
          }, {
            name: "预警反馈",
            color: "#40AFDD",
          }, {
            name: "预警实施",
            color: "#EEBE85",
          }, {
            name: "风险督查",
            color: "#5BD4D8",
          },
        ]


        let dataList = [
          {
            name: "株洲",
            release: 12,//预警发布
            feedback: 19,//预警反馈
            implement: 38,//实施
            supervision: 10,//风险督查
            total: 20,
            average: 30,
          },
          {
            name: "长沙",
            release: 12,//预警发布
            feedback: 19,//预警反馈
            implement: 18,//实施
            supervision: 10,//风险督查
            total: 20,
            average: 30,


          }, {
            name: "超高压变电",
            release: 12,//预警发布
            feedback: 29,//预警反馈
            implement: 78,//实施
            supervision: 10,//风险督查
            total: 20,
            average: 20,

          },
        ]
        var xData = []
        let xAxis = []

        var legendData = [];
        var seriesDatas = [];
        var maxData = []
        let series = [];
        for (let i = 0; i < barLegend.length; i++) {
          legendData.push(barLegend[i].name);
          seriesDatas.push([]);
          maxData.push([]);
          series.push(

            {
              name: barLegend[i].name,
              type: 'bar',
              stack: i.toString(),
              barGap: 0,
              label: {
                show: true,
                position: 'insideTop',
                color: '#fff',
              },
              itemStyle: {
                color: barLegend[i].color,
              },
              data: seriesDatas[i]
            })
          series.push(

            {
              name: "超出的",
              type: 'bar',
              stack: i.toString(),
              barGap: 0,
              label: {
                show: false,
                position: 'insideTop',
                color: '#fff',
              },
              itemStyle: {
                color: (params) => {
                  if (params.data.over) {
                    return "#E20C0C"
                  } else {
                    return "#4C7CA9"
                  }
                },
              },
              data: maxData[i]
            })

        }

        dataList.forEach((item, i) => {
          xData.push(item.name)
          seriesDatas[0].push(item.release - item.average > 0 ? item.average : item.release);
          seriesDatas[1].push(item.feedback - item.average > 0 ? item.average : item.feedback);
          seriesDatas[2].push(item.implement - item.average > 0 ? item.average : item.implement);
          seriesDatas[3].push(item.supervision - item.average > 0 ? item.average : item.supervision);
          maxData[0].push((item.average - item.release) > 0 ? (item.average - item.release) : { value: Math.abs(item.average - item.release), over: true })
          maxData[1].push((item.average - item.feedback) > 0 ? (item.average - item.feedback) : { value: Math.abs(item.average - item.feedback), over: true })
          maxData[2].push((item.average - item.implement) > 0 ? (item.average - item.implement) : { value: Math.abs(item.average - item.implement), over: true })
          maxData[3].push((item.average - item.supervision) > 0 ? (item.average - item.supervision) : { value: Math.abs(item.average - item.supervision), over: true })
        })
        let ticketOption = {
          backgroundColor: "#000",
          //提示框
          tooltip: {
            trigger: 'axis',
            backgroundColor: 'gray',
            axisPointer: {
              type: 'shadow'
            },
            formatter: function (params) {
              let htmlStr = `
          <div>
            ${params[0].marker}${params[0].seriesName}${params[1].data.over ? (params[0].value + params[1].value) : params[0].value}</br>
            ${params[2].marker}${params[2].seriesName}${params[3].data.over ? (params[3].value + params[2].value) : params[2].value}</br>
            ${params[4].marker}${params[4].seriesName}${params[5].data.over ? (params[5].value + params[4].value) : params[4].value}</br>
            ${params[6].marker}${params[6].seriesName}${params[7].data.over ? (params[6].value + params[7].value) : params[6].value}</br>
      </div>
              `
              return htmlStr;
            }
          },
          //菜单
          legend: {
            //菜单字体样式
            textStyle: {
              color: 'white'
            },
            icon: "circle",
            //菜单数据
            data: legendData
          },

          xAxis: [{
            type: 'category',
            axisLine: {
              show: true,
              //x轴线样式
              lineStyle: {
                color: '#03FFFC',
                width: 1,
                type: 'solid',
              }
            },
            axisTick: {
              show: false,//不显示坐标轴刻度线
            },
            //x轴字体设置
            axisLabel: {
              show: true,
              fontSize: 12,
              color: 'white'
            },
            data: xData
          }],
          yAxis: [{
            min: 0,
            axisTick: {
              show: false,//不显示坐标轴刻度线
            },
            type: 'value',
            //y轴字体设置
            axisLabel: {
              show: true,
              color: 'white',
              fontSize: 12,
            },
            //y轴线设置不显示
            axisLine: {
              show: true,
              lineStyle: {
                color: '#03FFFC',
                width: 1,
                type: 'solid',
              }
            },
            //与x轴平行的线样式
            splitLine: {
              show: true,
              lineStyle: {
                color: '#2E638F',
                width: 1,
                type: 'dashd',
              }
            }
          }],
          series: series
        };
        chartsBar.setOption(ticketOption);