echarts横向柱状图单个柱子设置警戒线，超过警戒线为渐变蓝色，没超过为渐变红色

效果图如下

 

话不多说，直接上代码。

<!-- eslint-disable no-constant-condition -->
<template>
  <v-chart class="chart" :option="option" :autoresize="true" />
</template>

<script>
import "echarts/lib/component/markLine";
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { BarChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
} from "echarts/components";
import ECharts, { THEME_KEY } from "vue-echarts";

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
]);

export default {
  name: "chart-8",
  props: {
    chartData: {
      type: Array,
      default: null,
    },
  },
  components: {
    "v-chart": ECharts,
  },
  provide: {
    [THEME_KEY]: "light",
  },
  data() {
    return {
      option: null,
    };
  },
  watch: {
    chartData: {
      handler(val) {
        // console.log(val,'chartDatachartDatachartData');
        const zdValueData = val?.map((item) => item.zdValue+'吨'); //最大值
        const mcNameData = val?.map((item) => item.mcName); //材料名称
        const currValueData = val?.map((item) => item.currValue); //实际库存量
        const warnValueData = val?.map((item) => item.warnValue); //危险预警值
        // console.log(zdValueData,mcNameData,currValueData,warnValueData);
        const warnLine1 = warnValueData[0];
        const warnLine2 = warnValueData[1];
        const warnLine3 = warnValueData[2];
        const warnLine4 = warnValueData[3];
        const warnLine5 = warnValueData[4];
        this.$data.option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            textStyle: { color: "#fff" },
            y: "20px",
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
            boundaryGap: [0, 0.01],
            splitLine: {
              show: false,
            },
            axisLabel: {
              //y轴上带的单位
              formatter: "",
            },
          },
          yAxis: [
            {
              type: "category",
              data: mcNameData,
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                //y轴上带的单位
                color: "#fff",
              },
            },
            {
              type: "category",
              data: zdValueData,
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                //y轴上带的单位

                color: "#fff",
              },
            },
          ],
          series: [
            {
              name: "实际库存量",
              type: "bar",
              data: currValueData,
              barWidth: 15,
              itemStyle: {
                normal: {
                  label: {
                    show: true, //开启显示
                    position: "inside", //在上方显示
                    textStyle: {
                      //数值样式
                      color: "#fff",
                    },
                  },
                  color: function (params) {
                    if (
                      currValueData[params.dataIndex] >= 
                      warnValueData[params.dataIndex]
                    ) {
                      return {
                        type: "linear",
                        x: 0, //右
                        y: 0, //下
                        x2: 1, //左
                        y2: 0, //上
                        colorStops: [
                          {
                            offset: 0,
                            color: "#0067ae", // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#00ccfd", // 100% 处的颜色
                          },
                        ],
                      };
                    } else {
                      return {
                        type: "linear",
                        x: 0, //右
                        y: 0, //下
                        x2: 1, //左
                        y2: 0, //上
                        colorStops: [
                          {
                            offset: 0,
                            color: "#594d74", // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: "#f56e4a", // 100% 处的颜色
                          },
                        ],
                      };
                    }
                  },
                },
              },
              showBackground: true,
              markLine: {
                symbol: "none",
                name: "xx",
                lineStyle: {
                  width: "2",
                },
                data: [
                  [
                    //第一条警戒线
                    {
                      xAxis: warnLine5,
                      y: 70, //设置警戒线的起点偏移量
                      lineStyle: { type: "solid", color: "red" },
                      label: { show: true, position: "middle" },
                    },
                    {
                      position: "middle",
                      xAxis: warnLine5,
                      y: 85, //设置警戒线的终点偏移量
                      lineStyle: { type: "solid", color: "red" },
                      label: { show: true, position: "end" },
                    },
                  ],
                  [
                    //第二条警戒线
                    {
                      xAxis: warnLine4,
                      y: 104, //设置警戒线的起点偏移量
                      lineStyle: { type: "solid", color: "red" },
                      label: { show: true, position: "middle" },
                    },
                    {
                      position: "middle",
                      xAxis: warnLine4,
                      y: 119, //设置警戒线的终点偏移量
                      lineStyle: { type: "solid", color: "red" },
                      label: { show: true, position: "end" },
                    },
                  ],
                  [
                    //第三条警戒线
                    {
                      xAxis: warnLine3,
                      y: 138, //设置警戒线的起点偏移量
                      lineStyle: { type: "solid", color: "red" },
                      label: { show: true, position: "middle" },
                    },
                    {
                      position: "middle",
                      xAxis: warnLine3,
                      y: 153, //设置警戒线的终点偏移量
                      lineStyle: { type: "solid", color: "red" },
                      label: { show: true, position: "end" },
                    },
                  ],
                  [
                    //第四条警戒线
                    {
                      xAxis: warnLine2,
                      y: 172, //设置警戒线的起点偏移量
                      lineStyle: { type: "solid", color: "red" },
                      label: { show: true, position: "middle" },
                    },
                    {
                      position: "middle",
                      xAxis: warnLine2,
                      y: 187, //设置警戒线的终点偏移量
                      lineStyle: { type: "solid", color: "red" },
                      label: { show: true, position: "end" },
                    },
                  ],
                  [
                    //第四条警戒线
                    {
                      xAxis: warnLine1,
                      y: 206, //设置警戒线的起点偏移量
                      lineStyle: { type: "solid", color: "red" },
                      label: { show: true, position: "middle" },
                    },
                    {
                      position: "middle",
                      xAxis: warnLine1,
                      y: 221, //设置警戒线的终点偏移量
                      lineStyle: { type: "solid", color: "red" },
                      label: { show: true, position: "end" },
                    },
                  ],
                ],
              },
            },
          ],
        };
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style scoped>
</style>