vue+css实现颜色渐变

<template>
  <div class="ColorGradient">
    <div :style="legendDivStyle">
      <div class="ui-legend-cell-div">
        <template v-for="item in colorItems">
          <div :key="item.id" :style="item.style"></div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { ColorUtil } from "../assets/js/colorUtil";
export default {
  name: "ColorGradient",
  data() {
    return {
      options: {
        data: {
          colors: [
            "#040274",
            "#040281",
            "#0502a3",
            "#0502b8",
            "#0502ce",
            "#0502e6",
            "#0602ff",
            "#235cb1",
            "#307ef3",
            "#269db1",
            "#30c8e2",
            "#32d3ef",
            "#3be285",
            "#3ff38f",
            "#86e26f",
            "#3ae237",
            "#b5e22e",
            "#d6e21f",
            "#fff705",
            "#ffd611",
            "#ffb613",
            "#ff8b13",
            "#ff6e08",
            "#ff500d",
            "#ff0000",
            "#de0101",
            "#c21301",
            "#a71001",
            "#911003",
          ],
          step: 30,
          isvertical: false,
        },
        style: {
          width: "500px",
          height: "70px",
        },
      },
      colorItems: [],
      legendDivStyle: {},
    };
  },
  computed: {},
  mounted() {
    this.initLegend();
  },
  methods: {
    initLegend() {
      if (!this.options || !this.options.data) {
        return;
      }
      let _data = this.options.data;
      let _style = this.options.style;
      this.isvertical = false;
      let totalWidth = parseInt(_style.width.replace("px", ""));
      let totalHeight = parseInt(_style.height.replace("px", ""));
      this.legendDivStyle = {};
      this.legendDivStyle.width = _style.width;
      let _colors = _data.colors || [];
      let _step = _data.step || 10;
      let _cellWidth = totalWidth / ((_colors.length - 1) * _step + 1);
      let _cellHeight =
        (totalHeight - 30) / (_colors.length * _step - _step + 1);
      for (let i = 0; i < _colors.length; i++) {
        let _gradient = null;
        if (i < _colors.length - 1) {
          _gradient = ColorUtil.gradientColor(
            _colors[i],
            _colors[i + 1],
            _step
          );
        } else {
          _gradient = ColorUtil.gradientColor(_colors[i], _colors[i], 1);
        }
        for (let j = 0; j < _gradient.length; j++) {
          let _id = "legend" + (i + 1) + "-" + j;
          let _style = {
            width: _cellWidth + "px",
            height: "100%",
            float: "left",
            backgroundColor: _gradient[j],
          };
          this.colorItems.push({
            id: _id,
            style: _style,
          });
        }
      }
    },
  },
};
</script>
<style scoped>
.ColorGradient {
  width: 100%;
  height: 100%;
}
.ui-legend-cell-div {
  display: flex;
  width: 100%;
  height: 20px;
}
</style>