echarts-柱状图-渐变分隔图

先看效果图：

 

 

 

  <div style="width: 462px; height: 230px" id="energyRightTopShui2"></div>

　　

//自适应字体大小变化
WidthAdaptive(res) {
      var windth = window.innerWidth;
      let fontSize = windth / 1920;
      return fontSize * res;
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(
        document.getElementById("energyRightTopShui2")
      );
      let datas = [510, 510, 900, 1100, 510, 510, 510, 510];
      let option = {
        backgroundColor: "transparent",
        animation: true,
        grid: {
          top: "15%",
          bottom: "10%",
          right: "5%",
        },
        xAxis: {
          data: ["02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00"],
          axisLine: {
            show: true, //隐藏X轴轴线
            lineStyle: {
              type: "solid",
              color: "rgba(255,254,253,.5)",
            },
          },
          axisTick: {
            show: false, //隐藏X轴轴线
          },
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(77, 128, 254, 0.2)",
              width: this.WidthAdaptive(2),
            },
          },
          axisLabel: {
            show: true,
            fontSize: this.WidthAdaptive(12),
            textStyle: {
              color: "#ccc", //X轴文字颜色
            },
          },
        },
        yAxis: [
          {
            name: "单位（KWH）",
            nameTextStyle: {
              color: "#CCCCCC",
              fontSize: this.WidthAdaptive(12),
              margin: 10,
            },
            type: "value",
            gridIndex: 0,
            interval: 250,
            // splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgba(122,112,112,.5)",
                width: this.WidthAdaptive(2),
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: "solid",
                color: "rgba(255,254,253,.5)",
              },
            },
            axisLabel: {
              show: true,
              fontSize: this.WidthAdaptive(12),
              textStyle: {
                color: "#ccc",
              },
            },
          },
        ],
        series: [
          {
            name: "设备在线率",
            type: "bar",
            barWidth: this.WidthAdaptive(26),
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.data > 1000) {
                    console.log("sadasdsad");
                    return new vm.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(255, 128, 0, 1)",
                      },

                      {
                        offset: 1,
                        color: "rgba(255, 128, 0, 0)",
                      },
                    ]);
                  } else if (params.data > 800 && params.data < 1000) {
                    return new vm.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(255, 221, 1, 1)",
                      },

                      {
                        offset: 1,
                        color: "rgba(255, 221, 1, 0)",
                      },
                    ]);
                  } else {
                    return new vm.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: "rgba(19,152,107, 1)",
                      },

                      {
                        offset: 1,
                        color: "rgba(19,152,107, 0)",
                      },
                    ]);
                  }
                },
              },
            },
            data: datas,
            z: 10,
            zlevel: 0,
          },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#0F375F",
              },
            },
            symbolRepeat: "fixed",
            symbolMargin: 2,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [26, 2],
            symbolPosition: "start",
            symbolOffset: [6, 1],
            data: datas,
            width: this.WidthAdaptive(2),
            z: 0,
            zlevel: 1,
          },
          {
            name: "外框",
            type: "bar",
            barGap: "-110%", // 设置外框粗细
            data: [100, 100, 100, 100, 100, 100, 100],
            barWidth: 16,
            itemStyle: {
              normal: {
                color: "transparent", // 填充色
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: "top", // insideTop 或者横向的 insideLeft
                },
              },
            },
            z: 0,
          },
        ],
      };
      window.onresize = function () {
        myChart.resize();
      };
      myChart.setOption(option);
    },