echart卡片的主题色根据后端返回的折现颜色动态渲染

实现效果：

代码：

 <div class="setCardItemColorBefore" :style="getColor(item.color)" />
  .setCardItemColorBefore {
    // content: '';
    z-index: 100;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 128px;
    width: 30px;
  }
  
// 根据接口反回的颜色值设置背景色
const getColor = hex => ({
  backgroundImage: `linear-gradient(to right,${hexToRgba(
    hex,
    '0.15'
  )},${hexToRgba(hex, '0')}`
})

// 16进制转rgba
const hexToRgba = (hex, opacity) => {
  if (!hex) hex = '#ededed'
  const rgba =
    'rgba(' +
    parseInt('0x' + hex.slice(1, 3)) +
    ',' +
    parseInt('0x' + hex.slice(3, 5)) +
    ',' +
    parseInt('0x' + hex.slice(5, 7)) +
    ',' +
    (opacity || '1') +
    ')'
  return rgba
}

这地方有很多坑，反正就按照上面的写法肯定是好用的。

核心的坑在于渐变色linear-gradient这块，试了好久才试出来这个办法。