[echarts] 使用scss变量

javascript 复制代码
// 获取指定的css变量
const getCssVariable = (name) =>{
	return getComputedStyle(document.documentElement).getPropertyValue(name).trim()
}


// 使用示例
const primaryColor = getCssVariable ('--chart-primary-rgb') // rgba(24, 144, 255, 0.5)

加透明度

javascript 复制代码
const getCssVariableWithOpacity = (name, opacity = 1) => {
  const rgbValue = getComputedStyle(document.documentElement)
    .getPropertyValue(name)
    .trim()
  
  if (!rgbValue) return ''
  
  // 如果传入的是 rgba 字符串,直接修改透明度
  if (rgbValue.startsWith('rgba')) {
    return rgbValue.replace(/[\d.]+\)$/g, `${opacity})`)
  }
  
  // 如果是 RGB 数值格式(如 "24, 144, 255")
  return `rgba(${rgbValue}, ${opacity})`
}

// 使用示例
const primaryColor = getCssVariableWithOpacity('--chart-primary-rgb', 0.5) // rgba(24, 144, 255, 0.5)
相关推荐
阿酷tony31 分钟前
视频专栏列表的防录屏水印和跑马灯效果(也可网站调用)
java·前端·音视频
凌风的跨境分享1 小时前
Temu店群运维提效:定时策略自动化任务全场景实操指南
大数据·运维·前端·人工智能·架构·自动化
linux_cfan1 小时前
videojs v10 源代码系列解读:06 · DOM 工具箱:事件、聚焦、Shadow DOM、定位
前端
尾善爱看海1 小时前
Vue 面试进阶篇:Composition API、插槽、自定义指令……8 个章节 + 高频面试题全解析
前端·javascript·vue.js·面试·vue
SEO_juper2 小时前
外贸多语言站最隐蔽的流量杀手:hreflang 错了,谷歌把德语页推给美国人(附审计脚本)
开发语言·前端·python·seo·独立站·谷歌优化
亿元程序员2 小时前
为什么现在 AI 这么发达了,还要坚持手搓教程?
前端
三小河3 小时前
在 Codex 桌面端接入 DeepSeek 模型(CC Switch 代理中转)
前端·javascript·人工智能
CoderYanger3 小时前
前端基础——JavaScript(WebAPI)代码案例
java·开发语言·前端·javascript·css·前端框架·html5
恋猫de小郭3 小时前
Shopify 从 React Native 回到 Swift/Kotlin,但是你以为有手就行??
android·前端·ios
BillKu3 小时前
Element Plus 的 el-tab-pane:lazy 的说明
前端·javascript·vue.js