echarts根据y轴value大小，实现不同的区间不同颜色

效果如下：

0-20%是绿色，20%-80%橙色，80%以上是红色

只需要在series配置项里添加如下代码：

        // 根据y轴区间不同设置不同颜色
          itemStyle: {
            normal: {
              color: function (params) {
                var index_color = params.value;
                if (index_color < 20) {
                  return "rgb(14, 186, 131)"
                } else if (index_color >= 20 && index_color < 80) {
                  return 'rgb(254, 185, 112)';
                } else {
                  return 'red'
                }
              }
            }
          },

全部代码如下：

<template>
  <div class="container">
    <div ref="chart" style="width:60%;height:310px;"></div>
    <el-table :header-cell-style="headerStyle" :cell-style="cellStyle" :data="performanceData"
      style="width: 100%">
      <el-table-column prop="cycle" label="周期" width="170">
      </el-table-column>
      <el-table-column prop="oldranknum" label="排名" width="170">
      </el-table-column>
      <el-table-column prop="score" label="得分">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>

export default {
  props: ["chartData"],
  data() {
    return {
      activeWidth: "",
      performanceData: [],
      // 单元格样式
      cellStyle: {
        fontSize: '16px'
      },
      // 表格头样式
      headerStyle: {
        fontSize: '16px'
      },
    }
  },
  created() {
    this.performanceData = this.chartData.performance.sort((a, b) => {
      return b.cycle - a.cycle
    })
  },
  mounted() {
    const that = this;

    this.$nextTick(function () {
      that.init();
    });
  },
  watch: {
    chartData: {
      handler() {
        const that = this;
        that.$nextTick(() => {
          that.init();
        });
      },
      deep: true,
    }
  },
  methods: {
    init() {
      console.log(this.chartData, 112);

      let chart = this.$refs.chart
      let myChart = this.$echarts.init(chart)
      let option = {
        //你的代码
        tooltip: {
          // trigger: 'axis',
          // formatter: this.chartData.ranknum,
          // formatter: (params) => {
          //   let index = params.dataIndex
          //   console.log(index, 'params', this.chartData.performance);
          //   let performance = this.performanceData
          //   let arr = performance.sort((a, b) => {
          //     return a.cycle - b.cycle
          //   })
          //   let obj = arr[index]
          //   let str = `排名:${obj.oldranknum}`
          //   return str
          // },
          // axisPointer: { // 坐标轴指示器，坐标轴触发有效
          //   type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          // },
          // confine: true
          show: false
        },
        grid: {
          left: '2%',
          right: '8%',
          bottom: '17%',
          top: '16%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          name: '',
          data: this.chartData.xAxisData,

          nameTextStyle: {
            fontSize: 18,
            // padding: [0, 50, 10, 0],
            color: '#666666',

          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ECECEC'
            }
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            show: true,
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              color: '#666666',
              fontSize: "40px"
            }
          },
        },

        yAxis: {
          type: 'value',
          name: '排名占比',
          // data: this.chartData.xAxisData,
          // nameLocation: "end",
          max: 100,
          min: 0,
          nameTextStyle: {
            fontSize: 18,
            padding: [0, 38, 10, 0],
            // fontFamily: 'Alimama DongFangDaKai'
          },
          axisLine: {
            show: false,

            lineStyle: {
              color: '#666666',
            }
          },
          axisLabel: {
            formatter: (value) => {
              if (value == 60 || value == 40) {
                return ""
              } else {
                return value + "%"
              }
            },
            textStyle: {
              fontFamily: 'Microsoft YaHei',
              fontSize: 18,
            }
          },
          axisTick: {		//x轴刻度线
            show: false
          },

        },
        series: [{
          name: '得分',
          type: 'scatter',/* 设置为散点图 */
          symbolSize: 13,/* 散点大小 */
          // barWidth: '28%',
          color: "rgb(112, 162, 252)",
          label: {
            show: false,
            formatter: '排名前' + this.chartData.data + '%',
            position: "top",  // 展示在柱子的上方
            color: "#000",
            fontSize: 18
          },
          // 根据y轴区间不同设置不同颜色
          itemStyle: {
            normal: {
              color: function (params) {
                var index_color = params.value;
                if (index_color < 20) {
                  return "rgb(14, 186, 131)"
                } else if (index_color >= 20 && index_color < 80) {
                  return 'rgb(254, 185, 112)';
                } else {
                  return 'red'
                }
              }
            }
          },

          data: this.chartData.data,
          markLine: {
            symbol: 'none', // 去掉箭头

            data: [
              {
                type: 'average',
                yAxis: 20,
                // yAxis: 0.252000,
                name: '平均值',
                // 单独配置每条线的样式
                lineStyle: {
                  color: 'rgb(123, 178, 255)',

                  type: 'solid'
                }
              },
              {
                type: 'average',
                yAxis: 80,
                // yAxis: '0.25000',
                name: '平均值',
                // 单独配置每条线的样式
                lineStyle: {
                  color: 'rgb(123, 178, 255)',

                  type: 'solid',
                }
              }

            ],
            label: {
              normal: {
                formatter: '' // 这儿设置安全基线
              }
            }
          },
          // data: [90, 44.5, 80]
        },

        ]
      };


      myChart.setOption(option)
      window.addEventListener("resize", function () {
        myChart.resize()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  display: flex;
}
.header_rum {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // width: 48%;
  margin: 0 auto -20px;
}
</style>